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>
xml

本文链接: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