图标点标记
html,body,#container{
height:100%;
width:100%;
}
.amap-icon img{
width: 25px;
height: 34px;
}
// 创建地图实例
var map = new AMap.Map("container", {
zoom: 13,
center: [116.4,39.92],
resizeEnable: true
});
// 以 icon URL 的形式创建一个途经点
var viaMarker = new AMap.Marker({
position: new AMap.LngLat(116.38,39.92),
// 将一张图片的地址设置为 icon
icon: '///jsapi_demos/static/demo-center/icons/dir-via-marker.png',
// 设置了 icon 以后，设置 icon 的偏移量，以 icon 的 [center bottom] 为原点
offset: new AMap.Pixel(-13, -30)
});
// 创建一个 Icon
var startIcon = new AMap.Icon({
// 图标尺寸
size: new AMap.Size(25, 34),
// 图标的取图地址
image: '///jsapi_demos/static/demo-center/icons/dir-marker.png',
// 图标所用图片大小
imageSize: new AMap.Size(135, 40),
// 图标取图偏移量
imageOffset: new AMap.Pixel(-9, -3)
});
// 将 icon 传入 marker
var startMarker = new AMap.Marker({
position: new AMap.LngLat(116.35,39.89),
icon: startIcon,
offset: new AMap.Pixel(-13, -30)
});
// 创建一个 icon
var endIcon = new AMap.Icon({
size: new AMap.Size(25, 34),
image: '///jsapi_demos/static/demo-center/icons/dir-marker.png',
imageSize: new AMap.Size(135, 40),
imageOffset: new AMap.Pixel(-95, -3)
});
// 将 icon 传入 marker
var endMarker = new AMap.Marker({
position: new AMap.LngLat(116.45,39.93),
icon: endIcon,
offset: new AMap.Pixel(-13, -30)
});
// 将 markers 添加到地图
map.add([viaMarker, startMarker, endMarker]);
android高德地图自定义带数字marker图标 自定义图标-点标记-示例中心-JS API 示例 | 高德地图API...
