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值
详细教程查看官方文档(都是官方的那一套)