在对象中隐藏 googlemaps v3 中的标记答案

【问题标题】：Hiding markers in googlemaps v3 in an object在对象中隐藏 googlemaps v3 中的标记
【发布时间】：2015-08-25 13:26:00
【问题描述】：

我想在我的名为 lastCoordinates 的对象中隐藏标记，它不是一个数组，所以当我单击一个按钮时，我的标记会隐藏，我可以使用不同的按钮重新显示我的标记。同样在我的代码中，我有一个功能，当右键单击一个标记时，它会被删除，并且线条会捕捉到在标记删除之前放置的标记，这是通过使用来自创建随机坐标的单独随机 php 文件中的数据来完成的。这是我的html代码：

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <title>Simple markers</title>
    <style>
      html, body, #map-canvas {
        height: 100%;
        margin: 0px;
        padding: 0px
      }
      #panel {
        position: absolute;
        top: 5px;
        left: 50%;
        margin-left: -180px;
        z-index: 5;
        background-color: #fff;

      }
    </style>
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&signed_in=true"></script>
    <script>
var map;
var stop = 0;
var markers = [];
window.onload=function ()
{
    var myLatlng = new google.maps.LatLng(0,0);
    var mapOptions = {
        zoom: 2,
        center: myLatlng
    }
    map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
    //google.maps.event.addDomListener(window, 'load', mapready);
    getdata();
    setInterval(function () {
        if(stop<3000)
            getdata();
        stop++;
    }, 2000);
}

function getdata() 
{
    if (window.XMLHttpRequest)
      {// code for IE7+, Firefox, Chrome, Opera, Safari
      xmlhttp=new XMLHttpRequest();
      }
    else
      {// code for IE6, IE5
      xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
      }
      //xmlhttp.open("GET","GetLocation.xml",true);
      xmlhttp.open("GET","data.php",true);
   xmlhttp.onreadystatechange=function () {gotdata()};
   xmlhttp.send();
}
var lastCoordinates = [];
var polyline = new google.maps.Polyline({
   strokeWeight: 6,
   strokeColor:"#0000FF",  // blue (RRGGBB, R=red, G=green, B=blue)
   strokeOpacity: 1      // opacity of line
}); // create the polyline (global)
var path = []; // global variable to hold all the past locations
function gotdata(){

    if (xmlhttp.readyState == 4){

        var d = xmlhttp.responseXML.documentElement 
            //innerHTML shouldn't work for XML-Nodes
            y = d.getElementsByTagName("y")[0].textContent,
            x = d.getElementsByTagName("x")[0].textContent,
            h = [x,y].join('_');
        if(lastCoordinates[h]){
          return;
        } 

        lastCoordinates[h]= new google.maps.Marker({
            position: new google.maps.LatLng(x,y),
            map: map,
            title: 'YAY'
        });
        rightclickableMarker(lastCoordinates[h],h);   
         path.push(lastCoordinates[h].getPosition());
         drawPath();
    }
}
function rightclickableMarker(marker, h) {
    google.maps.event.addListener(marker, 'rightclick', function(evt) {
        if(lastCoordinates[h] && lastCoordinates[h].setMap){
          lastCoordinates[h].setMap(null);
          delete marker;
          var idx = path.indexOf(lastCoordinates[h].getPosition())
          if (idx > -1) {
             path.splice(idx, 1);
            // removeLine();
             drawPath();
          }

        } 
    });
}


function drawPath(){
 polyline.setMap(map);
 polyline.setPath(path);

}
function setAllMap(map) {
  for (var i = 0; i < lastCoordinates.length; i++) {
    lastCoordinates[i].setMap(map);
  }
}

// Removes the markers from the map, but keeps them in the array.
function clearMarkers() {
  setAllMap(null);
}

// Shows any markers currently in the array.
function showMarkers() {
  setAllMap(map);
}

    </script>
  </head>
  <body>
    <div id= "panel">
      <input onclick="clearMarkers();" type=button value="Hide Markers">
      <input onclick="showMarkers();" type=button value="Show All Markers">
    </div>
    <div id="map-canvas">
    </div>
  </body>
</html>

和我的随机 php 选择器：

<?php 
header("Content-type: application/xml");
?>
<Location>
<x><?php echo rand(-85,85); ?></x>
<y><?php echo rand(-85,85); ?></y>
</Location>

【问题讨论】：

var lastCoordinates = []; 是一个数组。

标签： javascript google-maps google-maps-api-3 coordinates google-maps-markers

【解决方案1】：

您不能将标记存储在 lastCoordinates[h] 中，然后期望从 var i=0 到 i=lastCoordinates.length 调用它们.....

function setAllMap(map) {
  for (var i = 0; i < lastCoordinates.length; i++) {
    lastCoordinates[i].setMap(map);
  }
}

我的建议，将所有 h 值存储在另一个数组中

var h_s=[];

然后做

for(var i = 0; i < h_s.length; i++){
    lastCoordinates[h_s[i]].setMap(map);
}

【讨论】：

【解决方案2】：

别担心，我已经知道该怎么做了，我需要做的是使用 for in item 来解决这个问题

function rightclickableMarker(marker, h) {
    google.maps.event.addListener(marker, 'rightclick', function(evt) {
        if(lastCoordinates[h] && lastCoordinates[h].setMap){
         lastCoordinates[h].setMap(null);
          delete (lastCoordinates);
          var idx = path.indexOf(lastCoordinates[h].getPosition())
          if (idx > -1) {
             path.splice(idx, 1);
            // removeLine();
             drawPath();
          }

        } 
    });
}


function drawPath(){
 polyline.setMap(map);
 polyline.setPath(path);

}
function setAllMap(map) {

  for (var prop in lastCoordinates) {
    lastCoordinates[prop].setMap(map);  }
}

【讨论】：