Question

我正在尝试显示一个信息窗口（或者如果你有更好的主意），它内部会有一个可点击的链接，一旦点击它就会删除标记。会有多个标记，都是动态创建的，我希望每个标记都能自行删除。我尝试了一些我在这里和那里聚集的代码，没有运气

<!DOCTYPE html>
<html>
  <head>
    <title>Google maps test</title>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <style>
      #map {
        height: 100%;
      }
      html, body {
        height: 100%;
        margin: 0;
        padding: 0;
      }
    </style>
  </head>
  <body>
    <div id="searchBox">
        <input type="text" id="someInput"/>
        <button onclick="onSendClicked()">Send</button>
    </div>
    <div id="map"></div>
    <script>

      var map;
      //var tempMarker;

      function onSendClicked(){
        var textBox = document.getElementById("someInput");
        var input = textBox.value;

        var geoCoder = new google.maps.Geocoder();
        geoCoder.geocode({'address':input}, function(results, status){
            if (status == google.maps.GeocoderStatus.OK){
                //if (tempMarker){
                //  tempMarker.setMap(null);
                //  google.maps.event.clearListeners(tempMarker, 'click');
                //}
                var location = results[0].geometry.location;
                map.setCenter(location);
                var tempMarker = new google.maps.Marker({
                  position: location,
                  map: map
                });
                map.setZoom(15);

                var div = document.createElement("div");
                div.innerHTML = div.innerHTML + input;
                var br = document.createElement("br");
                div.appendChild(br);

                var aLink = document.createElement("a");
                aLink.onClick = function(){
                    removeMarker(tempMarker);
                }
                aLink.innerText = "Remove marker";
                div.appendChild(aLink);

                var infoWindowHomeAddress = new google.maps.InfoWindow({
                    content: div
                });

                tempMarker.addListener('click',function(){
                    infoWindowHomeAddress.open(tempMarker.get('map'), tempMarker);
                });

            }
        });
      }

      function removeMarker(marker){
        google.maps.event.clearListeners(marker, 'click');
        marker.setMap(null);
      }

      function initMap() {
        map = new google.maps.Map(document.getElementById('map'), {
          center: {lat: 32.005255, lng: 34.797488},
          zoom: 15
        });
      }
    </script>
    <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB5Sx8aiOG14-XC7HJuSlEKAlzSnkhfnbw&callback=initMap"
    async defer></script>
  </body>
</html>

我也尝试过div.outerHTML，但这并没有给出我需要的点击事件。

Answer 1

感谢@Novice，我设法得到了这个问题的答案。

代码示例根据此question进行更新。

以下是完整的解决方案：

<!DOCTYPE html>
<html>
  <head>
    <title>Google maps test</title>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <style>
      #map {
        height: 100%;
      }
      html, body {
        height: 100%;
        margin: 0;
        padding: 0;
      }
    </style>
  </head>
  <body>
    <div id="searchBox">
        <input type="text" id="someInput"/>
        <button onclick="onSendClicked()">Send</button>
    </div>
    <div id="map"></div>
    <script>

      var map;
      var counter = -1;
      var markers = [];

      function onSendClicked(){
        var textBox = document.getElementById("someInput");
        var input = textBox.value;

        var geoCoder = new google.maps.Geocoder();
        geoCoder.geocode({'address':input}, function(results, status){
            if (status == google.maps.GeocoderStatus.OK){
                //if (tempMarker){
                //  tempMarker.setMap(null);
                //  google.maps.event.clearListeners(tempMarker, 'click');
                //}
                counter++;
                var location = results[0].geometry.location;
                map.setCenter(location);
                var tempMarker = new google.maps.Marker({
                  position: location,
                  map: map,
                  id: counter
                });
                map.setZoom(15);

                var infoWindowHomeAddress = new google.maps.InfoWindow({
                    content: input + "<br/><a href='#' onclick='removeMarker(" + counter + ");'>Remove marker</a>"
                });

                tempMarker.addListener('click',function(){
                    infoWindowHomeAddress.open(tempMarker.get('map'), tempMarker);
                });
                markers.push(tempMarker);
            }
        });
      }

      function removeMarker(markerId){
        var marker = markers[markerId];
        google.maps.event.clearListeners(marker, 'click');
        marker.setMap(null);
      }

      function initMap() {
        map = new google.maps.Map(document.getElementById('map'), {
          center: {lat: 32.005255, lng: 34.797488},
          zoom: 15
        });
      }
    </script>
    <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB5Sx8aiOG14-XC7HJuSlEKAlzSnkhfnbw&callback=initMap"
    async defer></script>
  </body>
</html>

Google地图标记 - 信息窗口需要删除标记

1 个答案: