<template>
<view id="amap-id" :prop="state" :change:prop="amap.updateAMap" />
</template>
<script>
export default {
data() {
return {
latitude: 0,
longitude: 0,
};
},
computed: {
state() {
return {
longitude: this.longitude,
latitude: this.latitude,
};
},
},
created() {
uni.getLocation({
type: 'gcj02',
// 解析地址信息
geocode: true,
success: res => {
const {
longitude,
latitude
} = res;
// 经度
this.longitude = longitude;
// 纬度
this.latitude = latitude;
},
});
},
methods: {
getState(state) {
this.longitude = state.longitude;
this.latitude = state.latitude;
},
},
};
</script>
<script module="amap" lang="renderjs">
export default {
mounted() {
this[window?.AMap ? 'initAMap' : 'createAMap']();
},
methods: {
createAMap() {
const key = '***';
const token = '***';
window._AMapSecurityConfig = {
securityJsCode: token,
};
const script = document.createElement('script');
script.src = `https://webapi.amap.com/maps?v=2.0&key=${key}`;
script.onload = () => {
this.initAMap()
}
document.head.appendChild(script);
},
initAMap() {
const center = Object.values(this.state)
const map = new AMap.Map('amap-id', {
// 设置地图显示的缩放级别
zoom: 16,
// 初始化地图中心点
center: center,
});
const circle = new AMap.Circle({
center: center,
radius: 150,
strokeWeight: 0,
strokeOpacity: 0,
fillOpacity: 0.2,
fillColor: '#286FFF',
zIndex: 50,
})
map.add(circle);
map.setFitView([circle]);
// FIX: 无法展示
const marker = new AMap.Marker({
icon: "/static/image/tabbar/community-active.png",
position: center,
offset: new AMap.Pixel(-13, -30)
});
marker.setMap(map);
},
updateAMap(newValue, oldValue, vn) {
// vn.callMethod('getState', newValue)
}
},
};
</script>
<style lang="scss" scoped>
#amap-id {
width: 100%;
height: 100%;
}
::v-deep .amap-logo {
opacity: 0 !important;
display: none !important;
}
::v-deep .amap-copyright {
opacity: 0 !important;
display: none !important;
}
</style>
1***@qq.com
- 发布:2023-11-07 15:35
- 更新:2023-11-07 15:35
- 阅读:174