vue 高德地图的使用

1、在index.html中引入

注意修改key值 注册key

    <script type="text/javascript" src="https://webapi.amap.com/maps?v=2.0&key=key"></script> 

2、在要使用的vue 文件中

html 代码

<template>
  <div id="container"></div>
</template>

css 代码

<style scoped lang='scss'>
#container {
  width: 800px;
  height: 500px;
}

 // 隐藏版权
.amap-logo {
  display: none;
}
.amap-copyright {
  opacity: 0;
}
</style>

可以直接在mounted中引入

生成最简单的地图

    var map = new AMap.Map("container", {
      center: [111.517973, 36.08415],
      zoom: 8,   // 缩放级别
    });

生成卫星图

    var map = new AMap.Map("container", {
      center: [111.517973, 36.08415],  // 定位的中心   经纬度
      zoom: 8,  // 
      //卫星图
      layers: [
        new AMap.TileLayer.Satellite(),
        //路网
        new AMap.TileLayer.RoadNet(),
      ],
    });

添加边界线

    var map = new AMap.Map("container", {
      center: [111.517973, 36.08415],
      zoom: 8,
      //卫星图
      layers: [
        new AMap.TileLayer.Satellite(),
        //路网
        new AMap.TileLayer.RoadNet(),
      ],
    });
    
    AMap.plugin("AMap.ToolBar", function () {
      //异步加载插件
      var toolbar = new AMap.ToolBar();
      map.addControl(toolbar);
    });
    AMap.plugin("AMap.DistrictSearch", function () {
      // 创建行政区查询对象
      var district = new AMap.DistrictSearch({
        // 返回行政区边界坐标等具体信息
        extensions: "all",
        // 设置查询行政区级别为 区
        level: "city",
      });

      district.search("临汾市", function (status, result) {
        // 获取临汾市的边界信息
        var bounds = result.districtList[0].boundaries;
        var polygons = [];
        if (bounds) {
          for (var i = 0, l = bounds.length; i < l; i++) {
            //生成行政区划polygon
            var polygon = new AMap.Polygon({
              map: map,
              strokeWeight: 1,
              path: bounds[i],
              fillOpacity: 0.7,
              fillColor: "#CCF3FF",
              strokeColor: "#CC66CC",
            });
            polygons.push(polygon);
          }
          // 地图自适应
          map.setFitView();
        }
      });
    })