H5实现高德地图的uni.chooseLocation |
您所在的位置：网站首页 › 腾讯地图报错修改要怎么办 › H5实现高德地图的uni.chooseLocation |
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功能 |
【本文地址】
今日新闻 |
推荐新闻 |