高德地图排雷指南(一)--点标记,信息窗体

2018-09-01 05:49:44来源:博客园 阅读 ()

新老客户大回馈,云服务器低至5折

最近公司交给我了几个关于地图模块的任务,用的高德地图api,遇到了好多问题。下面我把雷排一下,顺便把我的解决办法贴上。

1.动态生成marker点

和后端对接,传我一个接口里面放了地址、信息等等一大堆东西。然后把标记点给显示出来,这里主要注意的就是,lng,lat这两个东西,其他也没什么。下面上代码:

html

1 //事先把该引用的js,css引用好,这里就不贴了
2 <div id="container">
3 </div>//放地图的地方

js

 1 //地图初始化
 2 var map = new AMap.Map("container", {
 3         resizeEnable: true,
 4         center: [112.896866,30.421215],//中心点,自己根据要求来
 5         zoom: 13,
 6     mapStyle:'amap://styles/darkblue'//地图的主题,官方有提供
 7     }); 
 8 addMarker();
 9     //添加marker标记
10     function addMarker() {
11         map.clearMap();
12 $.ajax({
13   url: "http://...",//后台的接口
14   type:'post',
15   dataType: 'json',
16   success:function(data){
17     createMarker(data);
18   }
19 });//基本操作
20 //生成marker点
21 function createMarker(data,lng,lat){
22     for(var i=0;i<data.length;i++) {//遍历嘛
23      if(data[i].longitude!=null){//判断嘛,如果有未定义的经纬度的话会报错
24      lng = data[i].longitude;
25      lat = data[i].latitude;
26      var marker = new AMap.Marker({
27           position: [lng,lat],
28           map: map,
29           icon: new AMap.Icon({
30           image: "./img/mark.png",
31           //icon可缺省,缺省时为默认的蓝色水滴图标,
32           size: new AMap.Size(40, 50),
33           imageOffset: new AMap.Pixel(0, 10),
34           })
35        });
36       }
37     }
38  }                

 生成点没什么问题,主要就是注意经纬度的判断,其他的根据需求自己补充修改就行了。

2.添加每个点对应的信息窗体,根据ajax动态的那

这里有很多问题会跑出来,先贴上代码再说

 

//初始化信息窗体
var infoWindow = new AMap.InfoWindow({
    isCustom: true,  //使用自定义窗体
    // content: createInfoWindow(title, content),这是在api中的用法,一个坑
    offset: new AMap.Pixel(16, -45)
});
//接上之前的生成点
function createMarker(data,lng,lat){
     for(var i=0;i<data.length;i++) {
        if(data[i].longitude!=null){
           lng = data[i].longitude;
           lat = data[i].latitude;
           var marker = new AMap.Marker({
                    position: [lng,lat],
                    map: map,
                    //label:"设备地点:"+i,
                    icon: new AMap.Icon({
                        image: "./img/mark.png",
                        //icon可缺省,缺省时为默认的蓝色水滴图标,
                        size: new AMap.Size(40, 50),
                        imageOffset: new AMap.Pixel(0, 10),
                    })
                });
           //添加marker点击事件
           marker.on('click', markerClick);
           marker.emit('click', {target: marker});
           //信息窗体的内容,content里面的内容和样式自己根据要求来,这里只是示范一下
           marker.content="<div style='background-color: rgb(108,106,195); height: 200px;'><p>经纬度:"+data[i].longitude+","+data[i].latitude+"</p></div>"
        }
    }
} 
//marker点事件
function markerClick(e) {
    infoWindow.setContent(e.target.content);//必须要用setContent方法
    infoWindow.open(map, e.target.getPosition());
}            

相信也有很多朋友遇到过两个问题:1.只有单击一个点有自己的信息窗体,其他点没有;  2.所有窗体的内容都一样,没有变化;

出现这种问题的原因第一个是因为,单击事件在循环中使用到了外面的参数形成了闭包,导致只有循环的最后一个点有事件,我们可以用.emit加上e.target去解决;

第二个是因为没有用setContent去添加内容,这个函数是官方给的去添加动态内容的方法.

搞清楚出现问题的原因之后解决起来就比较方便了

3.有个奇怪的需求,有一组按钮对应的都是一个点的信息窗体,内容都不一样

这个需求实现起来就比较麻烦,因为高德地图的marker自己没有id属性,传参难度就很大,只有让后端把一个点的多个信息窗体的json给你才能搞定.

具体代码就不贴了,如果有需要的话可以留言联系我。

标签:

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:angularjs学习第九天笔记(指令作用域【隔离作用域】研究)

下一篇:javaScript动态显示当前时间