前端高德地图Vue+Marker+自定义信息多窗体开发心得

前端Vue+高德地图Marker+自定义信息多窗体开发心得
首先呢 我们的项目是一个大屏项目 需要用到高德地图api中的Marker和自定义信息窗体用来展示在对应经纬度的内容和自定义maker图标 因为百度上的东西实在太杂了 所以才写下这篇博客 来供大家参考 你的意见就是我进步的必需品 好了 话不多说 进入正题把！！！！

首先我们需要使用高德开放平台进行开发 必须有一个自己的账号并且登录 如下👇👇👇

其次我们需要进入右上角的控制台到我的应用里去创建一个key(高德的东西都需要自己的key才能在自己项目运行哦) 没有的可以根据自己的需求创建对应的应用哈 👇👇👇

现在开始进入正题 👇👇👇
**1.**我们首先需要一个盒子去装这个地图把

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

**2.**因为这个地图是需要操作Dom 而我是用的Vue框架进行开发 所以我们在Dom生成完毕的生命周期进行操作 在这里有一个小插曲 就是我或者接口的数据赋值等一系列操作是在created () {}里面操作的 而在mounted () {}里面去使用这个数据的时候 却拿不到数据！这个原因呢 我暂时没找到 大概是什么同步异步的问题把 解决方法有两种 1.直接在mounted里面调用接口拿到数据进行操作 2.可以给created加上async 前缀 把他拉成同步就解决了

**3.**现在一切准备就绪我们就要开始征服这个地图 冲吧
3-1：首先我们需要New一个地图实例 每一个Api的注释我已经加上 上面是我获取数据赋值的一些操作 不用去管

var map = new AMap.Map("container", {
        viewMode: "3D", // 3D地图
        showBuildingBlock: true, // 设置地图显示3D楼块效果，移动端也可使用。推荐使用。
        resizeEnable: true, // 固定大小的窗口的大小
        zoom: 11, // 缩放层级
        center: [104.77372062592086, 31.478291159766904], // 地图初始展示的中心点
      });

3-2：因为我这个项目是需要根据不同的状态来展示不同的图标 所以我们先把我所有需要展示的图片实例出来 这里也是用的高德地图Api的Icon 有多少个就可以添加多少个哦

// 创建一个 Icon
      var alarmImg = new AMap.Icon({
        // 图标尺寸
        size: new AMap.Size(130, 139),
        // 图标的取图地址
        image: this.alarmImg,
        // 图标所用图片大小
        // imageSize: new AMap.Size(135, 40),
        // 图标取图偏移量
        // imageOffset: new AMap.Pixel(-9, -3),
      });

3-3：我的项目是需要展示在多个经纬度展示 所以需要使用循环 然后用经纬度去定位我marker(地图上的图标)所展示的位置 注释都加上了 可能前后的{}没有截全 复制代码的时候可以自己查看一下哦

for (var i = 0, marker; i < longitudeArr.length; i++) { // 因为我需要展示多个 所以必须使用循环
        var infoWindow = new AMap.InfoWindow({
          offset: new AMap.Pixel(0, -30),
        });
        var marker = new AMap.Marker({
          position: longitudeArr[i], // 你自定义窗口所出现的位置 
          resizeEnable: true, // 固定大小的窗口的大小
          map: map,
          icon:// w这里用来显示你需要自定义的图标 这里使用三目运算就比较方便了
            this.lngArr[i].state === "RED"
              ? alarmImg
              : this.lngArr[i].state === "YELLOW"
              ? interruptImg
              : normalImg,
        });
        // 自定义窗口需要展示的内容用模板字符串拼接起来 也可以在这里控制你的样式哦
        marker.content = `<ul class='main' style="width:340px">
                            <li><span style='color:blue'>站点名：${this.lngArr[i].name}</span></li>
                            <li><span style='color:blue'>经纬度：${this.lngArr[i].coord[0]}，${this.lngArr[i].coord[1]}</span></li>
                            <li><span style='color:blue'>启用时间：${this.lngArr[i].activeTime}</span></li>
                          </ul>`;
        marker.on("click", markerClick);
      }
      function markerClick(e) {
        infoWindow.setContent(e.target.content);  // 自定义窗口添加一个盒子去展示对应Marker(地图上的图标)所要展示的信息
        infoWindow.open(map, e.target.getPosition()); // Marker(地图上的图标)  打开自定义窗口的事件
      }
      map.setFitView();
    });

4. 望各位看客老爷觉得对你有一定帮助的 可以评论给予我继续写博客的动力哦 谢谢各位大佬！🤗🤗🤗