js添加多marker 高德地图_web开发如何使用高德地图API（四）通过AMap.Marker自定义标点...

说两句：

以下内容除了我自己写的部分，其他部分在高德开放平台都有(可点击外链访问)。

我所整理的内容以实际项目为基础希望更有针对性的，更精简。

准备工作：

首先，注册开发者账号，成为高德开放平台开发者

登陆之后，在进入「应用管理」 页面「创建新应用」

为应用添加 Key，「服务平台」一项请选择「 Web 端 ( JSAPI )」

拿到key之后，在页面引入高德API和UI组件库以及相关CSS文件

显示基础地图所用到的HTML和JS

var map = new AMap.Map('container', {

resizeEnable: true,

zoom:11,

center: [116.397428, 39.90923]//默认的地图中心经纬度

});

引入高德地图工具包js文件

在map中指定的经纬度上描点

//创建一个Marker实例：

var markerTemp = new AMap.Marker({

position : [lng,lat],

offset : new AMap.Pixel(-21,-21),//偏移量，默认以marker左上角位置为基准点

map : map

});// 自定义点标记内容(已设置头像显示在描点位置为例)

var markerContent = document.createElement("div");

var markerImg = document.createElement("img");

markerImg.className = "markerlnglat";//设置描点img的统一样式

markerImg.src = path + data[0][i].userId.headSculpture;//设置图片url

markerContent.appendChild(markerImg);

markerTemp.setContent(markerContent);

在已有地图上添加与删除Marker

//将创建的点标记添加到已有的地图实例：

map.add(marker);//移除已创建的 marker

map.remove(marker);

监听Marker的点击事件