Vue中如何使用高德地图

效果图：

 这是高德地图API文档地址：地图的创建-生命周期-示例中心-JS API 示例 | 高德地图API

1.安装

vue-amap安装

1	npm i --save [email protected]

2.main.js中的配置

key申请地址教程：准备-入门-教程-地图 JS API | 高德地图API

// 高德离线地图
import VueAMap from 'vue-amap';
Vue.use(VueAMap);
 
VueAMap.initAMapApiLoader({
  // 高德key
  key: 'd6eabbd08f89ccfb74278b36ab6342567', // 自己到官网申请，我随便写的
  // 插件集合 （插件按需引入）
  plugin: ['AMap.Autocomplete', 'AMap.PlaceSearch', 'AMap.Scale', 'AMap.OverView', 'AMap.ToolBar', 'AMap.MapType', 'AMap.PolyEditor', 'AMap.CircleEditor', 'AMap.MarkerClusterer'],
  v: '1.4.15', // 我也不知道为什么要写这个，不写项目会报错，而且我随便写的，跟我下载的版本对应不了
  uiVersion: '1.0.11' // ui版本号，也是需要写，不配置不加载,

})

3.页面中使用

// 地图配置项
    initmapFn() {
      var _this = this;
      // 创建地图，同时给地图设置中心点、级别、显示模式、自定义样式等属性
      _this.map1 = new AMap.Map("mapChart", {
        resizeEnable: true, //是否监控地图容器尺寸变化
        zoom: 3, // 缩放级别
        center: [113.3245904, 23.1066805], //中心点坐标
      });
      //插件依旧写在回调函数内,通过AMap.plugin方法按需引入插件，第一个参数是插件名,第二个是在plugin回调之后使用插件功能。
      AMap.plugin(["AMap.ToolBar", "AMap.Scale", "AMap.OverView"], function () {
        _this.map1.addControl(new AMap.ToolBar());
        _this.map1.addControl(new AMap.Scale());
        _this.map1.addControl(new AMap.OverView({ isOpen: true }));
      });
      _this.map1.clearMap();// 清除所有的覆盖物信息
      // 创建 infoWindow 实例
      // _this.map1.setFitView();
    },
    // 地图标注
    onMarkerMap(data) {
      if (data[0]) {
        data.forEach((element, index) => {
          if (element.lng) {
            let marker = new AMap.Marker({
              //在回调函数里面创建Marker实例,添加经纬度和标题
              position: new AMap.LngLat(element.lng, element.lat), //添加经纬度
              offset: new AMap.Pixel(-13, -30), // 偏移量
              // title: "广州塔", // 鼠标移上去时显示的内容
              // 可以自定义标记点显示的内容,允许插入html字符串
              // content: "
广州塔Content
",
            });
            this.map1.add(marker); // 将创建的点标记添加到已有的地图实例：
            //marker.setMap(this.map1);
            //名称
            marker.setLabel({// 设置label标签
              offset: new AMap.Pixel(-50, -30), //设置文本标注偏移量
              content: `
${element.enterpriseName}
`, //设置文本标注内容
              direction: "right", //设置文本标注方位
            });
          }
        });
      }
}