高德地图开发之点标注marker

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/diypp2012/article/details/77574021

在地图上添加标记点是常使用的方法,用它可以将任何你希望或感兴趣的点标注在地图上,同时也可以指定任意的图标或内容等。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();

猜你喜欢

转载自blog.csdn.net/diypp2012/article/details/77574021
今日推荐