Question

这是我的代码，当我调用removeMarkers（）时，它不会删除标记。

function receiver(data, textStatus, XMLHttpRequest) {

var json = JSON.parse(data);

  for (var i = 0; i < json.length; i++) {
    var lat = json[i]["lat"];
    var lng = json[i]["lng"]; 
    // push object into features array
    features.push({ position: new google.maps.LatLng(lat,lng) });
  }

     features.forEach(function(feature) {
                var marker1 = new google.maps.Marker({
                    position: feature.position,
                    //icon: icons[feature.type].icon,
                    map: map
                });
            }); 
            gmarkers.push(marker1); 
}

function removeMarkers(){

    for(i=0; i<gmarkers.length; i++){
        gmarkers[i].setMap(null);
    }
}

这是我的完整代码。用于显示我在数据库中沿着从始发地到目的地的路线保存的地点（教堂）。如果我更改了原点和目的地，我想删除旧标记并显示新标记而不刷新页面。

css

 <style>
          #map {
            height: 100%;
          }
          html, body {
            height: 100%;
            margin: 0;
            padding: 0;
          }
        </style>

HTML

<div id="map" height="460px" width="100%"></div>
     <input type="text" id="distance" value="3" size="2">
     <input type="text" id="from" />to
     <input type="text" id="to"  />
     <input type="submit" onClick="route()" />

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
        <script src="https://maps.googleapis.com/maps/api/js?key=api_ key&libraries=places"></script>
    <script src="https://cdn.rawgit.com/googlemaps/v3-utility-library/master/routeboxer/src/RouteBoxer.js" type="text/javascript"></script>

的javascript

 <script>
        var map;
        var marker;
        var infowindow;
        var messagewindow;
        var boxpolys = null;
        var directions = null;
        var routeBoxer = null;
        var distance = null; // km
        var service = null;
        var gmarkers = [];
        var boxes = null;
        var coordinates=null;
        var features = [];
        var gmarkers = [];
    <?php
        echo "
        var lat={$lat}; 
        var lng={$lng};
        "
    ?>

      function initialize() {

        var location = {lat: 10.525956868983068, lng:76.21387481689453};
        map = new google.maps.Map(document.getElementById('map'), {
          center: location,
          zoom: 13
        });

        service = new google.maps.places.PlacesService(map);
         routeBoxer = new RouteBoxer();

  directionService = new google.maps.DirectionsService();
  directionsRenderer = new google.maps.DirectionsRenderer({
    map: map
  });
      }

function route() {

removeMarkers()
 clearBoxes();

  distance = parseFloat(document.getElementById("distance").value) * 0.1;
  var request = {
    origin: document.getElementById("from").value,
    destination: document.getElementById("to").value,
    travelMode: google.maps.DirectionsTravelMode.DRIVING
  }

  directionService.route(request, function(result, status) {
    if (status == google.maps.DirectionsStatus.OK) {
      directionsRenderer.setDirections(result);

      var path = result.routes[0].overview_path;

      boxes = routeBoxer.box(path, distance);

       drawBoxes(); 
      findPlaces(0);
    } else {
      alert("Directions query failed: " + status);
    }
  });

}
function drawBoxes() {

  boxpolys = new Array(boxes.length);

  for (var i = 0; i < boxes.length; i++) {
    boxpolys[i] = new google.maps.Rectangle({
      bounds: boxes[i],
      fillOpacity: 0,
      strokeOpacity: 1.0,
      strokeColor: '#000000',
      strokeWeight: 0,
      map: map
    });
  }
}

function findPlaces(searchIndex) {

  var request = {
    bounds: boxes[searchIndex],
  };

  coordinates = boxes[searchIndex].toString().match(/[0-9]+\.[0-9]+/g);

  $.ajax({
                url:"http://localhost/church_finder/index.php/MapController/search_church",
                type:'POST',
                data:{coordinates:coordinates},
                //dataType:'json',
                 success: receiver
               });

    if (status != google.maps.places.PlacesServiceStatus.OVER_QUERY_LIMIT) {
      searchIndex++;
      if (searchIndex < boxes.length)
        findPlaces(searchIndex);
    } else { 
      setTimeout("findPlaces(" + searchIndex + ")", 1000);
    }
}

function clearBoxes() {

  if (boxpolys != null) {
    for (var i = 0; i < boxpolys.length; i++) {
      boxpolys[i].setMap(null);
    }
  }
  boxpolys = null;
}

function receiver(data, textStatus, XMLHttpRequest) {


var json = JSON.parse(data);
  for (var i = 0; i < json.length; i++) {
    var lat = json[i]["lat"];
    var lng = json[i]["lng"]; 
    features.push({ position: new google.maps.LatLng(lat,lng) });
  }     
     features.forEach(function(feature) {
                var marker1 = new google.maps.Marker({
                    position: feature.position,
                    map: map
                });
            }); 
            gmarkers.push(marker1); 
}

function removeMarkers(){

    for(i=0; i<gmarkers.length; i++){
        gmarkers[i].setMap(null);
    }
}

google.maps.event.addDomListener(window, 'load', initialize);
    </script>

enter image description here

Answer 1

function removeMarkers(){
  features.length=0;
  if (gmarkers != []) {
        for(var i=0; i<gmarkers.length; i++){
        gmarkers[i].setMap(null);
        }
    }
    gmarkers =[];       
}

Answer 2

您的应用在控制台中引发了大量错误，这只是对您要求的内容的临时修复：

更改原点和目的地，我想删除旧标记和显示新标记而不刷新页面

使用HTML文件中的脚本标记调用initialize()函数。您可以在此处包含项目的API密钥：

 <script defer async src="https://maps.googleapis.com/maps/api/js?
  key=YOUR_KEY&callback=initialize">

map element传递的map constructor在哪里？

在HTML中创建一个div元素以包含地图并向其添加CSS样式

#map {
height: 100%;
}

html, body {
margin: 0;
padding: 0;
height: 100%;
}

这实际上在Google Maps API documentation;

始终明确设置地图高度以定义div的大小包含地图的元素。

现在进入你的JS代码...... 你在使用var service做什么用途？ var service首先在全局范围内声明null值，然后分配给PlacesService构造函数...但service未定义仅因为您未包含脚本标记中的places library：

如果您想使用地方API，请添加地方图书馆

 <script type="text/javascript" 
 src="https://maps.googleapis.com/maps/api/js?
 key=YOUR_API_KEY&_ADD_libraries=places_PLEASE_"></script>

由于var service无法运行，只需将其移除（除了现在在代码中添加行，它实际上不会执行任何操作）以及RouteBoxer()

删除这些线路 - 它们现在无法使用

 service = new google.maps.places.PlacesService(map);
 routeBoxer = new RouteBoxer();

如果执行此操作，而不刷新页面，则清除每个后续请求的标记。您仍然会遇到大量错误，因为您的应用中存在语法错误和逻辑错误。

Get a BIN here

无法在不刷新页面的情况下使用setMap（null）从Google地图中删除标记

2 个答案: