uniapp-地图-不同端的使用-高德maker问题-经纬度转换详细地址

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>
  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值