百度地图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 each()小议
Mar 18 Javascript
仿当当网淘宝网等主流电子商务网站商品分类导航菜单
Sep 25 Javascript
将HTML的左右尖括号等转义成实体形式的两种实现方式
May 04 Javascript
jQuery实现鼠标跟随提示层效果代码(可显示文本,Div,Table,Html等)
Apr 18 Javascript
Bootstrap模态框调用功能实现方法
Sep 19 Javascript
angularjs实现简单的购物车功能
Sep 21 Javascript
详解基于vue-cli优化的webpack配置
Nov 06 Javascript
微信小程序使用radio显示单选项功能【附源码下载】
Dec 11 Javascript
jQuery中$原理实例分析
Aug 13 jQuery
使用RN Animated做一个“添加购物车”动画的方法
Sep 12 Javascript
JavaScript实现随机五位数验证码
Sep 27 Javascript
JavaScript组合继承详解
Nov 07 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
window.addeventjs事件驱动函数集合addEvent等
2008/02/19 Javascript
js实现双向链表互联网机顶盒实战应用实现
2011/10/28 Javascript
Jquery节点遍历next与nextAll方法使用示例
2014/07/22 Javascript
JS设置cookie、读取cookie、删除cookie
2015/04/17 Javascript
纯JavaScript代码实现文本比较工具
2016/02/17 Javascript
高效利用Angular中内置服务$http、$location等
2016/03/22 Javascript
js和C# 时间日期格式转换的简单实例
2016/05/28 Javascript
AngularJS 如何在控制台进行错误调试
2016/06/07 Javascript
Nodejs中 npm常用命令详解
2016/07/04 NodeJs
简单实现js悬浮导航效果
2017/02/05 Javascript
Bootstrap列表组学习使用
2017/02/09 Javascript
详解vue 模拟后台数据(加载本地json文件)调试
2017/08/25 Javascript
Angular2+如何去除url中的#号详解
2017/12/20 Javascript
(模仿京东用户注册)用JQuery实现简单表单验证,初学者必看
2018/01/08 jQuery
详解vue 单页应用(spa)前端路由实现原理
2018/04/04 Javascript
javascript实现遮罩层动态效果实例
2019/05/14 Javascript
jquery绑定事件 bind和on的用法与区别分析
2020/05/22 jQuery
[48:05]2018DOTA2亚洲邀请赛 3.31 小组赛 B组 VGJ.T vs VP
2018/03/31 DOTA
设计模式中的原型模式在Python程序中的应用示例
2016/03/02 Python
python list排序的两种方法及实例讲解
2017/03/20 Python
Python操作Excel之xlsx文件
2017/03/24 Python
Python Series从0开始索引的方法
2018/11/06 Python
PyQt5笔记之弹出窗口大全
2019/06/20 Python
python单向链表的基本实现与使用方法【定义、遍历、添加、删除、查找等】
2019/10/24 Python
pycharm运行scrapy过程图解
2019/11/22 Python
Python中bisect的用法及示例详解
2020/07/20 Python
让IE6、IE7、IE8支持CSS3的脚本
2010/07/20 HTML / CSS
用C#语言写出在本地创建一个UDP接收端口的具体过程
2016/02/22 面试题
工地资料员岗位职责
2013/12/31 职场文书
党在我心中演讲稿
2014/09/02 职场文书
化学专业大学生职业生涯规划范文
2014/09/13 职场文书
在职证明书范本(2014新版)
2014/09/25 职场文书
毕业证委托书范文
2014/09/26 职场文书
个人存款证明书
2014/10/18 职场文书
2016公司年会主持词
2015/07/01 职场文书
2016年小学“我们的节日·中秋节”活动总结
2016/04/05 职场文书