百度地图api应用标注地理位置信息(js版)


Posted in Javascript onFebruary 01, 2013

有时做了一些东西没有记录,而过一段时间再看的时候,有会忘记了。需要在重新在看一遍。

百度地图javascript api可以参考 http://developer.baidu.com/map/reference/ 
示例:http://developer.baidu.com/map/jsdemo.htm

更多百度地图的介绍http://www.cnblogs.com/milkmap/tag/%E5%9C%B0%E5%9B%BEAPI/   
里面介绍的非常详细。

弄了一个百度地图来标注地理位置信息,通过百度api来获取地址。这地图api是javascript版

添加显示显示的div控件

 
<div> 
<p>搜索: 
<input id="txtarea" type="text" size="50" />  <input id="areaSearch" 
type="button" value="搜索" style="cursor: pointer" /> 
</p> 
<p> 纬度:<input name="txtlatitude" type="text" id="txtlatitude" style="width:200px;" /> 
经度:<input name="txtLongitude" type="text" id="txtLongitude" style="width:200px;" /> 
标注点所在区域:<input name="txtAreaCode" type="text" id="txtAreaCode" style="width:200px;" /> 
</p> 
</div> 
<div style="width: 420px; height: 340px; border: 1px solid gray; float: left;" id="container"> 
</div> 
<div style="width: 350px; height: 340px;" id="Div1"> 
<div> 
<div class="sel_container"> 
<strong id="curCity">北京市</strong> [<a id="curCityText" href="javascript:void(0)">更换城市</a>]</div> 
<div class="map_popup" id="cityList" style="display: none;"> 
<div class="popup_main"> 
<div class="title"> 
城市列表</div> 
<div class="cityList" id="citylist_container"> 
</div> 
<button id="popup_close"> 
</button> 
</div> 
</div> 
</div> 
</div>

在引用引用
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.3.min.js"></script> //jquery库 
<script type="text/javascript" src="http://api.map.baidu.com/api?v=1.2"></script> //百度地图的文件 
<script type="text/javascript" src="http://api.map.baidu.com/library/CityList/1.2/src/CityList_min.js"></script> //城市选择的

添加代码
<script type="text/javascript"> 
var map = new BMap.Map("container"); 
map.centerAndZoom(new BMap.Point(117.10, 40.13), 11); 
map.addControl(new BMap.NavigationControl()); 
map.addControl(new BMap.ScaleControl()); 
map.addControl(new BMap.OverviewMapControl()); 
map.addControl(new BMap.MapTypeControl()); 
//搜索 
document.getElementById("areaSearch").onclick = function () { 
// 创建地址解析器实例 
var myGeo = new BMap.Geocoder(); 
var searchTxt = document.getElementById("txtarea").value; 
// 将地址解析结果显示在地图上,并调整地图视野 
myGeo.getPoint(searchTxt, function (point) { 
if (point) { 
map.centerAndZoom(point, 16); 
document.getElementById("txtlatitude").value = point.lat; 
document.getElementById("txtLongitude").value = point.lng; 
var pointMarker = new BMap.Point(point.lng, point.lat); 
geocodeSearch(pointMarker); map.addOverlay(new BMap.Marker(point)); 
} 
else 
alert("搜索不到结果"); 
}, "全国"); 
} 
map.enableScrollWheelZoom(); 
// 创建CityList对象,并放在citylist_container节点内 
var myCl = new BMapLib.CityList({ container: "citylist_container", map: map }); 
// 给城市点击时,添加相关操作 
myCl.addEventListener("cityclick", function (e) { 
// 修改当前城市显示 
document.getElementById("curCity").innerHTML = e.name; 
// 点击后隐藏城市列表 
document.getElementById("cityList").style.display = "none"; 
}); 
// 给“更换城市”链接添加点击操作 
document.getElementById("curCityText").onclick = function () { 
var cl = document.getElementById("cityList"); 
if (cl.style.display == "none") { 
cl.style.display = ""; 
} else { 
cl.style.display = "none"; 
} 
}; 
// 给城市列表上的关闭按钮添加点击操作 
document.getElementById("popup_close").onclick = function () { 
var cl = document.getElementById("cityList"); 
if (cl.style.display == "none") { 
cl.style.display = ""; 
} else { 
cl.style.display = "none"; 
} 
}; 
map.addEventListener("click", function (e) { 
document.getElementById("txtlatitude").value = e.point.lat; 
document.getElementById("txtLongitude").value = e.point.lng; 
map.clearOverlays(); 
var pointMarker = new BMap.Point(e.point.lng, e.point.lat); // 创建标注的坐标 
addMarker(pointMarker); 
geocodeSearch(pointMarker); 
}); 
function addMarker(point) { 
var myIcon = new BMap.Icon("mk_icon.png", new BMap.Size(21, 25), 
{ offset: new BMap.Size(21, 21), 
imageOffset: new BMap.Size(0, -21) 
}); 
var marker = new BMap.Marker(point, { icon: myIcon }); 
map.addOverlay(marker); 
} 
function geocodeSearch(pt) { 
var myGeo = new BMap.Geocoder(); 
myGeo.getLocation(pt, function (rs) { 
var addComp = rs.addressComponents; 
document.getElementById("txtAreaCode").value = addComp.province + ", " + addComp.city + ", " + addComp.district; 
}); 
} 
</script>

