本文是记录自己在玩高德地图的过程中使用到的一些插件和小问题，以此来记录一下

2D地图配置

Key和密钥

高德地图在2021年12月02日升级，升级之后所申请的 key 必须配备安全密钥 jscode 一起使用

引入

//在index.html页面
//生成的密钥如果不引入的话，会在后续开发中影响其他功能，比如地图样式mapStyle等
<script type="text/javascript">
    window._AMapSecurityConfig = {
        securityJsCode:'申请key时生成的密钥',
    }
</script>
<script src="https://webapi.amap.com/maps?v=1.4.15&key=自己申请的key"></script>

页面

在地图页面准备一个div用作挂载地图的容器，给定一个id

<div id="map2d"></div>

//初始化地图
initMap(){
  this.map2D = new AMap.Map('map2d', {
    center: [121.51252, 31.09583],
    zoom: 10,
    // showLabel:false,//地图上是否显示名字标记
    // mapStyle:'自定义地图样式' //设置地图样式
  });
}

当打开自定义地图主题样式的时候是这样的（后面记录怎么自己配置地图主题）

地图插件配置

我使用的是同步引入插件的方式，地图插件需要在index.html页面引入地图资源时一块挂载引入，官方还提供了异步引入插件的方式传送门

插件列表这里有你想使用的各种插件

<script src="https://webapi.amap.com/maps?v=1.4.15&key=自己申请的key&plugin=ElasticMarker,AMap.ToolBar,AMap.Scale,AMap.OverView,AMap.MapType,AMap.Geolocation,AMap.Autocomplete,AMap.PlaceSearch"></script>

撒点

这里我体验了两种撒点方式，一种是灵活点标记ElasticMarker的方式，另一种就是普通遍历撒点

//撒点--灵活点标记 ElasticMarker
showPoints(pointList){
  let that = this
  this.map2D.remove(that.facilities)
  this.facilities = []
  let zoomStyleMapping1 = {
    14:0,
    15:0,
    16:0,
    17:0,
    18:0,
    19:0,
    20:0
  }
  pointList.forEach((item) => {
    let marker = new AMap.ElasticMarker({
      position: [item.lng, item.lat],
      // zooms: [3, 20],
      styles: [
        {
          icon: {
            // img: require('../../assets/image/img.png'),
            img: that.icon,
            size: [10, 18], //可见区域的大小
            ancher: [0, 0], //锚点
            fitZoom: 14, //最合适的级别
            scaleFactor: 1.6, //地图放大一级的缩放比例系数
            maxScale: 1.5, //最大放大比例
            minScale: 0.8, //最小放大比例
          },
        },
      ],
      zoomStyleMapping:zoomStyleMapping1
    });
    that.facilities.push(marker);
  });
  that.map2D.add(that.facilities);
},
//撒点--普通
showPoints2(pointList){
  let _this = this
  pointList.forEach((item) => {
    // 创建一个 Marker 实例：
    var marker = new AMap.Marker({
      position: [item.lng,item.lat],   // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
      icon: new AMap.Icon({
        image: _this.icon,
        // size: new AMap.Size(25, 25),  //图标大小
        imageSize: new AMap.Size(26,26)  //图片大小
      })
    });
    // 将创建的点标记添加到已有的地图实例：
    _this.map2D.add(marker);
    
    marker.address = item.address //这种方式可以给点加一个address字段
  })
},

给点标记添加点击事件

marker.on('click', function(ev) {
      // 触发事件的对象
      var target = ev.target;
      // 触发事件的地理坐标，AMap.LngLat 类型
      var lnglat = ev.lnglat;
      // 触发事件的像素坐标，AMap.Pixel 类型
      var pixel = ev.pixel;
      // 触发事件类型
      var type = ev.type;
      var position = lnglat;
      this.infoWindows(position,item) //在这里调用信息框函数
    });

给点标记添加信息框

//信息弹框
infoWindows(position,item){
  var content ='<div style="padding:0px 0px 0px 0px;">信息框'
      + '<div> 名称：'+item.name+'</div>'
      + '<div> 地址：'+item.address+'</div>';

  let infoWindow = new AMap.InfoWindow({
    content: content,  //使用默认信息窗体框样式，显示信息内容
  });
  infoWindow.open(this.map2D, position);
}

这里可以修改信息框的额样式，在页面要另外写一个style标签

<style>
.amap-info-content{ /*弹框窗体的颜色*/
  /*background: url("../../assets/image/logo.png") no-repeat;*/
  background: yellowgreen;
  width: 150px;
  /*height: 50px;*/
}
.amap-info-close{ /*弹框窗体关闭的颜色*/
  color: #fff;
}
.amap-marker-content div{
  overflow: inherit !important;
}
</style>

实时路况图层

//实时路况图层
var trafficLayer = new AMap.TileLayer.Traffic({
  zIndex: 10
});
this.map2D.add(trafficLayer);//添加图层到地图

还有一些控件

this.map2D.addControl(new AMap.ToolBar());// 在图面添加工具条控件，工具条控件集成了缩放、平移、定位等功能按钮在内的组合控件
this.map2D.addControl(new AMap.Scale());// 在图面添加比例尺控件，展示地图在当前层级和纬度下的比例尺
this.map2D.addControl(new AMap.OverView({isOpen:true}));// 在图面添加鹰眼控件，在地图右下角显示地图的缩略图
this.map2D.addControl(new AMap.MapType());// 在图面添加类别切换控件，实现默认图层与卫星图、实施交通图层之间切换的控制
this.map2D.addControl(new AMap.Geolocation());// 在图面添加定位控件，用来获取和展示用户主机所在的经纬度位置

输入提示(AMap.Autocomplete)和POI搜索插件(AMap.PlaceSearch)结合使用

官网

首先写一个搜索框，给一个id

<div class="search_input">
  <el-input id='tipinput' v-model="handleSerchVal" clearable placeholder="请输入内容"></el-input>
  <el-button type="primary">搜索</el-button>
</div>

js代码

//输入提示
var autoOptions = {
  input: "tipinput"  //这里相当于绑定到输入框的id
};
var auto = new AMap.Autocomplete(autoOptions);//输入提示，根据输入关键字提示匹配信息
var placeSearch = new AMap.PlaceSearch({
  map: this.map2D,
  autoFitView: true// 是否自动调整地图视野使绘制的 Marker点都处于视口的可见范围
});  //构造地点查询类
AMap.event.addListener(auto, "select", select);//注册监听，当选中某条记录时会触发
AMap.event.addListener(auto, "error", onError); //注册监听，当选中某条记录时会触发
function select(e) {
  let that = this
  let lng = e.poi.location.lng
  let lat = e.poi.location.lat
  placeSearch.setCity(e.poi.adcode);
  placeSearch.search(e.poi.name,function (status, result) {
    // 查询成功时，result即对应匹配的POI信息
  });  //关键字查询查询
}
//解析定位错误信息
function onError(data) {
  console.log("定位失败")
  alert(data.info)
}

点击列表选项之后

地图主题设置

首先打开高德地图的控制台，找到自定义地图 点击创建地图样式，进去点击创建，然后就打开了自定义地图面板 将你自定义好的地图点击右上角红色发布按钮，然后在弹出框中点击蓝色发布按钮 发布完成后，会生成图中一串文本，复制文本添加到地图设置就可以了

mapStyle:'自定义地图生成的样式' //设置地图样式

3D地图配置