1. 程式人生 > >高德地圖開發之點標註marker

高德地圖開發之點標註marker

在地圖上新增標記點是常使用的方法,用它可以將任何你希望或感興趣的點標註在地圖上,同時也可以指定任意的圖示或內容等。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.

給marker新增label,即marker旁邊顯示的字串

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