<template>
<view>
<view class="map" id="map"></view>
</view>
</template>
<script>
import AMap from "../../static/js/map.js"
export default {
data() {
return {
title: 'hello',
provider: '',
map: null,
zoom: 5,
resAmap: null,
scrollH: 500,
scrollW: 500,
initLat: 38.913423, //初始维度
initLng: 116.368904, //初始经度
covers: [],
LlayAroundGroupOpen: true, //l网周边
}
},
methods: {
async initAMap() {
try {
this.resAmap = await AMap();
this.$nextTick(function() {
var map = new this.resAmap.Map('map', {
center: [this.initLng, this.initLat],
zoom: this.zoom
});
var styleName = "amap://styles/darkblue";
map.setMapStyle(styleName);
this.map = map;
console.log(this.map)
this.resAmap.plugin('AMap.Geolocation', () => {
var geolocation = new this.resAmap.Geolocation({
enableHighAccuracy: true, //是否使用高精度定位,默认:true
timeout: 10000, //超过10秒后停止定位,默认:5s
buttonPosition: 'RB', //定位按钮的停靠位置
// buttonOffset: new AMap.Pixel(10, 20),//定位按钮与设置的停靠位置的偏移量,默认:Pixel(10, 20)
zoomToAccuracy: true, //定位成功后是否自动调整地图视野到定位点
});
map.addControl(geolocation);
geolocation.getCurrentPosition(function(status, result) {
if (status == 'complete') {
onComplete(result)
} else {
onError(result)
}
});
});
//解析定位结果
var then = this;
function onComplete(data) {
console.log(data) // 获取到的定位信息
then.initLat = data.position.lat;
then.initLng = data.position.lng;
}
function onError(data) {
console.log(data) // 定位失败的信息
}
})
} catch (e) {
console.log(e)
}
}
},
onLoad() {
this.initAMap()
},
}
</script>
<style>
.map {
width: 100%;
height: 100vh;
}
</style>
map.js
export default function MapLoader() {
return new Promise((resolve, reject) => {
if (window.AMap) {
resolve(window.AMap);
} else {
var script = document.createElement('script');
script.type = "text/javascript";
script.async = true;
script.src =
"https://webapi.amap.com/maps?v=1.4.15&key=729f7743027aa4b48949bc6e5786acbe&callback=initAMap";
script.onerror = reject;
document.head.appendChild(script);
}
window.initAMap = () => {
resolve(window.AMap);
};
})
}