百度地图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 相关文章推荐
javascript比较文档位置
Apr 08 Javascript
js 获取计算后的样式写法及注意事项
Feb 25 Javascript
js自动下载文件到本地的实现代码
Apr 28 Javascript
用jQuery模拟select下拉框的简单示例代码
Jan 26 Javascript
禁止按回车键提交表单的方法
Jun 11 Javascript
JavaScript 数组中最大最小值
Jun 05 Javascript
JS实现随机颜色的3种方法与颜色格式的转化
Jan 05 Javascript
使用react context 实现vue插槽slot功能
Jul 18 Javascript
微信小程序实现页面分享onShareAppMessage
Aug 12 Javascript
node.js处理前端提交的GET请求
Aug 30 Javascript
extjs图形绘制之饼图实现方法分析
Mar 06 Javascript
vue基于Teleport实现Modal组件
May 31 Vue.js
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
短波问题解答
2021/02/28 无线电
信用卡效验程序
2006/10/09 PHP
phpstorm配置Xdebug进行调试PHP教程
2014/12/01 PHP
PHP输出一个等腰三角形的方法
2015/05/12 PHP
PHP验证码无法显示的原因及解决办法
2017/08/11 PHP
javascript 异步页面查询实现代码(asp.net)
2010/05/26 Javascript
jQuery ul标签下拉菜单演示代码
2010/12/11 Javascript
同一页面多个商品倒计时JS 基于面向对象的javascript
2012/02/16 Javascript
JQuery入门—JQuery程序的代码风格详细介绍
2013/01/03 Javascript
引入autocomplete组件时JS报未结束字符串常量错误
2014/03/19 Javascript
js的[defer]和[async]属性
2014/11/24 Javascript
js实现的tab标签切换效果代码分享
2015/08/25 Javascript
jquery点击改变class并toggle的实现代码
2016/05/15 Javascript
深入学习Bootstrap表单
2016/12/13 Javascript
JS中with的替代方法与String中的正则方法详解
2016/12/23 Javascript
详解NODEJS基于FFMPEG视频推流测试
2017/11/17 NodeJs
angular第三方包开发整理(小结)
2018/04/19 Javascript
[01:33]DOTA2上海特级锦标赛 LIQUID战队完整宣传片
2016/03/16 DOTA
python XlsxWriter模块创建aexcel表格的实例讲解
2018/05/03 Python
对python sklearn one-hot编码详解
2018/07/10 Python
Python使用pickle模块报错EOFError Ran out of input的解决方法
2018/08/16 Python
Python+OpenCV+图片旋转并用原底色填充新四角的例子
2019/12/12 Python
Python实现疫情通定时自动填写功能(附代码)
2020/05/27 Python
亚洲领先的旅游体验市场:Voyagin
2019/11/23 全球购物
GWT (Google Web Toolkit)有哪些主要的原件组成?
2015/06/08 面试题
社区网格化管理实施方案
2014/03/21 职场文书
汽车专业求职信
2014/06/05 职场文书
幼儿园大班开学寄语
2014/08/02 职场文书
本科应届生求职信
2014/08/05 职场文书
党的群众路线批评与自我批评发言稿
2014/10/16 职场文书
2015元旦标语横幅
2014/12/09 职场文书
2015年百日安全活动总结
2015/03/26 职场文书
教师聘用意向书
2015/05/11 职场文书
MySql存储过程之逻辑判断和条件控制
2021/05/26 MySQL
用 Python 定义 Schema 并生成 Parquet 文件详情
2021/09/25 Python
Python docx库删除复制paragraph及行高设置图片插入示例
2022/07/23 Python