高德地图placesearch 搜索结果生成自定义marker

业务需求:

高德地图,输入关键词输入提示(autocomplete),
按照选择的关键词执行地点搜索placesearch在地图上生成标记点marker,
点击标记点弹出自定义信息窗口infowindow 点击信息窗体确定按钮,根据经纬度+地址更新当前行数据.

踩坑

1.placesearch 在初次加载时,会生成默认的标记点marker,与自定义的marker 重叠,再次进入不会出现.
2.infowindow 自定义信息窗体的内容没有跟随marker变动,不管点击哪个marker内容都是一样.

代码

—封装高德引入 maploader.js 一并注册用到的插件

export default function mapLoader() {
  return new Promise((resolve, reject) => {
    if (window.AMap) {
      resolve(window.AMap);
    } else {
      var script = document.createElement("script");
      script.type = "text/javascript";
      script.async = true;
      script.src =
        "https://webapi.amap.com/maps?v=1.4.15&callback=initAMap&key=" +
        你的高德key +
        "&plugin=AMap.Autocomplete,AMap.PlaceSearch,AMap.ToolBar";
      script.onerror = reject;
      document.head.appendChild(script);
    }
    window.initAMap = () => {
      resolve(window.AMap);
    };
  });
}

—页面内生成高德地图 初始化地图与地图控件

import mapLoader from "@/utils/mapLoader.js";

.......
this.$nextTick(() => {
            mapLoader().then(
              (AMap) => {
                that.modalLoading = false;
                that.map = new AMap.Map("map-container", {
                  resizeEnable: true,
                  center: center, //中心点坐标
                  zoom: 13, //地图视图缩放级别
                });
                // 注册组件
                that.map.addControl(new AMap.ToolBar());
                //输入提示
                var autoOptions = {
                  input: "tipinput",
                };
                var auto = new AMap.Autocomplete(autoOptions);
                function select(e) {
                  // that.map.clearMap();
                  var placeSearch = new AMap.PlaceSearch({
                    // map: that.map,
                  }); //构造地点查询类
                  placeSearch.setCity(e.poi.adcode);
                  placeSearch.search(e.poi.name, function (status, result) {
                    //关键字查询查询
                    // 查询成功时，result即对应匹配的POI信息
                    console.log("搜索结果", result);
                    if (status == "complete" || result.info == "OK")
                      that.addMarker(AMap, result);
                  });
                }
                AMap.event.addListener(auto, "select", select); //注册监听，当选中某条记录时会触发
              },
              (e) => {
                this.modalLoading = false;
              }
            );
          });

注意此处,
踩坑1,此处尝试使用了placeSearch.render.markerList.clear() ,map.clear()等等,用于清除地点搜索默认生成的marker, 均无效,参照高德文档可知

那么,定义placeSearch实例对象时,不注册到当前地图,仅仅生成实例用于获取结果便是,这样就不会展示默认的marker到地图上

—生成自定义marker 点标记

addMarker(AMap, result) {
      // 根据返回placeSearch 返回的数据 生成地图 marker
      this.map.clearMap();
      const poiArr = result.poiList.pois; //搜索结果数组
      const icon = require("@/assets/yuanqu/loca.svg");
      const markerContent =
        "<div><img src=" + icon + " width='30px' height='30px'></div>";
      var markerList = [];
      for (let i = 0; i < poiArr.length; i++) {
        var marker = new AMap.Marker({
          position: poiArr[i].location,
          content: markerContent,
        }); //设定地图标记点
        const that = this;
        AMap.event.addListener(marker, "click", function (e) {
          var lngX = e.lnglat.lng;
          var latY = e.lnglat.lat;
          that.map.setCenter([lngX, latY]); //点击marker 动态改变中心点
          var infoWindow = new AMap.InfoWindow({
            content:
              "<h3>地址:" +
              poiArr[i].name +
              "</h3><p>详细地址:" +
              poiArr[i].address +
              "</p>经纬度:[" +
              poiArr[i].location.getLng() +
              "," +
              poiArr[i].location.getLat() +
              "]</p><button style='height:32px;width:100px;background-color:#469d75;border:none;' οnclick=\"saveCenter('" +
              i +
              "')\">确定</button>",

            size: new AMap.Size(300, 0),
            autoMove: true,
            offset: new AMap.Pixel(5, -40),
          });
          infoWindow.open(that.map, e.target.getPosition());
        });
        markerList.push(marker);
      }
      this.map.add(markerList);
      this.map.setFitView();
    },

执行方法前先清空地图覆盖物,clearmap(),生成marker后执行setFitView() 到合适的展示marker的视图. 此处踩坑2 ,infowindow 变量定义的作用域问题,放在marker的点击事件里边生成infowindow即可.