设置标记谷歌地图的JavaScript API [英] set marker google maps javascript api

问题描述

我正尝试用google maps javascript api创建以下内容：在页面加载标记后，应该在用户位置设置，现在有效。之后，应该在用户点击地图的地方添加一个标记，并删除前一个标记。一个标记应该只在地图上。现在前面的标记不会被删除，其他的会被添加到我不想要的内容中。我能做些什么在地图上总是有一个标记？

  var markers = []; 
函数initMap（）{
 var map = new google.maps.Map（document.getElementById（'map'），{
 center：{lat：-34.397，lng：150.644}， 
 zoom：7 
}）; 
 var infoWindow = new google.maps.InfoWindow（{map：map}）; 
 
 //尝试HTML5地理位置。 
 if（navigator.geolocation）{
 navigator.geolocation.getCurrentPosition（function（position）{
 var pos = {
 lat：position.coords.latitude，
 lng：position.coords.longitude 
}; 
 
 map.setCenter（pos）; 
 
 
 //这个事件监听器会调用addMarker（）当点击地图时
 map.addListener（'click'，function（event）{
 deleteMarkers（）; 
 addMarkers（event.latLng）; 
 
 
}）; 
 addMarkers（pos）; 
 //向地图添加一个标记并将其推入数组
 function addMarkers（location）{
 var marker = new google.maps.Marker（{
 position：location，
 map：map 
}）; 
 markers.push（marker）; 
} $ b $ 
函数setMapOnAll（map）{
 for（var i = 0; i< markers.length; i ++）{
 markers [ I] .setMap（米AP）; 
} 
} 
 //从地图中删除标记，但将它们保留在数组中。 
函数clearMarkers（）{
 setMapOnAll（null）; 
} 
 
 
 //删除数组中的所有标记，删除对它们的引用。 
函数deleteMarkers（）{
 clearMarkers（）; 
 marker = []; 
 
 
 $ b}，function（）{
 handleLocationError（true，infoWindow，map.getCenter（））; 
}）; 
 
} else {
 //浏览器不支持地理位置
 handleLocationError（false，infoWindow，map.getCenter（））; 
} 
 
} 
  

解决方案

看看这里我相信你已经接近： ）

您只需将您的标记数组设置为无效，但不能有效地清除标记

I am trying to create with the google maps javascript api the following: After page loading a marker should become set at the users location, what now works. After that should where the user click on the map a marker become added and the previous one deleted. One marker should be only on the map. Now the previous marker wont become deleted and other become added what I dont want. What can I do to have always one marker on the map?

var markers = [];
    function initMap() {
      var map = new google.maps.Map(document.getElementById('map'), {
        center: {lat: -34.397, lng: 150.644},
        zoom: 7
      });
      var infoWindow = new google.maps.InfoWindow({map: map});

      // Try HTML5 geolocation.
      if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(function(position) {
          var pos = {
            lat: position.coords.latitude,
            lng: position.coords.longitude
          };

          map.setCenter(pos);


      // This event listener will call addMarker() when the map is clicked.
      map.addListener('click', function(event) {
        deleteMarkers();
addMarkers(event.latLng);


      });
      addMarkers(pos);
      // Adds a marker to the map and push to the array.
      function addMarkers(location) {
      var marker = new google.maps.Marker({
        position: location,
        map: map
      });
      markers.push(marker);
    }
  // Sets the map on all markers in the array.
  function setMapOnAll(map) {
  for (var i = 0; i < markers.length; i++) {
    markers[i].setMap(map);
  }
}
// Removes the markers from the map, but keeps them in the array.
function clearMarkers() {
  setMapOnAll(null);
}


    // Deletes all markers in the array by removing references to them.
    function deleteMarkers() {
        clearMarkers();
      marker = [];
    }


        }, function() {
          handleLocationError(true, infoWindow, map.getCenter());
        });

      } else {
        // Browser doesn't support Geolocation
        handleLocationError(false, infoWindow, map.getCenter());
      }

    }

解决方案

Take a look here I believe you are close :)

you are just setting your markers array to be nothing , but not actaully clearing the marker

这篇关于设置标记谷歌地图的JavaScript API的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！