Question

我正在构建一个带有地图（Google地图）组件的移动网络应用我正在尝试创建一个切换onclick="gas()"，它将根据关键字（气体）向地图添加（然后删除）标记，这样当有人开车并寻找加油站时，他们可以点击气体图标它将加油站添加到地图中。一切正常，除了删除部分。我无法使切换的第二部分正常工作，即从地图中删除标记。我相信我在这里遗漏了一些简单但却无法理解的东西（我认为它是else部分，特别是clearMarkers()部分。任何帮助都将不胜感激。

顺便说一下，我是一名初学JS程序员，根本没有接受过任何培训，并使用了来自网络的混搭代码。这是代码。

使用Javascript：

//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,
        keyword: ["gas"]
  };
  var service = new google.maps.places.PlacesService(map);
  service.nearbySearch(request, callback);


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

function createMarker(place) {
    var placeLoc = place.geometry.location;
    var gas_markers = 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}
    });

    var infowindow = new google.maps.InfoWindow();

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

 } 
else

{       
    function clearMarkers() {
        callback(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_markers = null;
    }       

} 
 //Gas - end

HTML：

<div onclick="gas()" id="gas"><div class="label-map">Gas</div></div>

感谢您的帮助！

Answer 1

创建一个全局数组来保存标记（gas_markers）
修改您的clearMarkers函数以处理该数组，在删除之前从地图中删除标记：

function clearMarkers（）{
```
for (var i = 0; i < gas_markers.length; i++) {
    gas_markers[i].setMap(null);
}
gas_markers = [];
```
}

工作代码段：

＆＃13;

var geocoder;
var map;

function initialize() {
    map = new google.maps.Map(
    document.getElementById("map_canvas"), {
        center: new google.maps.LatLng(37.4419, -122.1419),
        zoom: 13,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    });
}
google.maps.event.addDomListener(window, "load", initialize);

//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: map.getCenter(),
            radius: 3500,
            keyword: ["gas"]
        };
        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);
            });
        }
        // gas_markers = 'one';

    } 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

＆＃13;

html, body, #map_canvas {
    height: 500px;
    width: 500px;
    margin: 0px;
    padding: 0px
}

＆＃13;

<script src="https://maps.googleapis.com/maps/api/js?sensor=false&libraries=geometry,places&ext=.js"></script>
<script src="http://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerwithlabel/src/markerwithlabel.js"></script>
<div id="map_canvas" style="width:750px; height:450px; border: 2px solid #3872ac;"></div>
<div onclick="gas()" id="gas">
    <div class="label-map">Gas</div>
</div>

＆＃13;

通过切换div标签在Google地图中添加/删除标记

1 个答案: