uni-app如何使用高德地图获取经纬度

高德官方文档：准备-入门-教程-地图 JS API v2.0|高德地图API (amap.com)

首先按照链接步骤获取key

两种使用方式、注意：选其一、不可两者同时使用

第一种：loadScript.js 层级如下

//loadScript.js
//动态加载外部js
//@param RESOURCE_LIST 外部地址集合["address"]
export function loadVoLteResourceList (RESOURCE_LIST,success) {return new Promise(r=>{RESOURCE_LIST.reduce((res, el) => res.then(() => loadScript(el)), Promise.resolve()).then(() => {r()}).catch((error) => {console.error('外呼VoLTE sdk 前置 js 资源加载失败:', error.name, error.message)return Promise.reject(error)})})
}export function loadScript (url) {return new Promise((resolve, reject) => {const script = document.createElement('script')script.onload = () => resolve()script.onerror = () => reject(new Error(`Load script from ${url} failed`))script.src = urlconst head =document.head || document.getElementsByTagName('head')[0];(document.body || head).appendChild(script)})
}

使用方法：

import {loadVoLteResourceList
} from "@/config/jsAll/loadScript.js"getGDURL() {loadVoLteResourceList(["https://webapi.amap.com/loader.js"]).then(res => {AMapLoader.load({"key": "", // 申请好的Web端开发者Key，首次调用 load 时必"version": "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15"plugins": ["AMap.Geolocation"], // 需要使用的的插件列表，如比例尺'AMap.Scale'等"Loca": { // 是否加载 Loca， 缺省不加载"version": '2.0' // Loca 版本},}).then((AMap) => {AMap.plugin('AMap.Geolocation', function() {var geolocation = new AMap.Geolocation({// 是否使用高精度定位，默认：trueenableHighAccuracy: true,// 设置定位超时时间，默认：无穷大timeout: 100000,// 定位按钮的停靠位置的偏移量offset: [10, 20],//  定位成功后调整地图视野范围使定位位置及精度范围视野内可见，默认：falsezoomToAccuracy: true,//  定位按钮的排放位置,  RB表示右下position: 'RB'})geolocation.getCurrentPosition(function(status, result) {if (status == 'complete') {onComplete(result)} else {onError(result)}});function onComplete(data) {// data是具体的定位信息console.log("data.position.lat", data.position.lat)console.log("data.position.lng", data.position.lng)console.log("data.position.lat.data", data.position.lat.data)uni.setStorageSync('longitude', data.position.lng)uni.setStorageSync('latitude', data.position.lat)console.log('uni.getStorageSync',
uni.getStorageSync('longitude'))}function onError(data) {// 定位出错console.log("onError", data)}})}).catch((e) => {console.error(e); //加载错误提示});}).catch(res => {})},

第二种：

npm引入：

npm i @amap/amap-jsapi-loader --save

使用方法：

//引入
import AMapLoader from '@amap/amap-jsapi-loader';// 高德获取urlgetGDURL() {AMapLoader.load({"key": "7a3b45f0f45f7bf254381719946ce663", // 申请好的Web端开发者Key，首次调用 load 时必填"version": "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15"plugins": ["AMap.Geolocation"] //插件列表}).then((AMap) => {AMap.plugin('AMap.Geolocation', function() {var geolocation = new AMap.Geolocation({// 是否使用高精度定位，默认：trueenableHighAccuracy: true,// 设置定位超时时间，默认：无穷大timeout: 100000,// 定位按钮的停靠位置的偏移量offset: [10, 20],//  定位成功后调整地图视野范围使定位位置及精度范围视野内可见，默认：falsezoomToAccuracy: true,//  定位按钮的排放位置,  RB表示右下position: 'RB'})geolocation.getCurrentPosition(function(status, result) {if (status == 'complete') {onComplete(result)} else {onError(result)}});function onComplete(data) {// data是具体的定位信息console.log("data.position.lat", data.position.lat)console.log("data.position.lng", data.position.lng)console.log("data.position.lat.data", data.position.lat.data)uni.setStorageSync('longitude', data.position.lng)uni.setStorageSync('latitude', data.position.lat)console.log('uni.getStorageSync', uni.getStorageSync('longitude'))}function onError(data) {// 定位出错console.log("onError", data)}})}).catch(e => {console.log(e);})},

注意：

1.用户gps要是打开的、设置->隐私->定位服务（禁止状态下是无法获取经纬度的）

2.要是https环境，http也是获取不到经纬度的

uni-app如何使用高德地图获取经纬度相关推荐

Ptyhon 入门：通过高德地图获取经纬度
#1.引入包 import json import requests#2.通过高德接口获取经纬度 addr='地址' def gd_map(a):para = {'key': '高德key', # 高 ...
Java 根据高德地图获取经纬度坐标
1: 申请高德服务key /*** @param addressName* @param cityName* @Description 根据高德地图, 通过地址获取经纬度坐标* @Throws* @R ...
Java实现根据地址调用高德地图获取经纬度等信息
最近在做一个车辆调度的应用系统,需要根据车辆和站点的位置做相应的规划,因此要调用第三方的地图接口来获取经纬度等信息.这里,我选择的是高德平台,下面是一个从注册到简单使用的例子,可供大家学习参考,更深入 ...
vue 获取用户位置高德_vue引入高德地图获取经纬度地址
1.在index.html引入高德地图 //key找个适合例如:160cab8ad6c50752175d76e61ef92c50 2.在webpack.base.conf.js 配置引入 extern ...
vue使用高德地图获取经纬度信息
1.安装Loader npm i @amap/amap-jsapi-loader --save 2.在地图组件 MapContainer.vue 中引入 amap-jsapi-loader <s ...
java api从高德地图获取某个位置的经纬度
1.代码展示 import com.fasterxml.jackson.databind.JsonNode; import com.ning.http.client.AsyncHttpClient; ...
高德地图获取当前屏幕中心点的经纬度
公司有个需求就是要随着屏幕的改变而加载附近的商户信息. 那么高德地图获取当前屏幕中心点的经纬度呢? 核心方法:aMap.setOnCameraChangeListener(this); 实现接口: @ ...
高德地图搜索，点击地图获取经纬度
1.H5页面一个搜索框.一个经纬度接收框 <input class="layui-input" placeholder="地名" name=" ...
微信小程序整合高德地图获取定位经纬度信息
1.登录高德地图https://lbs.amap.com/ a.创建新应用这个key后边整合的时候会用到,精彩继续 b.下载SDK https://lbs.amap.com/api/wx/down ...

uni-app如何使用高德地图获取经纬度

uni-app如何使用高德地图获取经纬度相关推荐

最新文章

热门文章