百度地图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 相关文章推荐
js异或加解密效果代码
Jun 25 Javascript
JSDoc 介绍使用规范JsDoc的使用介绍
Feb 12 Javascript
Google Maps API地图应用示例分享
Oct 23 Javascript
js插件设置innerHTML时在IE8下提示“未知运行时错误”解决方法
Apr 25 Javascript
详解JS中的快速排序与冒泡
Jan 10 Javascript
vuex学习之Actions的用法详解
Aug 29 Javascript
详解Chart.js轻量级图表库的使用经验
May 22 Javascript
解决vue router组件状态刷新消失的问题
Aug 01 Javascript
移动端(微信等使用vConsole调试console的方法
Mar 05 Javascript
百度小程序之间的页面通信过程详解
Jul 18 Javascript
node.js制作一个简单的登录拦截器
Feb 10 Javascript
解决antd 下拉框 input [defaultValue] 的值的问题
Oct 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
全国FM电台频率大全 - 17 湖北省
2020/03/11 无线电
PHP将Excel导入数据库及数据库数据导出至Excel的方法
2015/06/24 PHP
PHP实现二叉树的深度优先与广度优先遍历方法
2015/09/28 PHP
基于Laravel实现的用户动态模块开发
2017/09/21 PHP
PHP接入支付宝接口失效流程详解
2020/11/10 PHP
使弱类型的语言JavaScript变强势
2009/06/22 Javascript
基于Jquery+Ajax+Json的高效分页实现代码
2011/10/29 Javascript
Javascript计算两个marker之间的距离(Google Map V3)
2013/04/26 Javascript
js中用window.open()打开多个窗口的name问题
2014/03/13 Javascript
深入理解javascript原型链和继承
2014/09/23 Javascript
node.js中的console.log方法使用说明
2014/12/09 Javascript
jquery实现列表上下移动功能
2016/02/25 Javascript
JSON字符串和对象相互转换实例分析
2016/06/16 Javascript
Javascript日期格式化format函数的使用方法
2016/08/30 Javascript
JS封装通过className获取元素的函数示例
2016/12/20 Javascript
js如何判断是否在iframe中及防止网页被别站用iframe嵌套
2017/01/11 Javascript
微信小程序图片宽100%显示并且不变形
2017/06/21 Javascript
vue实现简单的星级评分组件源码
2018/11/16 Javascript
vue-cli打包后本地运行dist文件中的index.html操作
2020/08/12 Javascript
Python生成验证码实例
2014/08/21 Python
解析Python中的eval()、exec()及其相关函数
2017/12/20 Python
Python秒算24点实现及原理详解
2019/07/29 Python
python实现简单学生信息管理系统
2020/04/09 Python
Python脚本如何在bilibili中查找弹幕发送者
2020/06/04 Python
pytorch 查看cuda 版本方式
2020/06/23 Python
python删除文件、清空目录的实现方法
2020/09/23 Python
python 动态渲染 mysql 配置文件的示例
2020/11/20 Python
CSS3实现跳动的动画效果
2016/09/12 HTML / CSS
H5页面适配iPhoneX(就是那么简单)
2019/12/02 HTML / CSS
Everlast官网:拳击、综合格斗和健身相关的体育用品
2020/08/03 全球购物
创建无烟单位实施方案
2014/03/29 职场文书
有子女的离婚协议书怎么写(范本)
2014/09/29 职场文书
茶楼服务员岗位职责
2015/02/09 职场文书
单独二胎证明
2015/06/24 职场文书
入队仪式主持词
2015/07/04 职场文书
使用Redis实现秒杀功能的简单方法
2021/05/08 Redis