最近在使用mpvue開發小程式的時候開發map地圖組件，是想在地圖上實作自定義覆寫物，發現一個坑，就是在使用map組件的時候，一直都無法系結maker-id，用原生的可以，但是用mp-vue撰寫的時候發現一直編譯不出來系結的值。
自己寫的代碼如下：
<template>
<div class="container">
<view class="page-body" :mak-id="dd">
<view class="page-section page-section-gap">
<map
id="myMap"
style="width: 100%; height: 300px;"
:latitude="latitude"
:longitude="longitude"
@bindmarkertap="markertap"
@bindcallouttap="callouttap"
@bindlabeltap="labeltap"
:markers="markers"
scale="16"
>
<cover-view slot="callout">
<block v-for="v in markers" :key="v.id">
<cover-view class="customCallout" :marker-id="v.id">
<!-- <cover-image class="icon" src="https://img.uj5u.com/2020/10/21/151619210735571.png"></cover-image> -->
<cover-view class="content">
{{v.name}}--{{v.id}}
</cover-view>
</cover-view>
</block>
</cover-view>
</map>
</view>
<view class="btn-area">
<button @click="getCenterLocation" class="page-body-button" type="primary">獲取位置</button>
<button @click="moveToLocation" class="page-body-button" type="primary">移動位置</button>
<button @click="translateMarker" class="page-body-button" type="primary">移動標注</button>
<button @click="includePoints" class="page-body-button" type="primary">縮放視野展示所有經緯度</button>
</view>
</view>
</div>
</template>
<script>
// var bmap = require('bmap-wx')
// let wxMarkerData = []
export default {
data () {
return {
dd: 222,
latitude: 23.099994,
longitude: 113.324520,
markers: [],
covers: [{
latitude: 23.099994,
longitude: 113.344520,
iconPath: '/static/images/location.png'
}, {
latitude: 23.099994,
longitude: 113.304520,
iconPath: '/static/images/location.png'
}]
}
},
components: {
},
onReady: function (e) {
this.mapCtx = wx.createMapContext('myMap')
this.markers = [{
id: 2,
name: 'marker2',
latitude: 23.097994,
longitude: 113.323520,
iconPath: '/static/images/location.png',
customCallout: {
anchorY: 0,
anchorX: 0,
display: 'ALWAYS'
}
}, {
id: 3,
name: 'marker3',
latitude: 23.096994,
longitude: 113.324520,
iconPath: '/static/images/location.png',
customCallout: {
anchorY: 10,
anchorX: 0,
display: 'ALWAYS'
}
}, {
id: 4,
name: 'marker4',
latitude: 23.095994,
longitude: 113.325520,
iconPath: '/static/images/location.png',
customCallout: {
anchorY: 0,
anchorX: 20,
display: 'ALWAYS'
}
}]
},
methods: {
markertap () {},
callouttap () {},
bindlabeltap () {},
getCenterLocation: function () {
this.mapCtx.getCenterLocation({
success: function (res) {
console.log(res.longitude)
console.log(res.latitude)
}
})
},
moveToLocation: function () {
this.mapCtx.moveToLocation()
},
translateMarker: function () {
this.mapCtx.translateMarker({
markerId: 1,
autoRotate: true,
duration: 1000,
destination: {
latitude: 23.10229,
longitude: 113.3345211
},
animationEnd () {
console.log('animation end')
}
})
},
includePoints: function () {
this.mapCtx.includePoints({
padding: [10],
points: [{
latitude: 23.10229,
longitude: 113.3345211
}, {
latitude: 23.00229,
longitude: 113.3345211
}]
})
}
}
}
</script>
<style scoped>
.page-body {
width:100%;
}
#map {
width: 100%;
height: 600px;
border:1px solid #ccc;
}
.customCallout {
box-sizing: border-box;
background-color: #fff;
border: 1px solid #ccc;
border-radius: 30px;
width: 150px;
height: 40px;
display: inline-flex;
padding: 5px 20px;
justify-content: center;
align-items: center;
}
.page-body {
width:100%;
}
</style>
這個是微信官方原聲的檔案說明：
https://developers.weixin.qq.com/miniprogram/dev/component/map.html
uj5u.com熱心網友回復：
編譯出來的結果就是沒有maker-id
uj5u.com熱心網友回復：
自己頂起來
uj5u.com熱心網友回復：
解決了嗎？老哥。我taro也遇到了轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/183532.html
標籤：JavaScript
上一篇：求asp+ajax 讀取到符合條件的資料時就自動跳轉到另外一個頁面，如果沒有符合條件的資料就定時一直詢問
下一篇：json檔案加載速度的問題