66 lines
1.2 KiB
Vue
66 lines
1.2 KiB
Vue
<template>
|
||
|
||
|
||
|
||
<!-- 自定义地图组件 -->
|
||
<map
|
||
class="map"
|
||
:latitude="latitude"
|
||
:longitude="longitude"
|
||
scale="18"
|
||
:markers="markers"
|
||
:show-location="true"
|
||
@markertap="markertap"
|
||
@updated="mapUpdated"
|
||
@tap="closeMapMarker"
|
||
></map>
|
||
</template>
|
||
<script>
|
||
import amap from "@/js_sdk/amap-wx.130.js";
|
||
export default {
|
||
data() {
|
||
return {};
|
||
},
|
||
mounted() {
|
||
this.initMap();
|
||
},
|
||
methods: {
|
||
markertap() {},
|
||
mapUpdated() {},
|
||
closeMapMarker() {},
|
||
|
||
// 初始化地图
|
||
initMap() {
|
||
this.amapPlugin = new amap.AMapWX({
|
||
key: "c03fe63e4ed7cfc6612304b3f46c19b5", //该key 是在高德中申请的微信小程序key
|
||
});
|
||
|
||
this.amapPlugin.getRegeo({
|
||
type: "gcj02", //map 组件使用的经纬度是国测局坐标， type 为 gcj02
|
||
|
||
success: function (res) {
|
||
const latitude = res[0].latitude;
|
||
|
||
const longitude = res[0].longitude;
|
||
|
||
that.longitude = longitude;
|
||
|
||
that.latitude = latitude;
|
||
|
||
that.mapInfo = res[0];
|
||
},
|
||
|
||
fail: (res) => {
|
||
console.log(JSON.stringify(res));
|
||
},
|
||
});
|
||
},
|
||
},
|
||
};
|
||
</script>
|
||
<style lang="scss" scoped>
|
||
.map {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
</style> |