一、mpvue完全可以加载小程序的组件进行开发,本文介绍如何加载地图组件
(1)小程序的官方文档网址
https://developers.weixin.qq.com/miniprogram/dev/component/
(2)查看地图组件的相关介绍
二、加载地图组件
(1)加载地图组件
<map id="map"
longitude="113.324520"
latitude="23.099994"
scale="14"
bindmarkertap="markertap"
show-location></map>
(2)保存代码便可看到地图
(3)动态改变地图显示中心(注意:mpvue的绑定方式是采用vue的方式,和小程序区别)
(3) 添加mark点
三、示例的代码
<template>
<div>
<map id="map"
:longitude="longitude"
:latitude="latitude"
scale="14"
bindmarkertap="markertap"
:markers="markers"
show-location></map>
</div>
</template>
<script>
import card from '@/components/card'
export default {
data () {
return {
longitude: 113.324520,
latitude: 23.099994,
markers: [
{
iconPath: '../../../static/images/user.png',
id: 0,
latitude: 23.099994,
longitude: 113.324520,
width: 50,
height: 50
}
]
}
},
components: {
card
},
methods: {
bindViewTap () {
const url = '../logs/main'
if (mpvuePlatform === 'wx') {
mpvue.switchTab({ url })
} else {
mpvue.navigateTo({ url })
}
},
clickHandle (ev) {
console.log('clickHandle:', ev)
// throw {message: 'custom test'}
}
},
created () {
// let app = getApp()
}
}
</script>
<style scoped>
#map {
width: 100%;
height: 200px;
}
</style>