圖標點標記

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: '//a.amap.com/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: '//a.amap.com/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: '//a.amap.com/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...的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。