2.web端开发
- web vue项目引入这个
"@amap/amap-jsapi-loader": "^1.0.1"插件， - 在你页面js中先挂载window上这个安全密钥
window._AMapSecurityConfig = { securityJsCode: '生成的安全密钥', } - 初始化地图：
async initMap() {
try {
this.AMap = await this.AMapLoader.load({
key: “你生成到的key”,
version:“2.0”,
plugins:[],
// resizeEnable: true
dragEnable: true,
})
this.mapInstance = await new this.AMap.Map(“mapContainer”,{ //设置地图容器id
viewMode:“3D”, //是否为3D地图模式
zoom: 15, // 缩放级别
pitch: 0, // 俯视角度
center: new this.AMap.LngLat(this.myLocation.longitude,this.myLocation.latitude), //初始化地图中心点位置
});
// 画用自定义点
this.selfMarker = await new this.AMap.Marker({
map: this.mapInstance,
position: [this.preLocation.longitude, this.preLocation.latitude],
content: this.$refs.selfMarkerRef, // 自定义地图锚点dom
anchor: new this.AMap.Pixel(0,0),
offset: new this.AMap.Pixel(-20,-20),
size: new this.AMap.Size(20, 20)
});
// 自己走过的线（先定义）
this.passedPolylineInstance = new this.AMap.Polyline({
map: this.mapInstance,
strokeColor: “#b6bcb2”, //线颜色
strokeWeight: 6, //线宽
});
Promise.all([this.AMap,this.mapInstance,this.selfMarker,this.passedPolylineInstance]).then(res=>{
this.getPositionByAmap()
// 路线规划
this.routePlan()
})
} catch (err) {
}
},
- 高德获取定位信息
// 获取定位
getPositionByAmap() {
if(this.AMap) {
this.AMap.plugin(‘AMap.Geolocation’, () => {
let geolocation = new this.AMap.Geolocation({
// enableHighAccuracy: true,//是否使用高精度定位，默认:true
noIpLocate: 3, // 禁止ip定位
maximumAge: 300, //定位结果缓存0毫秒，默认：0
convert: true, //自动偏移坐标，偏移后的坐标为高德坐标，默认：true
