11月28, 2020

高德地图 搜索以后 多个marker绑定点击事件 自定义窗口内容

高德地图 搜索以后 多个marker绑定点击事件 自定义窗口内容

<script
  type="text/javascript"
  src="http://webapi.amap.com/maps?v=1.3&key=你自己的key&plugin=AMap.Geocoder,AMap.Autocomplete,AMap.PlaceSearch"
></script>

<div id="container"></div>
<div id="myPageTop">
  <table>
    <tr>
      <td>
        <label>请输入关键字:</label>
      </td>
    </tr>
    <tr>
      <td>
        <input id="tipinput" />
      </td>
    </tr>
  </table>
</div>
<div id="tip">
  <span id="result"></span>
</div>
<script type="text/javascript">
  //地图加载
  map = new AMap.Map("container", {
    resizeEnable: true,
    center: [116.403851, 39.915177],
    zoom: 13,
  });
  //输入提示
  var autoOptions = {
    input: "tipinput",
  };
  var auto = new AMap.Autocomplete(autoOptions);
  var placeSearch = new AMap.PlaceSearch({
    map: "",
  }); //构造地点查询类
  AMap.event.addListener(auto, "select", select); //注册监听,当选中某条记录时会触发
  var infoWindow = new AMap.InfoWindow({ offset: new AMap.Pixel(0, -30) });
  function select(e) {
    placeSearch.setCity(e.poi.adcode);
    if (e.poi && e.poi.location) {
      map.setZoom(15);
      map.setCenter(e.poi.location);
    }
    placeSearch.search(e.poi.name, function (status, result) {
      if (status === "complete" && result.info === "OK") {
        for (var h = 0; h < result.poiList.pois.length; h++) {
          //返回搜索列表循环绑定marker
          var jy = result.poiList.pois[h]["location"]; //经纬度
          var address = result.poiList.pois[h]["address"]; //地址

          var marker = new AMap.Marker({
            //加点
            map: map,
            position: jy,
          });
          marker.extData = {
            getLng: jy["lng"],
            getLat: jy["lat"],
            address: address,
          }; //自定义想传入的参数
          marker.content = "123123123";
          marker.on("click", function (e) {
            var hs = e.target.extData;
            infoWindow.setContent(hs["address"]); //点击以后窗口展示的内容
            infoWindow.open(map, e.target.getPosition());
            console.log(hs);
          });
          marker.emit("click", { target: marker });
        }

        //alert(result.poiList.pois[0].location);
        //geocoder_CallBack(result);
      }
    }); //关键字查询查询

    //geocoder(e.poi.name) //关键字查询查询
  }
  //默认的点
  marker = new AMap.Marker({
    //加点
    map: map,
    position: [116.403851, 39.915177],
  });

  map.on("click", function (e) {
    if (marker) {
      marker.setMap(null);
      marker = null;
    }
    getLng = e.lnglat.getLng();
    getLat = e.lnglat.getLat();
    lnglatXY = [e.lnglat.getLng(), e.lnglat.getLat()]; //已知点坐标
    var geocoder = new AMap.Geocoder({
      radius: 1000,
      extensions: "all",
    });
    geocoder.getAddress(lnglatXY, function (status, result) {
      if (status === "complete" && result.info === "OK") {
        //geocoder_CallBack(result);
        address = result.regeocode.formattedAddress;
        // g.find(".input-group :text").val(address);
        alert(
          "您在[ " + result.regeocode.formattedAddress + " ]的位置点击了地图!"
        );
      }
    });
    marker = new AMap.Marker({
      //加点
      map: map,
      position: lnglatXY,
    });
    map.setFitView();
  });
</script>

本文链接:https://587v5.com/post/gao-de-de-tu- sou-suo-yi-hou- duo-ge-marker-bang-ding-dian-ji-shi-jian- zi-ding-yi-chuang-kou-nei-rong.html

Comments