高德地圖排雷指南(一)--點標記,信息窗體

最近公司交給我了幾個關於地圖模塊的任務,用的高德地圖api,遇到了好多問題。下面我把雷排一下，順便把我的解決辦法貼上。

1.動態生成marker點

和后端對接，傳我一個接口里面放了地址、信息等等一大堆東西。然后把標記點給顯示出來，這里主要注意的就是，lng，lat這兩個東西，其他也沒什么。下面上代碼：

html

//事先把該引用的js,css引用好,這里就不貼了
<div id="container">
</div>//放地圖的地方

js

//地圖初始化
var map = new AMap.Map("container", {
        resizeEnable: true,
        center: [112.896866,30.421215],//中心點,自己根據要求來
        zoom: 13,
    mapStyle:'amap://styles/darkblue'//地圖的主題,官方有提供
    }); 
addMarker();
    //添加marker標記
    function addMarker() {
        map.clearMap();
$.ajax({
  url: "http://...",//后台的接口
  type:'post',
  dataType: 'json',
  success:function(data){
    createMarker(data);
  }
});//基本操作
//生成marker點
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,
          icon: new AMap.Icon({
          image: "./img/mark.png",
          //icon可缺省，缺省時為默認的藍色水滴圖標，
          size: new AMap.Size(40, 50),
          imageOffset: new AMap.Pixel(0, 10),
          })
       });
      }
    }
 }                

 生成點沒什么問題,主要就是注意經緯度的判斷,其他的根據需求自己補充修改就行了。

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給你才能搞定.

具體代碼就不貼了,如果有需要的話可以留言聯系我。