微信小程序開(kāi)發(fā)之地圖功能實(shí)戰(zhàn)教程
2020-09-27|HiShop
導(dǎo)讀:微信小程序開(kāi)發(fā)之地圖功能實(shí)戰(zhàn)教程,本文主要介紹微信小程序中的地圖模塊相關(guān)功能。...
微信小程序之地圖功能(map)實(shí)戰(zhàn)教程。本文主要介紹微信小程序中的地圖模塊相關(guān)功能。
基本使用
地圖組件使用起來(lái)也很簡(jiǎn)單。
.wxml
<map id="map" longitude="{{longitude}}" latitude="{{latitude}}" scale="14" controls="{{controls}}" bindcontroltap="controltap" markers="{{markers}}" bindmarkertap="markertap" polyline="{{polyline}}" circles="{{circles}}" bindregionchange="regionchange" show-location > </map>
除了顯示基本地圖,還可以在地圖上添加markers–標(biāo)注,polyline–折線,circles–圓形,controls–控件。
markers
data: { // markers: [{ iconPath: "../../img/marker_red.png", id: 0, latitude: 40.002607, longitude: 116.487847, width: 35, height: 45 }], ... //省略代碼 }
在data中定義markers變量來(lái)表示覆蓋物
然后map控件引入即可:
<map id="map" longitude="{{longitude}}" markers="{{markers}}" ...//省略代碼> </map>
polyline
data: { // polyline: [{ points: [{ longitude: '116.481451', latitude: '40.006822' }, { longitude: '116.487847', latitude: '40.002607' }, { longitude: '116.496507', latitude: '40.006103' }], color: "#FF0000DD", width: 3, dottedLine: true }], ... //省略代碼 } ?<map id="map" longitude="{{longitude}}" latitude="{{latitude}}" polyline="{{polyline}}" >
circles
data: { // circles: [{ latitude: '40.007153', longitude: '116.491081', color: '#FF0000DD', fillColor: '#7cb5ec88', radius: 400, strokeWidth: 2 }], ... //省略代碼 }