app端地图使用=>高德地图(官方文档推荐使用nvue不使用vue)
h5端小程序使用=>腾讯地图
支付宝使用=>高德地图
在manifest.json配置
h5端配置
一定要注意不同端使用不同的地图否则没法渲染
解释一下为啥非要nvue,app端如果使用vue
<template>
//app的是高德
<map @tap='mapClick'></map>
</template>
<script>
export default{
methods:{
mapClick(e){
在打印e.target.detail时候不会返回经纬度
}
}
}
</script>
在说一个问题,在nvue中不能使用id
<map id='map'></map>
这是会报错
nvue推荐直接写宽高
在说一个bug,当点击地图时候,maker不移动问题
<template>
//app的是高德
<map @tap='mapClick' :markers="covers"></map>
</template>
<script>
export default{
data(){
return {
covers: [{
latitude: 39.909,
longitude: 116.39742,
iconPath: '../../../static/location.png'
}]
}
},
methods:{
mapClick(e){
如果这时候,不会更改位置
if(e.target.latitude && e.target.longitude){
this.covers[0].latitude = e.target.latitude
this.covers[0].longitude = e.target.longitude
}
所以这里你需要
this.covers = [
{
latitude: e.target.latitude ,
longitude: e.target.longitude ,
iconPath: '../../../static/location.png'
}
]
}
}
}
</script>
在介绍一个事情,经纬度,转换为详细地址
反向地理编码=>将经纬度转换为详细地址
mapSearch 模块(仅app-nvue支持,Goolge地图不支持) 所以你还是需要高德地图
<template>
<view class="content">
<map class="map" ref="dcmap" :markers="markers" @tap="selectPoint"></map>
</view>
</template>
<script>
// #ifdef APP-PLUS 啥也不用下载奥--- 直接这里用就完事
const mapSearch = weex.requireModule('mapSearch')
// #endif
methods:{
mapSearch.reverseGeocode({
point: {
latitude: point.latitude,
longitude: point.longitude
}
}, res => {
这时候你就能拿到详细地址了
})
}
</script>