uni-app 使用高德地图部分内容

1.申请key
高德开放平台 | 高德地图API注册申请，在管理应用里添加应用，然后根据需求申请高德地图的Key

2、新建一个动态加载高德地图的js。

export default function loadMap (key, plugins, v = '1.4.14') {return new Promise(function (resolve, reject) {if (typeof AMap !== 'undefined') {// eslint-disable-next-line no-undefresolve(AMap)return true}window.onCallback = function () {// eslint-disable-next-line no-undefresolve(AMap)}let script = document.createElement('script')// script.type = 'text/javascript'script.src = `https://webapi.amap.com/maps?v=${v}&key=${key}&plugin=${plugins}&callback=onCallback`script.onerror = rejectdocument.head.appendChild(script)})
}

3、获取定位
import Gaode_loadMap from '../../common/js/gaode_loadMap'; //引入加载地图的js

Gaode_loadMap('webjs_key', ['AMap.Geolocation'], '1.4.14').then(AMap => {var map = AMap.plugin('AMap.Geolocation', function() {var geolocation = new AMap.Geolocation({// enableHighAccuracy: true,// 是否使用高精度定位，默认：true// 设置定位超时时间，默认：无穷大timeout: 6000});geolocation.getCurrentPosition();AMap.event.addListener(geolocation, 'complete', onComplete);AMap.event.addListener(geolocation, 'error', onError);function onComplete(data) {// console.log('gen geo data===' + JSON.stringify(data));state.gd_loction = data.positionconsole.log('state.gd_loction===' + state.gd_loction);let geo = state.gd_loction.toString().split(',')state.lnt = geo[0]state.lat = geo[1]uni.hideLoading();}function onError(data) {console.log(data);uni.showModal({title: '',content: '未获取到定位请前往选择',showCancel: false,cancelText: '取消',confirmText: '确定',success: res => {if (res.confirm) {uni.hideLoading()toChooseAdr()}},fail: () => {},complete: () => {}});// 定位出错}});}).catch(() => {console.log('地图加载失败！');});

4、根据关键字获得地址
参考文档搜索POI-API文档-开发指南-Web服务 API | 高德地图API

uni.request({url: 'https://restapi.amap.com/v3/assistant/inputtips?output=JSON&city=010&type=poi&keywords=关键字' + '&key=web服务Key',method: 'GET',data: {},success: res => {state.addressList = []let list = res.data.tips//有时候会返回空名称state.addressList = list.filter(item => item.address.length > 0) },fail: () => {},complete: () => {}});

5、小程序获取定位
相关下载-微信小程序插件 | 高德地图API 下载高德地图提供的插件
import amapFile from '@/utils/amap-wx.130.js' //引入

letmyAmapFun = new amapFile.AMapWX({key: 'key'})let that = thismyAmapFun.getRegeo({success: data => {//成功回调console.log(data)                     },fail: info => {//失败回调console.log(info)}})

uni-app 使用高德地图部分内容相关推荐

uniapp 开发安卓App实现高德地图路线规划导航
文章目录技术概述技术详述问题与解决我的总结参考文献技术概述描述这个技术是做什么的/什么情况下会使用到这个技术,学习该技术的原因,技术的难点在哪里.控制在50-100字内. uniapp的 ...
视频教程-Web前端开发仿美团/饿了吗移动App之高德地图接口对接案例-JavaScript
Web前端开发仿美团/饿了吗移动App之高德地图接口对接案例互联网编程行业10年开发和授课经验曾任太极集团,外资企业等一线互联网python高级开发工程师现任聚焦计算机技术有限公司项目组担任架构 ...
uniapp中app接入高德地图实现标点定位
ps:如果你只想用在一个平台上那么就看对应的准备工作即可.例:你只需h5接入地图,那么你只需看一. h5接入高德地图准备工作和最后的代码即可. 一. h5接入高德地图准备工作 1. 去高德地图平 ...
uniapp 打包app 引入高德地图sdk
uniapp 打包app 引入高德地图sdk 1. 注册高德地图开放平台账号并添加应用,在应用中添加key 2. 生成自有证书(windows系统) 3. 高德地图key生成并配置到项目中 4. 地 ...
uniapp 微信小程序选择地图位置并返回经纬度及详细地址（uni.chooseLocation和高德地图api两种方式实现）
uniapp 微信小程序实现选择地图位置功能最近在做商家小程序,就是用于给实体店老板进行网上开店的小程序. 其中有一项功能就是获取商店的位置,要求支持:获取当前定位/检索到指定位置/地图选点等功能, ...
java实现高德地图app,Android 高德地图入门demo，最新高德地图实现方法，附源码及apk...
[实例简介] Android 高德地图入门demo,最新高德地图实现方法,附源码及apk [实例截图] [核心代码] GaoDeDemo ├── GaoDeDemo │ ├── app │ │ ...
Android Webview打开第三方APP（高德地图淘宝 QQ等等）
现在很多APP不单靠Android原生开发来完成,今天我们就遇到一个情况,app嵌入H5界面也就是我们通常用的Webview来显示.当进行点击操作跳转到对应的APP.比如说点击网页的导航跳转到高德地图 ...
求助，微信浏览器如何跳转百度地图APP和高德地图APP
第一次发帖: 求大神帮个忙指点一二~~实在是找不到如何处理 window.location.href ="iosamap://" 基本上这样浏览器上就可以跳转了, 但是微信公众号 ...
【行业首发】蛙色VR全景作品支持对接高德地图！
蛙色VR全景支持对接至高德地图! 自百度地图.美团.携程.飞猪之后,头部流量平台后再添高德地图! 现免费对蛙色VR商业合作伙伴开放,联系运维专员提供对应数据,即可将蛙色VR全景作品对接至高德地图VR专 ...

uni-app 使用高德地图部分内容

uni-app 使用高德地图部分内容相关推荐

最新文章

热门文章