Question

我正在构建一个移动网络应用程序，其中有一个映射页面，允许用户打开/关闭不同的POI ...以下示例是加油站。我遇到的麻烦是，当google.maps.places.PlacesService在我定义的半径内找不到任何加油站时，我无法切换CSS更改。我不知道当标记集回空时将条件置于何处（或如何）以允许切换关闭.. 它是在clearMarkers函数中还是在其他地方？

//Gas
var gas_markers = null;
function gas() {
if (gas_markers === null) {
    document.getElementById('gas').style.backgroundColor = "rgb(175,175,175)";
    document.getElementById('gas').style.borderColor = "black";
    document.getElementById('gas').style.color = "rgb(75,75,75)";

    var request = {
        location: arena,
        radius: 3500,
        type: ["gas_station"]
    };
    var service = new google.maps.places.PlacesService(map);
    service.nearbySearch(request, callback);


    function callback(results, status) {
        if (status == google.maps.places.PlacesServiceStatus.OK) {
            if (gas_markers === null) gas_markers = [];
            for (var i = 0; i < results.length; i++) {
                createMarker(results[i]);
            }
        }
    }

    function createMarker(place) {
        var placeLoc = place.geometry.location;
        var gas_marker = new MarkerWithLabel({
            position: place.geometry.location,
            draggable: false,
            raiseOnDrag: false,
            map: map,
            icon: "images/gas1.png",
            labelContent: "",
            labelAnchor: new google.maps.Point(10, 0),
            labelClass: "pin", // the CSS class for the label
            labelStyle: {
                opacity: 0.95
            }
        });
        gas_markers.push(gas_marker);
        var infowindow = new google.maps.InfoWindow();

        google.maps.event.addListener(gas_marker, 'click', function () {
            infowindow.setContent('Promo Code: <br> Gas');
            infowindow.open(map, this);
        });
    }

} else {

    clearMarkers();
    document.getElementById('gas').style.backgroundColor = "rgb(75,75,75)";
    document.getElementById('gas').style.borderColor = "gray";
    document.getElementById('gas').style.color = "rgb(175,175,175)";

    gas_markers = null;

}

function clearMarkers() {

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

}
 //Gas - end

当请求返回时，gas_markers = null因此当我尝试关闭时将其踢出IF语句。任何帮助将不胜感激...谢谢

Answer 1

使gas_markers永远是一个数组。如果它中有标记（长度> 0）并且您正在获取新标记（或不是），请将其清除。

概念证明代码段：

＆＃13;

var map = null;

function initialize() {
  var mapOptions = {
    zoom: 6,
    center: new google.maps.LatLng(47.606209, -122.332069)
  };
  map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
  arena = map.getCenter();
  google.maps.event.addListener(map, 'center_changed', function() {
    arena = map.getCenter();
  });
}

google.maps.event.addDomListener(window, 'load', initialize);

//Gas
var gas_markers = [];
var arena = null;

function gas() {
  if (gas_markers.length > 0) {
    clearMarkers();

    document.getElementById('gas').style.backgroundColor = "rgb(75,75,75)";
    document.getElementById('gas').style.borderColor = "gray";
    document.getElementById('gas').style.color = "rgb(175,175,175)";
  }
  var request = {
    location: arena,
    radius: 3500,
    type: ["gas_station"]
  };
  var service = new google.maps.places.PlacesService(map);
  service.nearbySearch(request, callback);


  function callback(results, status) {
    if (status == google.maps.places.PlacesServiceStatus.OK) {
      document.getElementById('gas').style.backgroundColor = "rgb(175,175,175)";
      document.getElementById('gas').style.borderColor = "black";
      document.getElementById('gas').style.color = "rgb(75,75,75)";


      for (var i = 0; i < results.length; i++) {
        createMarker(results[i]);
      }
    }
  }

  function createMarker(place) {
    var placeLoc = place.geometry.location;
    var gas_marker = new MarkerWithLabel({
      position: place.geometry.location,
      draggable: false,
      raiseOnDrag: false,
      map: map,
      // icon: "images/gas1.png",
      labelContent: "",
      labelAnchor: new google.maps.Point(10, 0),
      labelClass: "pin", // the CSS class for the label
      labelStyle: {
        opacity: 0.95
      }
    });
    gas_markers.push(gas_marker);
    var infowindow = new google.maps.InfoWindow();

    google.maps.event.addListener(gas_marker, 'click', function() {
      infowindow.setContent('Promo Code: <br> Gas');
      infowindow.open(map, this);
    });
  }

  google.maps.event.addDomListener(document.getElementById('clear'), 'click', clearMarkers);

  function clearMarkers() {
    for (var i = 0; i < gas_markers.length; i++) {
      gas_markers[i].setMap(null);
    }
    gas_markers = [];

    document.getElementById('gas').style.backgroundColor = "rgb(75,75,75)";
    document.getElementById('gas').style.borderColor = "gray";
    document.getElementById('gas').style.color = "rgb(175,175,175)";
  }

  //Gas - end
}

＆＃13;

html,
body,
#map-canvas {
  height: 100%;
  width: 100%;
}

＆＃13;

<script src="https://maps.googleapis.com/maps/api/js?libraries=geometry,places"></script>
<script src="http://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerwithlabel/src/markerwithlabel.js"></script>
<div id="gas">&nbsp;</div>
<input type="button" onclick="gas()" value="gas" />
<input type="button" id="clear" value="clear" />
<div id="map-canvas"></div>

＆＃13;

标记为空时，Google Maps clearMarkers

1 个答案: