高德地图 amap-js 获取定位 import 方式

在网上找了很多高德获取定位的方法大多是在html 引入 <script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=您申请的key值"></script> ---------cdn的方式，

但是现在的项目大都是npm 引包开发使用cdn 有些不规范，有些还会报红。所以结合以下几个文档，实现 npm import 方式

封装函数避免踩坑

https://www.npmjs.com/package/amap-js

https://iderekli.github.io/amap-js/

https://lbs.amap.com/api/javascript-api/reference/location

在高德开发者平台准备好 key

# 通过 npm 安装

npm i amap-js -S

# 通过 yarn 安装

yarn add amap-js

import AMapJS from 'amap-js';

测试是否引入成功

// 创建AMapJSAPI Loader

const loader = new AMapJS.AMapLoader({

key: '您申请的高德Key值',

version: '1.4.15',

plugins: [],

});

// 调用 load 方法完成加载并调用执行回调。

loader.load()

.then(({ AMap }) => {

// 请求成功

console.log(AMap);

})

.catch(e => {

// 请求失败

});

项目是 vue+ts项目所以引入加了 // @ts-ignore

// @ts-ignore
import  AMapJS from "amap-js"

在mounted() 里面初始化

this.gaodeMap = new AMapJS.AMapLoader({
    key: '申请的key',
    version: '1.4.15',
    plugins: ['AMap.Geolocation'],//需要加载的插件
});

定义 this.gaodeMap 接收好在其他函数调用

调用

this.gaodeMap.load().then(({ AMap })=>{

    console.log(1266666,AMap)
    new AMap.Geolocation({
        enableHighAccuracy: false,//是否使用高精度定位，默认:true
        timeout: 10000,          //超过10秒后停止定位，默认：无穷大
    }).getCurrentPosition((status,result)=>{
        console.log(1366666,status)
        console.log(1377777,result)
    })

});

根据 status,result 写判断逻辑，主要就是想拿到位置然后将位置运用在 mapbox上面，实现国内定位

高德地图 amap-js 获取定位 import 方式

构造函数	说明
`AMap.Geolocation(opts:GeolocationOptions` `)`	构造函数，创建浏览器定位实例

GeolocationOptions	类型	说明
`enableHighAccuracy`	`Boolean`	是否使用高精度默认值：true
`timeout`	`Number`	超时毫秒数，若在指定时间内未定位成功，返回超时错误信息“TIMEOUT” 默认值：无穷大
`noIpLocate`	`Number`	是否禁止使用IP定位，默认值为0，可选值0-3 0: 可以使用IP定位 1: 手机设备禁止使用IP定位 2: PC上禁止使用IP定位 3: 所有终端禁止使用IP定位
`noGeoLocation`	`Number`	是否禁止使用浏览器Geolocation定位，默认值为0，可选值0-3 0: 可以使用浏览器定位 1: 手机设备禁止使用浏览器定位 2: PC上禁止使用浏览器定位 3: 所有终端禁止使用浏览器定位
`GeoLocationFirst`	`Boolean`	默认为false，设置为true的时候可以调整PC端为优先使用浏览器定位，失败后使用IP定位
`maximumAge`	`Number`	缓存毫秒数。定位成功后，定位结果的保留时间默认值：0
`convert`	`Boolean`	是否使用坐标偏移，取值true:为高德地图坐标，取值false:为浏览器定位坐标默认值：true
`showButton`	`Boolean`	是否显示定位按钮默认值：true
`buttonDom`	`String\|DomElement`	自定义定位按钮的内容。可支持HTML代码或Dom元素对象，不设置该属性则使用默认按钮样式
`buttonPosition`	`String`	定位按钮可停靠的位置 “LT”：左上角 “LB”：左下角 “RT”：右上角 “RB”：右下角默认值：“LB”
`buttonOffset`	`Pixel`	按钮距离停靠位置的偏移量默认值：Pixel(10,20)
`showMarker`	`Boolean`	定位成功时是否在定位位置显示一个Marker 默认值：true
`markerOptions`	`MarkerOptions`	定位点Marker的配置，不设置该属性则使用默认Marker样式
`showCircle`	`Boolean`	定位成功并且有精度信息时，是否用一个圆圈circle表示精度范围默认值：true
`circleOptions`	`CircleOptions`	定位点Circle的配置，不设置该属性则使用默认Circle样式
`panToLocation`	`Boolean`	定位成功后，是否把定位得到的坐标设置为地图中心点坐标默认值：true
`zoomToAccuracy`	`Boolean`	定位成功且显示精度范围时，是否把地图视野调整到正好显示精度范围默认值：false
`useNative`	`Boolean`	是否使用安卓定位sdk用来进行定位，默认：false 适用于同时在APP中使用安卓定位sdk并在APP WebView中使用了JSAPI的开发者。开启后，将优先尝试使用sdk进行定位，失败后依次尝试浏览器定位和IP定位。注：如果要使用辅助定位的功能，除了需要将useNative属性设置为true以外，还需要调用高德定位sdk中，AMapLocationClient类的startAssistantLocation方法，开启辅助H5定位功能；如果不用，就调用stopAssistantLocation()方法停止辅助H5定位功能。具体用法可参考定位SDK的参考手册
`extensions`	`String`	JSAPI在定位成功的时候会将得到的经纬度进行逆地理编码后获取地址信息，以方便开发者的进一步使用; extensions用来设定是否需要周边POI、道路交叉口等信息，可选值'base'、'all'。默认为'base',只返回地址信息；设定为'all'的时候将返回周边POI、道路交叉口等信息。