百度地图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 相关文章推荐
图片连续滚动代码[兼容IE/firefox]
Jun 11 Javascript
Javascript String.replace的妙用
Sep 08 Javascript
javascript 得到变量类型的函数
May 19 Javascript
对Jquery中的ajax再封装,简化操作示例
Feb 12 Javascript
检查表单元素的值是否为空的实例代码
Jun 16 Javascript
EasyUI学习之DataGird分页显示数据
Dec 29 Javascript
BootStrap学习笔记之nav导航栏和面包屑导航
Jan 03 Javascript
Jquery中.bind()、.live()、.delegate()和.on()之间的区别详解
Aug 01 jQuery
响应式框架Bootstrap栅格系统的实例
Dec 19 Javascript
Vue插槽原理与用法详解
Mar 05 Javascript
Vue  webpack 项目自动打包压缩成zip文件的方法
Jul 24 Javascript
vue中v-model对select的绑定操作
Aug 31 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
php gzip压缩输出的实现方法
2013/04/27 PHP
php实现html标签闭合检测与修复方法
2015/07/09 PHP
PHP根据树的前序遍历和中序遍历构造树并输出后序遍历的方法
2017/11/10 PHP
TP5框架实现的数据库备份功能示例
2020/04/05 PHP
在VS2008中使用jQuery智能感应的方法
2010/12/30 Javascript
仿JQuery输写高效JSLite代码的一些技巧
2015/01/13 Javascript
Javascript中prototype属性实现给内置对象添加新的方法
2015/05/14 Javascript
JavaScript检测字符串中是否含有html标签实现方法
2015/07/01 Javascript
AngularJs  Creating Services详解及示例代码
2016/09/02 Javascript
javascript笔记之匿名函数和闭包
2017/02/06 Javascript
VueJs组件prop验证简单介绍
2017/09/12 Javascript
详解使用PM2管理nodejs进程
2017/10/24 NodeJs
vue中使用input[type=&quot;file&quot;]实现文件上传功能
2018/09/10 Javascript
vue+Element-ui实现分页效果实例代码详解
2018/12/10 Javascript
node全局变量__dirname与__filename的区别
2019/01/14 Javascript
Vue表单控件数据绑定方法详解
2020/02/05 Javascript
vue.js页面加载执行created,mounted的先后顺序说明
2020/11/07 Javascript
[40:31]Secret vs Alliacne 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/17 DOTA
[49:21]完美世界DOTA2联赛循环赛 Ink Ice vs LBZS BO2第二场 11.05
2020/11/06 DOTA
Python简单获取自身外网IP的方法
2016/09/18 Python
python绘制中国大陆人口热力图
2018/11/07 Python
python3实现多线程聊天室
2018/12/12 Python
python找出因数与质因数的方法
2019/07/25 Python
Python模块_PyLibTiff读取tif文件的实例
2020/01/13 Python
python误差棒图errorbar()函数实例解析
2020/02/11 Python
Python绘制动态水球图过程详解
2020/06/03 Python
让你相见恨晚的十个Python骚操作
2020/11/18 Python
详解webapp页面滚动卡顿的解决办法
2018/12/26 HTML / CSS
阿联酋网上花店:Ferns N Petals
2018/02/14 全球购物
纽约复古灵感的现代珠宝品牌:Lulu Frost
2018/03/03 全球购物
公司JAVA开发面试题
2015/04/02 面试题
JAVA和C++区别都有哪些
2015/03/30 面试题
前台文员我鉴定
2014/01/12 职场文书
互联网电子商务专业毕业生求职信
2014/03/18 职场文书
要账委托书范本
2014/09/15 职场文书
三八妇女节慰问信
2015/02/14 职场文书