高德地图开发之点标注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();

高德地图开发之点标注marker相关推荐

高德地图开发（三、地图marker点标记）
高德地图开发(三.地图marker自定义点标记) 一.默认点标记二.自定义点标记一.默认点标记 // 创建一个 Marker 实例:var marker = new AMap.Marker({po ...
高德地图开发学习Demo
高德地图开发学习Demo 提供者:sannas 开源项目地址: https://github.com/851151582/NaviLocXf.git Demo实现地图定位.搜索及导航功能,通过关键字可 ...
Android高德地图开发详解
这段时间开发的时候用到了高德地图,对高德地图开发有心得体会,现在分享给大家,对我开发过百度地图的我来说,总体来说高德地图Demo,没有百度讲解的详细个人更偏向于使用百度地图,但是没办发,项目需要使用 ...
高德地图开发（四、点聚合）
高德地图开发(四.点聚合) 一.设置点聚合二.点聚合中添加删除标记三.方法和事件一.设置点聚合只截取了部分代码,几个方法都处于一个类中. let markers = []; // 点聚合数组 ...
高德地图开发之地图配置及vue上初始化创建地图
开门见山地说,现如今地图相关的开发业务在工作中越来越常见,目前市面上主流的地图开发还是以百度和高德为主,今天就来讲一下高德地图的配置和在vue上的初始化创建,帮助大家更好更快的了解高德地图开发相关的 ...
快速掌握Web高德地图开发
本文章致力于帮助对Web高德地图开发感兴趣的朋友快速掌握开发要领,如果能对屏幕前的您有所助益,我将十分荣幸. 如何快速掌握Web高德地图开发? 要领如下: 一. 首先要知道高德地图本身有提供开放的地图 ...
安卓高德地图开发之引入导航功能
高德地图导航添加需要添加特定的navi包. 高德地图开发中添加导航功能的简单实现原理是引入自定义起点和终点数据后调用官方给出的demo代码. 首先需要一个baseactivity类,给出代码: pac ...
高德地图 - 点击改变当前 marker 图标（marker点击切换 icon 上一个 icon 恢复原样）
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8" ...
【VUE】vue-amap高德地图定位以及文本标注
vue-amap高德地图定位以及文本标注因要求需实现在地图的定位以及该定位的文本标注,所有我看了一下实现的方式有哪些.最后选择了用现成的 vue-amap高德组件去实现. 实现效果如图: 实现过程 ...
高德地图开发：Marker 与 Polyline
高德地图:Marker 与 Polyline 项目场景: 效果展示: 解决思路: 详细设计: MARKER 不同标记物的形状 Polyline 的动态路径显示或者隐藏代码展示: 解决思路分析: 路径 ...

高德地图开发之点标注marker

高德地图开发之点标注marker相关推荐

最新文章

热门文章