Javascript 谷歌地图标记-信息窗口需要删除标记_Javascript_Google Maps_Marker

Javascript 谷歌地图标记-信息窗口需要删除标记

javascript google-maps

Javascript 谷歌地图标记-信息窗口需要删除标记,javascript,google-maps,marker,Javascript,Google Maps,Marker,我正在尝试显示一个信息窗口（或者如果你有更好的主意的话），里面会有一个可点击的链接，一旦点击它就会删除标记。将有多个标记，都是动态创建的，我希望每个标记都删除自己。我尝试了一些我在这里和那里收集的代码，但没有成功 <!DOCTYPE html> <html> <head> <title>Google maps test</title> <meta name="viewport" content="initi

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

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


谷歌地图测试
#地图{
身高：100%；
}
html，正文{
身高：100%；
保证金：0；
填充：0；
}
发送
var映射；
//变温标记；
函数onSendClicked（）{
var textBox=document.getElementById（“someInput”）；
var输入=textBox.value；
var geoCoder=new google.maps.geoCoder（）；
geoCoder.geocode（{'address'：input}，函数（结果，状态）{
if（status==google.maps.GeocoderStatus.OK）{
//如果（临时标记）{
//tempMarker.setMap（空）；
//google.maps.event.clearListeners（tempMarker，'click'）；
//}
var location=results[0]。geometry.location；
地图设置中心（位置）；
var tempMarker=new google.maps.Marker({
位置:位置,，
地图：地图
});
map.setZoom（15）；
var div=document.createElement（“div”）；
div.innerHTML=div.innerHTML+输入；
var br=document.createElement（“br”）；
儿童分部（br）；
var aLink=document.createElement（“a”）；
aLink.onClick=函数（）{
移除标记（tempMarker）；
}
aLink.innerText=“删除标记”；
儿童分部（aLink）；
var infoWindowHomeAddress=new google.maps.InfoWindow({
目录：div
});
tempMarker.addListener（'click'，function（））{
infoWindowHomeAddress.open（tempMarker.get（'map'），tempMarker）；
});
}
});
}
函数removeMarker（标记器）{
google.maps.event.clearListeners（标记“单击”）；
marker.setMap（空）；
}
函数initMap（）{
map=new google.maps.map（document.getElementById（'map'）{
中心：{lat:32.005255，lng:34.797488}，
缩放：15
});
}

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

多亏了@newoil，我终于找到了这个问题的答案

代码示例将根据此更新

以下是完整的解决方案：

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


谷歌地图测试
#地图{
身高：100%；
}
html，正文{
身高：100%；
保证金：0；
填充：0；
}
发送
var映射；
var计数器=-1；
var标记=[]；
函数onSendClicked（）{
var textBox=document.getElementById（“someInput”）；
var输入=textBox.value；
var geoCoder=new google.maps.geoCoder（）；
geoCoder.geocode（{'address'：input}，函数（结果，状态）{
if（status==google.maps.GeocoderStatus.OK）{
//如果（临时标记）{
//tempMarker.setMap（空）；
//google.maps.event.clearListeners（tempMarker，'click'）；
//}
计数器++；
var location=results[0]。geometry.location；
地图设置中心（位置）；
var tempMarker=new google.maps.Marker({
位置:位置,，
地图：地图，
id:柜台
});
map.setZoom（15）；
var infoWindowHomeAddress=new google.maps.InfoWindow({
内容：输入+“
”
});
tempMarker.addListener（'click'，function（））{
infoWindowHomeAddress.open（tempMarker.get（'map'），tempMarker）；
});
标记器。推（临时标记器）；
}
});
}
函数removeMarker（markerId）{
var marker=markers[markerId]；
google.maps.event.clearListeners（标记“单击”）；
marker.setMap（空）；
}
函数initMap（）{
map=new google.maps.map（document.getElementById（'map'）{
中心：{lat:32.005255，lng:34.797488}，
缩放：15
});
}

多亏了@newoil，我才想出了这个问题的答案

代码示例将根据此更新

以下是完整的解决方案：

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


谷歌地图测试
#地图{
身高：100%；
}
html，正文{
身高：100%；
保证金：0；
填充：0；
}
发送
var映射；
var计数器=-1；
var标记=[]；
函数onSendClicked（）{
var textBox=document.getElementById（“someInput”）；
var输入=textBox.value；
var geoCoder=new google.maps.geoCoder（）；
geoCoder.geocode（{'address'：input}，函数（结果，状态）{
if（status==google.maps.GeocoderStatus.OK）{
//如果（临时标记）{
//tempMarker.setMap（空）；
//google.maps.event.clearListeners（tempMarker，'click'）；
//}
计数器++；
var location=results[0]。geometry.location；
地图设置中心（位置）；
var tempMarker=new google.maps.Marker({
位置:位置,，
地图：地图，
id:柜台
});
map.setZoom（15）；
var infoWindowHomeAddress=new google.maps.InfoWindow({