高德地圖開發之點標註marker
阿新 • • 發佈:2018-11-10
在地圖上新增標記點是常使用的方法,用它可以將任何你希望或感興趣的點標註在地圖上,同時也可以指定任意的圖示或內容等。Marker就是這樣一個用於在地圖上新增點標記的類。
1. 要有一個地圖物件例項,如下:
var mapObj = new AMap.Map('container', {zoom:5});
2. 要有一個點標記的物件例項,如下
var marker = new AMap.Marker({
position: point,
icon: iconImg,
map: mapObj
});
其中 point為點標記顯示的座標位置
iconImg為可以設定的icon圖片,icon屬性可以不寫,有預設圖示
map設定為地圖例項,即將該marker新增到該地圖上。
3.
var msg_label = '<span>測試使用的Label的</span>';
marker.setLabel({
offset: new AMap.Pixel(20, -10), //顯示位置
content: msg_label //顯示內容
});
效果如下:
4. 給marker新增title,即懸浮時展現的文字
var msg_title = '測試使用的title';
marker.setTitle(msg_title);
5. 設定marker的滑鼠事件:
滑鼠懸浮時,marker圖示位於覆蓋物的上層,移開時,回到預設。此處使用on繫結相關操作和函式處理方法。
marker.on("mouseover", function(e) {
marker.setTop(true);
});
marker.on("mouseout", function() {
marker.setTop(false);
});
其他:將marker新增到地圖上的方法有兩種,其一是步驟2中設定map屬性引數,其二是使用方法setMap(),如下:
marker.setMap(mapObj);
當方法引數為空,表明將該marker移除地圖。
marker.setMap();