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

最新推荐文章于 2022-07-11 14:33:00 发布

weixin_33998125

最新推荐文章于 2022-07-11 14:33:00 发布

阅读量221

点赞数

文章标签：后端 json

原文链接：http://www.cnblogs.com/luza/p/mapTrouble_solutionbyLuza.html

版权

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

1.动态生成marker点

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

html

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

 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());
}