在项目内下载高德地图的插件
申请高德的key
npm i @amap/amap-jsapi-loader --save
页面文档demo
<template> <div class="home-container"> <div class="flex-center"> <div id="container" style="height:500px;width:500px"></div> </div> </div> </template> <script> import AMapLoader from "@amap/amap-jsapi-loader"; export default { name: "about", components: {}, data() { return { map: null }; }, mounted() { this.initMap(); }, methods: { initMap() { AMapLoader.load({ "key": "", // 申请好的Web端开发者Key,首次调用 load 时必填 "version": "2.0", // 指定要加载的 JSAPI 的版本,缺省时默认为 1.4.15 "plugins": [], // 需要使用的的插件列表,如比例尺'AMap.Scale'等 "AMapUI": { // 是否加载 AMapUI,缺省不加载 "version": '1.1', // AMapUI 缺省 1.1 "plugins":[], // 需要加载的 AMapUI ui插件 } }) .then(AMap => { this.map = new AMap.Map("container", { //设置地图显示的缩放级别 zoom: 15, // 禁止鼠标拖拽 dragEnable: false, // 鼠标滚轮放大缩小 scrollWheel: false, // 双击放大缩小 doubleClickZoom: false, // 键盘控制发达缩小移动旋转 keyboardEnable: false, // 手势控制 touchZoom: false, center: [117.151202,36.664857],//设置地图中心点坐标 }); }) .catch(e => { console.log(e); }); } } }; </script>
其他的日后用到在更新