百度地图API （1）:往地图中添加标注点

您所在的位置：网站首页 › 百度地图添加标注 › 百度地图API （1）:往地图中添加标注点

百度地图API （1）:往地图中添加标注点

#百度地图API （1）:往地图中添加标注点| 来源: 网络整理| 查看: 265

1.实现功能：通过给定的坐标点，往地图中添加标注点，点击标注点，显示改点的详细信息。 2.效果图：演示链接：http://www.ltbetter.com:8080/BMap/MapTest1.html 这里写图片描述 3.核心方法：

手动创建数据，实际项目则是接受GPS信息 //建立坐标点： // lng：经度 lat：纬度 var points = [ {"lng":112.58,"lat":26.89,"url":"http://www.baidu.com","id":1,"name":"p1"}, {"lng":112.59,"lat":26.90,"url":"http://www.mi.com","id":2,"name":"p2"}, {"lng":112.57,"lat":26.88,"url":"http://www.csdn.com","id":3,"name":"p3"} ]; 创建添加标注点到地图，并为标注点添加点击事件 //创建标注点并添加到地图中 function addMarker(points) { //循环建立标注点 for(var i=0, pointsLen = points.length; i showInfo(this,thePoint); }); })(); } } 编写信息显示方法 function showInfo(thisMarker,point) { //获取点的信息 var sContent = '' +'' +'id：' + point.id + '' +'' +'名称：' + point.name + '' +'查看：详情' +''; var infoWindow = new BMap.InfoWindow(sContent); //创建信息窗口对象 thisMarker.openInfoWindow(infoWindow); //图片加载完后重绘infoWindow } 创建地图 //创建地图 var map = new BMap.Map("allmap"); map.centerAndZoom(new BMap.Point(116.404, 39.915), 11); // 设置中心点 map.centerAndZoom( "衡阳"); //指定中心城市 map.setCurrentCity("衡阳"); map.addControl(new BMap.MapTypeControl()); //设置可拖拽 map.enableScrollWheelZoom(true); //添加滚轮缩放 addMarker(points); //添加标注

Tip: 想使用百度地图api需要申请一个ak，申请方法就不介绍了，百度一大堆.

完整代码(不包括api的ak 需要自己申请)：

body, html,#allmap {width: 100%;height: 100%;overflow: hidden;margin:0;font-family:"微软雅黑";} 百度地图api展示 //新建三个地图上点 var points = [ {"lng":112.58,"lat":26.89,"url":"http://www.baidu.com","id":1,"name":"p1"}, {"lng":112.59,"lat":26.90,"url":"http://www.mi.com","id":2,"name":"p2"}, {"lng":112.57,"lat":26.88,"url":"http://www.csdn.com","id":3,"name":"p3"} ]; //创建标注点并添加到地图中 function addMarker(points) { //循环建立标注点 for(var i=0, pointsLen = points.length; i showInfo(this,thePoint); }); })(); } } function showInfo(thisMarker,point) { //获取点的信息 var sContent = '' +'' +'id：' + point.id + '' +'' +'名称：' + point.name + '' +'查看：详情' +''; var infoWindow = new BMap.InfoWindow(sContent); //创建信息窗口对象 thisMarker.openInfoWindow(infoWindow); //图片加载完后重绘infoWindow } //创建地图 var map = new BMap.Map("allmap"); map.centerAndZoom(new BMap.Point(116.404, 39.915), 11); // 设置中心点 map.centerAndZoom( "衡阳"); map.setCurrentCity("衡阳"); //设置为衡阳 map.addControl(new BMap.MapTypeControl()); map.enableScrollWheelZoom(true); addMarker(points); 参考资料：http://blog.csdn.net/liusaint1992/article/details/50070839

【本文地址】

百度地图API （1）:往地图中添加标注点

百度地图API （1）:往地图中添加标注点

今日新闻

推荐新闻