H5实现高德地图的uni.chooseLocation

在uniapp中获取当前定位和选择当前位置都是做了兼容，在各个平台都可以使用，这篇文章讲解如何定位当前位置，搜索位置，点击进行定位在H5中实现uni.chooseLocation,如下图所示

左侧微信小程序的选择位置，右侧为高德地图在H5中的选择位置

这里讲解一下uni.chooseLocation

可以看到这个api的兼容平台是很完美的，但是在注意事项中表示了

不同端，使用地图选择时基于的底层地图引擎不一样，如 微信小程序 是腾讯地图，H5 是腾讯地图或谷歌地图，App和阿里小程序 是高德地图，百度小程序 是百度地图

因此项目开发中需要使用的是高德地图，但是配置项中却只能配置腾讯或者谷歌的key,只能自己动手封装

该插件已发布插件市场，有问题请评论或私聊哦

H5端使用高德地图实现uni.chooseLocation - DCloud 插件市场

1.引入地图

动态加载script标签引入地图api

mounted() {
			this.showPlace = this.show;
			var script = document.getElementById('mapTest')
			let that = this;
			script ? this.loop() : (function (){
				var script = document.createElement("script");
				script.type = "text/javascript";
				script.setAttribute('id', 'mapTest')
				script.src = `https://webapi.amap.com/maps?v=2.0&key=${that.keyMap}`;
				document.body.appendChild(script);
				that.loop();
			})()
		},

 2.初始化地图，定位当前位置进行查询

methods: {
          loop() {
				try{
					this.initMapWeb();
				}catch(e){
					setTimeout(()=>this.loop(), 200)
				}
			},
initMapWeb() {
				let that = this;
				this.map = new AMap.Map("map", {
					center: [ '106.55', '29.57'],
					zoom: 16
				});
				
				this.map.on('click', (e) => {
					if(this.marker) {
						this.marker.setMap(null);
					}
					that.addMarker(e.lnglat.lng, e.lnglat.lat);
					that.getPlaces('', `${e.lnglat.lng}, ${e.lnglat.lat}`);
					that.getNowPlace(`${e.lnglat.lng}, ${e.lnglat.lat}`);
				})
				
				if(this.initLocation.length > 0) {
					let tempArr = this.initLocation.split(',');
					that.addMarker(tempArr[0], tempArr[1])
					that.getPlaces('', `${tempArr[0]}, ${tempArr[1]}`);
					that.getNowPlace(`${tempArr[0]}, ${tempArr[1]}`);
					return
				}
				
				AMap.plugin('AMap.Geolocation', function() {
				  var geolocation = new AMap.Geolocation({
				    // 是否使用高精度定位，默认：true
				    enableHighAccuracy: true,
				    // 设置定位超时时间，默认：无穷大
				    timeout: 10000,
				    // 定位按钮的停靠位置的偏移量，默认：Pixel(10, 20)
				    buttonOffset: new AMap.Pixel(10, 20),
				    //  定位成功后调整地图视野范围使定位位置及精度范围视野内可见，默认：false
				    zoomToAccuracy: true,     
				    //  定位按钮的排放位置,  RB表示右下
				    buttonPosition: 'RB'
				  })
				  
				  geolocation.getCurrentPosition(function(status,result){
					if(result.info == "SUCCESS" && result.position && result.position){
						that.addMarker(result.position.lng, result.position.lat)
						that.getPlaces('', `${result.position.lng}, ${result.position.lat}`)
						that.getNowPlace(`${result.position.lng}, ${result.position.lat}`);
					}
				  });
				
				})
			},
getNowPlace(location) {
				uni.request({
					url: `https://restapi.amap.com/v3/geocode/regeo?key=${this.AMapKeyWeb}&location=${location}`,
					method: 'GET',
					success: (res) => {
						let result = res.data;
						if(result.status == '1') {
							let tempObj = result.regeocode;
							this.checked = {
								adcode: tempObj.addressComponent.adcode,
								city: tempObj.addressComponent.city,
								district: tempObj.addressComponent.district,
								location,
								addressLocal: tempObj.formatted_address
							}
						}
						
					},
					fail: (err) => {
						uni.showToast({
							title: JSON.stringify(err),
							icon: 'none'
						})
					}
				})
			},
			
			addMarker(lng, lat) {
				var icon = new AMap.Icon({
					// 图标的取图地址
					image: '//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png',
					// 图标所用图片大小
					imageSize: new AMap.Size(32, 42),
				});
					
				this.marker = new AMap.Marker({
					icon,
				    position: [lng, lat],  
				});
				
				this.marker.setMap(this.map);
				this.map.setCenter([lng, lat])
			},
			
			getPlaces(keywords, location) {
				uni.request({
					url: `https://restapi.amap.com/v3/assistant/inputtips?key=${this.AMapKeyWeb}&keywords=${keywords}&location=${location}`,
					method: 'GET',
					success: (res) => {
						// console.log(res)
						let result = res.data;
						if(result.status === '1')  {
							this.list = result.tips.filter(item => item.location && item.location.length > 0);
							// console.log(this.list, result.tips)
						}
					},
					fail: (err) => {
						uni.showToast({
							title: JSON.stringify(err),
							icon: 'none'
						})
					}
				})
			}


}

uniapp的更多功能请移步 - uniapp实现常用功能_哆来A梦没有口袋的博客-CSDN博客_uniapp功能