vuecli简单使用高德地图

在项目内下载高德地图的插件

申请高德的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>

　　其他的日后用到在更新