uni

2023-04-01 03:32| 来源: 网络整理| 查看: 265

高德官方文档：准备-入门-教程-地图 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 = url const 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({ // 是否使用高精度定位，默认：true enableHighAccuracy: true, // 设置定位超时时间，默认：无穷大 timeout: 100000, // 定位按钮的停靠位置的偏移量 offset: [10, 20], // 定位成功后调整地图视野范围使定位位置及精度范围视野内可见，默认：false zoomToAccuracy: 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'; // 高德获取url getGDURL() { 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({ // 是否使用高精度定位，默认：true enableHighAccuracy: true, // 设置定位超时时间，默认：无穷大 timeout: 100000, // 定位按钮的停靠位置的偏移量 offset: [10, 20], // 定位成功后调整地图视野范围使定位位置及精度范围视野内可见，默认：false zoomToAccuracy: 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也是获取不到经纬度的

【本文地址】

公司简介

联系我们