高德地图开发之点标注marker

高德地图API：实现点标注与Marker详细教程

最新推荐文章于 2024-05-29 16:53:04 发布

原创最新推荐文章于 2024-05-29 16:53:04 发布 · 2w 阅读

CC 4.0 BY-SA版权

文章标签：

4 篇文章

订阅专栏

本文介绍了如何使用高德地图API在地图上添加点标注，包括创建Marker对象，设置坐标、图标、label和title，以及处理鼠标事件。通过示例代码展示了如何将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();