vue引入高德地图实现简单的定位

1.在高德地图的开放平台去注册key 网址:https://lbs.amap.com/
开发|高德地图API
创建后,点击添加,创建自己的key
在这里选择Web端(JS API)

开始引入地图
在全局public下的index.HTML中引入

<script src="https://webapi.amap.com/maps?v=1.4.13&key=申请到的key"></script>

在要引入地图的组件中写以下代码:

mounted() {
    this.carGPSIP(0,0)//初始化加载地图,在函数的参数中给上你想定位的地方的经纬度
  },
  methods: {
    carGPSIP('经度x', '纬度y') {
      let map = new AMap.Map('container', {
        center: [x, y],
        zoom: 15
      });
      // 同时引入工具条插件，比例尺插件和鹰眼插件
      AMap.plugin([
        'AMap.ToolBar',
        'AMap.Geolocation',
      ], function(){
        // 在图面添加工具条控件，工具条控件集成了缩放、平移、定位等功能按钮在内的组合控件
        map.addControl(new AMap.ToolBar());
        // 在图面添加定位控件，用来获取和展示用户主机所在的经纬度位置
        map.addControl(new AMap.Geolocation());
      });
      let marker = new AMap.Marker({
        position: new AMap.LngLat(x, y),
        offset: new AMap.Pixel(-10, -10),
        icon: '', // 添加 Icon 图标 URL,默认为高德的水滴图标
        title: ''//鼠标放在定位的图标上后现实的标题
      });
      map.add(marker);
    }
  }

<template>
  <div>
    <div id="container" style="width: 100%;height: 500px"></div>
  </div>
</template>

地图的使用一定要给宽和高!!!
具体更多的功能还得去高德开放平台|高德地图中按需引用