Vue(3). 如何将高德地图引入的vue中
1.首先需要进入高德地图平台 注册账号获取KEY
2.在vue终端里输入
npm i @amap/amap-jsapi-loader --save
# 或
cnpm i @amap/amap-jsapi-loader --save
3.另一种方式是传统的<script>,但不建议,需要的可以看官方了。
4. 在需要的组件中创建一个容器,确定高宽:
<divid="container"style="height: 800px;width: 800px;"></div>
导入
importAMapLoaderfrom'@amap/amap-jsapi-loader';
并在setup()/mounted()中加载:
import AMapLoader from '@amap/amap-jsapi-loader';
import axios from 'axios';
import qs from 'qs';
// import router from '@/router';
import {
useRouter,
useRoute
} from "vue-router";
import { ref } from 'vue'
// import { times } from 'lodash';
const router = useRouter();
const route = useRoute();
const active = ref([0]);
const tabDatas = ref([])
const regions = ref([])
const regionss = ref([])
const lng_lst = ref([])
const minimg = ref('')
axios({
method: "post", //请求方式
url: "域名", //url
data: qs.stringify({
// 参数
scienceid: route.query.id,
}),
}).then((res) => {
console.log(res.data); //成功回调
tabDatas.value = res.data.data
minimg.value = res.data.data;
console.log(minimg.value);
})
const Togget = (id) => {
console.log(minimg.value[id].minimg);
console.log(id);
axios({
method: "post", //请求方式
url: "域名", //url
data: qs.stringify({
// 参数
scienceid: route.query.id,
tabid: tabDatas.value[id].id,
}),
}).then((res) => {
console.log(res.data); //成功回调
lng_lst.value = res.data.data
console.log(lng_lst.value[0].lng);
AMapLoader.load({
"key": "cb43e9e4ae1d541c13c5565173e5563d", // 申请好的Web端开发者Key,首次调用 load 时必填
"version": "1.4.15", // 指定要加载的 JSAPI 的版本,缺省时默认为 1.4.15
"plugins": [], // 需要使用的的插件列表,如比例尺'AMap.Scale'等
"AMapUI": { // 是否加载 AMapUI,缺省不加载
"version": '1.1', // AMapUI 缺省 1.1
"plugins": [], // 需要加载的 AMapUI ui插件
},
"Loca": { // 是否加载 Loca, 缺省不加载
"version": '1.3.2' // Loca 版本,缺省 1.3.2
},
}).then((AMap) => {
var map = new AMap.Map('container', {
resizeEnable: true,
// center: [res.data.data[i].lng, res.data.data[i].lat],
center: [lng_lst.value[0].lng, lng_lst.value[0].lat], //中心点坐标
zoom: 12
});
let lngg = []
for (let i = 0; i < res.data.data.length; i++) {
var marker = new AMap.Marker({
position: new AMap.LngLat(Number(lng_lst.value[i].lng), Number(lng_lst.value[i].lat)), // 经纬度对象,也可以是经纬度构成的一维数组[116.39, 39.9]
// center: [lng_lst.value[i].lng, lng_lst.value[i].lat], //中心点坐标
icon: minimg.value[id].minimg,
anchor: 'bottom-center',
offset: new AMap.Pixel(0, 0),
imageSize: new AMap.Size(1, 1) // 根据所设置的大小拉伸或压缩图片
});
// marker.setMap(map);
// 设置鼠标划过点标记显示的文字提示
// marker.setTitle('我是marker的title');
// 设置label标签
// label默认蓝框白底左上角显示,样式className为:amap-marker-label
marker.setLabel({
direction: 'right',
offset: new AMap.Pixel(-55, -40), //设置文本标注偏移量
content: `<div class='info'>
<div>
<p style="width:100%;display: flex;justify-content: center;"><b>`+ res.data.data[i].name + `</b></p>
</div>
</div>`, //设置文本标注内容
// <p style="width:100%;display: flex;justify-content: center;"><b>`+ res.data.tab[i].create_time + `</b></p>
});
lngg.push(marker);
}
map.add(lngg)
}).catch(e => {
console.log(e);
})
})
}
const upPage = () => {
router.push({
name: 'HomeView'
})
}
把key值更改为自己在创建地图时的key值
详细教程查看官方文档(都是官方的那一套)