Javascript 通过切换div标记从Google地图添加/删除标记

Javascript 通过切换div标记从Google地图添加/删除标记,javascript,html,css,google-maps,Javascript,Html,Css,Google Maps,我正在构建一个带有映射谷歌地图组件的移动web应用程序。 我正在尝试创建一个toggle onclick=gas,它将根据关键字gas在地图上添加然后删除标记,这样当有人开车四处寻找加油站时,他们可以单击加油站图标,并将加油站添加到地图上。 除拆卸部件外,所有部件均正常工作。我无法使切换的第二部分正常工作(即从地图上删除标记)。我相信我在这里遗漏了一些简单的东西,但我想这是另外一部分,特别是clearMarkers函数。任何帮助都将不胜感激 顺便说一句,我是一个初学者JS程序员,没有受过任何培训

我正在构建一个带有映射谷歌地图组件的移动web应用程序。 我正在尝试创建一个toggle onclick=gas,它将根据关键字gas在地图上添加然后删除标记,这样当有人开车四处寻找加油站时,他们可以单击加油站图标,并将加油站添加到地图上。 除拆卸部件外,所有部件均正常工作。我无法使切换的第二部分正常工作(即从地图上删除标记)。我相信我在这里遗漏了一些简单的东西,但我想这是另外一部分,特别是clearMarkers函数。任何帮助都将不胜感激

顺便说一句,我是一个初学者JS程序员,没有受过任何培训,使用的是来自web的混搭代码。 这是代码

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:

煤气

谢谢你的帮助

创建一个全局数组以保存标记gas\u标记 修改clearMarkers函数以处理该数组,在删除之前从地图中删除标记:

功能清除标记{

for (var i = 0; i < gas_markers.length; i++) {
    gas_markers[i].setMap(null);
}
gas_markers = [];
气体
你是如何填充gas_markers数组的?你发布的代码中没有地图。这段代码来自一个.js文件,地图部分和div标记代码是HTML文件的一部分。你想让我也上传吗?这是谷歌代码库中的示例……我想它不会将位置放在数组中。它们还需要放在数组中吗我被从地图上删除?你需要能够访问它们来删除它们谷歌的例子不这样做。不必是数组,但这是最常见的方法,如果你没有设置/固定标记,也是最简单的方法。哦,好的,谢谢。这是我上面代码的简单修复还是需要从头重写。。。?