生活随笔
收集整理的這篇文章主要介紹了
百度地图API : 自定义标注图标
小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
通過(guò)Icon類可實(shí)現(xiàn)自定義標(biāo)注的圖標(biāo)，下面示例通過(guò)參數(shù)MarkerOptions的icon屬性進(jìn)行設(shè)置，
也可以使用marker.setIcon()方法。
<!DOCTYPE html
>
<html
><head
><meta http
-equiv
="Content-Type" content
="text/html; charset=utf-8" /><meta name
="viewport" content
="initial-scale=1.0, user-scalable=no" /><style type
="text/css">body
,html
,#allmap {width
: 100%;height
: 100%;overflow
: hidden
;margin
: 0;font
-family
: "微軟雅黑";}</style
><script type
="text/javascript"src
="https://api.map.baidu.com/api?v=2.0&ak=LaQ2jfcObK42sDixAN2BraP2jbGMU6BC"></script
><script src
="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script
><title
>GPS轉(zhuǎn)百度
</title
>
</head
><body
><div id
="allmap"></div
>
</body
></html
>
<script type
="text/javascript">var map
= new BMap
.Map("allmap"); var ggpoint
= new BMap
.Point(129.879392, 32.790481)map
.centerAndZoom(ggpoint
, 16); map
.addControl(new BMap
.MapTypeControl()); map
.setCurrentCity("長(zhǎng)崎"); map
.enableScrollWheelZoom(true); var points
= [[123.319727767605, 41.4229349260951],[125.725967756961, 39.0269627713093],[126.976200904837, 37.559805362172],[126.995866800926, 37.5646576789431],[127.717276492584, 37.8846597149346],[127.845636602218, 36.5247159814598],[129.881057104894, 32.7479331075868],[129.877945175468, 32.7441603140361],[129.823280322228, 32.8551075968325],[129.996944752118, 33.439129860535],[129.857128998386, 33.2587933885413],[129.788714312017, 33.7842305297287],[130.241407289985, 32.7843329855946],];translateCallback
= function
(data
) {if (data
.status
=== 0) {for (var i
= 0; i
< points
.length
; i
++) {var myIcon
= new BMap
.Icon("https://i.loli.net/2020/10/21/hQeUEjzTaZv63uB.png", new BMap
.Size(23, 35));var point
= new BMap
.Point(points
[i
][0], points
[i
][1]);var marker
= new BMap
.Marker(point
, { icon
: myIcon
});map
.addOverlay(marker
);};map
.addOverlay(marker
); var label
= new BMap
.Label("您現(xiàn)在的位置", { offset
: new BMap
.Size(20, -10) });marker
.setLabel(label
); map
.setCenter(data
.points
[0]);}}setTimeout(function
() {var convertor
= new BMap
.Convertor();var pointArr
= [];pointArr
.push(ggpoint
);convertor
.translate(pointArr
, 1, 5, translateCallback
)}, 1000)map
.addEventListener('click', function
(e
) {console
.log('點(diǎn)擊位置經(jīng)緯度：' + e
.point
.lng
+ ',' + e
.point
.lat
);});
</script
>
總結(jié)
以上是生活随笔為你收集整理的百度地图API : 自定义标注图标的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。
