mpvue开发小程序使用微信map组件marker-id无法绑定问题

#麻辣小龙虾# 2020-08-17 03:20:13
最近在使用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="/image/voice.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



...全文
9863 6 打赏 收藏 举报
写回复
6 条回复
切换为时间正序
请发表友善的回复…
发表回复
引用 5 楼 孔小弟Jasen 的回复:
我用另外一种格式实现了自己的需求
咋实现的?我也想知道。
  • 打赏
  • 举报
回复
引用 3 楼 孔小弟Jasen 的回复:
解决了吗?老哥。我taro也遇到了
没有兄弟,这哥真的坑爹~!
  • 打赏
  • 举报
回复
孔小弟Jasen 2020-10-21
我用另外一种格式实现了自己的需求
  • 打赏
  • 举报
回复
孔小弟Jasen 2020-10-20
解决了吗?老哥。我taro也遇到了
  • 打赏
  • 举报
回复
自己顶起来
  • 打赏
  • 举报
回复
编译出来的结果就是没有maker-id
引用 楼主 #麻辣小龙虾# 的回复:
最近在使用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="/image/voice.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
  • 打赏
  • 举报
回复
发帖
JavaScript

8.6w+

社区成员

Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
帖子事件
创建了帖子
2020-08-17 03:20
社区公告
暂无公告