效果图

百度地图api应用标注地理位置信息(js版)

 这标注的源码:百度地图标注源码

Javascript 相关文章推荐
基于JQuery的6个Tab选项卡插件
Sep 03 Javascript
javascript开发技术大全-第3章 js数据类型
Jul 03 Javascript
从URL中提取参数与将对象转换为URL查询参数的实现代码
Jan 12 Javascript
利用Javascript判断操作系统的类型实现不同操作系统下的兼容性
Jan 29 Javascript
JavaScript 垃圾回收机制分析
Oct 10 Javascript
jQuery操作DOM之获取表单控件的值
Jan 23 Javascript
深入解析JavaScript的闭包机制
Oct 20 Javascript
js装饰设计模式学习心得
Feb 17 Javascript
CKEditor4配置与开发详细中文说明文档
Oct 08 Javascript
JavaScript获取某一天所在的星期
Sep 05 Javascript
如何构建一个Vue插件并生成npm包
Oct 26 Javascript
JavaScript基于SVG的图片切换效果实例代码
Dec 15 Javascript
jquery select动态加载选择(兼容各种浏览器)
Feb 01 #Javascript
表单元素的submit()方法和onsubmit事件应用概述
Feb 01 #Javascript
js用Date对象处理时间实现思路及代码
Jan 31 #Javascript
document.all的一个比较完整的总结及案例
Jan 31 #Javascript
javascript对select标签的控制(option选项/select)
Jan 31 #Javascript
S2SH整合JQuery+Ajax实现登录验证功能实现代码
Jan 30 #Javascript
js+html+css实现鼠标移动div实例
Jan 30 #Javascript
You might like
一个用于mysql的数据库抽象层函数库
2006/10/09 PHP
PHP 单引号与双引号的区别
2009/11/24 PHP
解决php的“It is not safe to rely on the system’s timezone settings”问题
2015/10/08 PHP
tp5(thinkPHP5框架)时间查询操作实例分析
2019/05/29 PHP
15个款优秀的 jQuery 图片特效插件推荐
2011/11/21 Javascript
通过Javascript创建一个选择文件的对话框代码
2012/06/16 Javascript
Javascript引用指针使用介绍
2012/11/07 Javascript
javascript得到当前页的来路即前一页地址的方法
2014/02/18 Javascript
浅谈JavaScript中setInterval和setTimeout的使用问题
2015/08/01 Javascript
javascript基础练习之翻转字符串与回文
2017/02/20 Javascript
vue-cli webpack 开发环境跨域详解
2017/05/18 Javascript
关于JavaScript中forEach和each用法浅析
2017/07/27 Javascript
JavaScript实现的仿新浪微博原生态输入字数即时检查功能【兼容IE6】
2017/09/26 Javascript
vue权限路由实现的方法示例总结
2018/07/29 Javascript
详解Vue CLI3配置解析之css.extract
2018/09/14 Javascript
原生js实现3D轮播图
2020/03/21 Javascript
如何利用node.js开发一个生成逐帧动画的小工具
2019/12/01 Javascript
vue请求数据的三种方式
2020/03/04 Javascript
[01:58]DOTA2上海特级锦标赛现场采访:RTZ这个ID到底好不好
2016/03/25 DOTA
[01:01:51]EG vs VG Supermajor小组赛B组 BO3 第二场 6.2
2018/06/03 DOTA
使用python实现生成用户信息
2017/03/20 Python
将python代码和注释分离的方法
2018/04/21 Python
在python中利用KNN实现对iris进行分类的方法
2018/12/11 Python
pandas数据处理进阶详解
2019/10/11 Python
Django项目使用ckeditor详解(不使用admin)
2019/12/17 Python
基于python实现微信好友数据分析(简单)
2020/02/16 Python
Numpy 多维数据数组的实现
2020/06/18 Python
使用PyCharm安装pytest及requests的问题
2020/07/31 Python
html5+css3之CSS中的布局与Header的实现
2014/11/21 HTML / CSS
Under Armour瑞典官方网站:美国高端运动科技品牌
2018/11/21 全球购物
巴西网上药店:Drogaria Araujo
2021/01/06 全球购物
1亿有多大教学反思
2014/05/01 职场文书
毕业生学校推荐信范文
2014/05/21 职场文书
安全教育培训制度
2015/08/06 职场文书
《颐和园》教学反思
2016/02/19 职场文书
vue3引入highlight.js进行代码高亮的方法实例
2022/04/08 Vue.js