按类别切换Google Maps标记

本文介绍了按类别切换Google Maps标记的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我正在尝试使Google Maps切换标记.我正在使用数组来跟踪标记和复选框以选择要摆脱的标记.这是我的代码的一些亮点，我将在下面粘贴整个内容.我试图模仿此链接 http://gmaps-samples中的代码. googlecode.com/svn/trunk/markerhider/markerhider.htm

I am trying to get google maps to toggle markers. I am using an array to keep track of the markers and checkboxes to select which to get rid of.Here is some highlights of my code, I will paste the whole thing below.I tried to emulate the code in this link http://gmaps-samples.googlecode.com/svn/trunk/markerhider/markerhider.htm

我似乎无法使其正常工作....感谢您的所有帮助！

I cannot seem to get it to work.... Thank you for any and all help!

变量

    var markerGroups = { "parking": [], "trail": [], "shelter": []};

加载变量

          markerGroups[type].push(marker);

显示隐藏的功能

    function toggleGroup(type) {
  for (var i = 0; i < markerGroups[type].length; i++) {
  alert(markerGroups[type][i]);
    var marker = markerGroups[type][i];
    if (marker.isHidden()) {
      marker.show();
    } else {
      marker.hide();
    }
  }
}

这是我的全部代码.网站链接为 http://backpackingconnecticut.com/Map.php

Here is the whole of my code. Site link is http://backpackingconnecticut.com/Map.php

<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>Backpacking Connecticut Trails</title>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js"></script>
<script type="text/javascript">
//<![CDATA[
var markerGroups = { "parking": [], "trail": [], "shelter": []};
var customIcons = {
  shelter: {
    icon: 'http://backpackingconnecticut.com/images/shelter_picnic.png'
  },
  parking: {
    icon: 'http://backpackingconnecticut.com/images/parking.png'
  }
};
function load() {
  var map = new google.maps.Map(document.getElementById("map"), {
    center: new google.maps.LatLng(41.613889, -72.7725),
    zoom: 9,
    mapTypeId: 'terrain'
  });
  var infoWindow = new google.maps.InfoWindow;
  downloadUrl("phpsqlajax_genxml.php", function(data) {
    var xml = data.responseXML;
    var markers = xml.documentElement.getElementsByTagName("marker");
    for (var i = 0; i < markers.length; i++) {
      var name = markers[i].getAttribute("name");
      var address = markers[i].getAttribute("address");
      var point = new google.maps.LatLng(
          parseFloat(markers[i].getAttribute("lat")),
          parseFloat(markers[i].getAttribute("lng")));
      var type = markers[i].getAttribute("type");
      var html = "<b>" + name + "</b> <br/>" + address;
      var icon = customIcons[type] || {};
      var marker = new google.maps.Marker({
        map: map,
        position: point,
        icon: icon.icon
      });
      markerGroups[type].push(marker);
      bindInfoWindow(marker, map, infoWindow, html);
    }
  });
}

function bindInfoWindow(marker, map, infoWindow, html) {
  google.maps.event.addListener(marker, 'click', function() {
    infoWindow.setContent(html);
    infoWindow.open(map, marker);
  });
}

function downloadUrl(url, callback) {
  var request = window.ActiveXObject ?
      new ActiveXObject('Microsoft.XMLHTTP') :
      new XMLHttpRequest;

  request.onreadystatechange = function() {
    if (request.readyState == 4) {
      request.onreadystatechange = doNothing;
      callback(request, request.status);
    }
  };

  request.open('GET', url, true);
  request.send(null);
}

function doNothing() {}

function toggleGroup(type) {
  for (var i = 0; i < markerGroups[type].length; i++) {
    var marker = markerGroups[type][i];
    if (marker.isHidden()) {
      marker.show();
    } else {
      marker.hide();
    }
  }
}
//]]>
</script>
</script>
  </head>
 <body onload="load()">
<input type="checkbox" id="restaurantCheckbox" onclick="toggleGroup('parking')" CHECKED />
   parking
   <br/>
   <input type="checkbox" id="barCheckbox" onclick="toggleGroup('shelter')" CHECKED/>
   shelter
</div><div id="map" style="width: 750px; height: 550px"></div>
</body>
</html>

根据要求提供的一些XML Backpackingconnecticut.com/phpsqlajax_genxml.php

Some XML as requested backpackingconnecticut.com/phpsqlajax_genxml.php

<markers>
<marker name="Mattatuck Trail Parking 1" address="" lat="41.784969" lng="-73.319489" type="parking"/>
<marker name="Mattatuck Trail Parking 2" address="" lat="41.821751" lng="-73.296867" type="parking"/>
<marker name="Mattatuck Trail Parking 3" address="" lat="41.784969" lng="-73.319489" type="parking"/>
<marker name="Mohawk Trail Parking 1" address="" lat="41.818535" lng="-73.368477" type="parking"/>
<marker name="Mohawk Trail Parking 2" address="" lat="41.784969" lng="-73.319489" type="parking"/>
<marker name="Appalacian Trail Parking 1" address="" lat="41.731030" lng="-73.490692" type="parking"/>
<marker name="Appalacian Trail Parking 2" address="" lat="41.807705" lng="-73.391785" type="parking"/>
<marker name="Appalacian Trail PArking 3" address="" lat="41.731030" lng="-73.490692" type="parking"/>
<marker name="Dawley Pond Shelter" address="" lat="41.621277" lng="-71.815392" type="shelter"/>
<marker name="Pachaug Dry Resevoir Shelter" address="" lat="41.590752" lng="-71.881386" type="shelter"/>
</markers>

推荐答案

在Google Maps Javascript API v3中， google.maps.Marker 类没有.isHidden方法(或.hide()或.show()方法).

In the Google Maps Javascript API v3 the google.maps.Marker class does not have a .isHidden method (or a .hide() or a .show() method).

其中的v3等同于:


getVisible()    boolean
setVisible(visible:boolean) None

更新的toggleGroup函数:

function toggleGroup(type) {
    for (var i = 0; i < markerGroups[type].length; i++) {
        var marker = markerGroups[type][i];
        if (!marker.getVisible()) {
            marker.setVisible(true);
        } else {
            marker.setVisible(false);
        }
    }
}

工作小提琴

代码段:

var markerGroups = {
  "parking": [],
  "trail": [],
  "shelter": []
};
var customIcons = {
  shelter: {
    icon: 'http://backpackingconnecticut.com/images/shelter_picnic.png'
  },
  parking: {
    icon: 'http://backpackingconnecticut.com/images/parking.png'
  }
};
var map;

function load() {
  map = new google.maps.Map(document.getElementById("map"), {
    center: new google.maps.LatLng(41.613889, -72.7725),
    zoom: 9,
    mapTypeId: 'terrain'
  });
  var infoWindow = new google.maps.InfoWindow();
  // downloadUrl("phpsqlajax_genxml.php", function(data) {
  var xml = parseXml(xmlStr); // data.responseXML;
  var markers = xml.documentElement.getElementsByTagName("marker");
  var bounds = new google.maps.LatLngBounds();
  for (var i = 0; i < markers.length; i++) {
    var name = markers[i].getAttribute("name");
    var address = markers[i].getAttribute("address");
    var point = new google.maps.LatLng(
      parseFloat(markers[i].getAttribute("lat")),
      parseFloat(markers[i].getAttribute("lng")));
    bounds.extend(point);
    var type = markers[i].getAttribute("type");
    var html = "<b>" + name + "</b> <br/>" + address;
    var icon = customIcons[type] || {};
    var marker = new google.maps.Marker({
      map: map,
      position: point,
      icon: icon.icon
    });
    markerGroups[type].push(marker);
    bindInfoWindow(marker, map, infoWindow, html);
  }
  // });
  map.fitBounds(bounds);
}

function bindInfoWindow(marker, map, infoWindow, html) {
  google.maps.event.addListener(marker, 'click', function() {
    infoWindow.setContent(html);
    infoWindow.open(map, marker);
  });
}

function downloadUrl(url, callback) {
  var request = window.ActiveXObject ? new ActiveXObject('Microsoft.XMLHTTP') : new XMLHttpRequest;

  request.onreadystatechange = function() {
    if (request.readyState == 4) {
      request.onreadystatechange = doNothing;
      callback(request, request.status);
    }
  };

  request.open('GET', url, true);
  request.send(null);
}

function doNothing() {}

function toggleGroup(type) {
  for (var i = 0; i < markerGroups[type].length; i++) {
    // alert(markerGroups[type][i]);
    var marker = markerGroups[type][i];
    if (!marker.getVisible()) {
      marker.setVisible(true);
    } else {
      marker.setVisible(false);
    }
  }
}
google.maps.event.addDomListener(window, 'load', load);

function parseXml(str) {
  if (window.ActiveXObject) {
    var doc = new ActiveXObject('MicrosoftXMLDOM');
    doc.loadXML(str);
    return doc;
  } else if (window.DOMParser) {
    return (new DOMParser).parseFromString(str, 'text/xml');
  }
}

var xmlStr = '<markers><marker name="Mattatuck Trail Parking 1" address="" lat="41.784969" lng="-73.319489" type="parking"/><marker name="Mattatuck Trail Parking 2" address="" lat="41.821751" lng="-73.296867" type="parking"/><marker name="Mattatuck Trail Parking 3" address="" lat="41.784969" lng="-73.319489" type="parking"/><marker name="Mohawk Trail Parking 1" address="" lat="41.818535" lng="-73.368477" type="parking"/><marker name="Mohawk Trail Parking 2" address="" lat="41.784969" lng="-73.319489" type="parking"/><marker name="Appalacian Trail Parking 1" address="" lat="41.731030" lng="-73.490692" type="parking"/><marker name="Appalacian Trail Parking 2" address="" lat="41.807705" lng="-73.391785" type="parking"/><marker name="Appalacian Trail PArking 3" address="" lat="41.731030" lng="-73.490692" type="parking"/><marker name="Dawley Pond Shelter" address="" lat="41.621277" lng="-71.815392" type="shelter"/><marker name="Pachaug Dry Resevoir Shelter" address="" lat="41.590752" lng="-71.881386" type="shelter"/></markers>';

.top {
  margin: 0 auto;
  top: 5px;
  height: 100px;
  width: 949px;
  border: 3px solid #8AC007;
  padding: 10px;
  background-color: FFFFCC;
}
.right {
  margin: 0 auto;
  width: 750px;
  border: 3px solid #8AC007;
  background-color: FFFFCC;
}
.child1 {
  top: 0px;
  height: 15px;
  margin: 10px;
  padding: 10px;
  display: inline-block;
  overflow: hidden
}
body {
  background-color: #669933;
}

<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
<div class="top">
  <img src="http://backpackingconnecticut.com/images/logo.png" width="100" height="100" alt="Backpacking Connecticut" style="float:left" ;/>

  <h3 style="float:left;"><p style="font-size: 200%;"><FONT COLOR="669933">Backpacking Connecticut</FONT></p></h3>

  <input type="checkbox" id="restaurantCheckbox" onclick="toggleGroup('parking')" CHECKED />parking
  <br/>
  <input type="checkbox" id="barCheckbox" onclick="toggleGroup('shelter')" CHECKED/>shelter</form>
</div>
<div class="right"></div>
<div id="map" style="width: 750px; height: 550px"></div>
</div>

我的示例类别"地图(从Mike Williams的v2教程翻译为v3)

这篇关于按类别切换Google Maps标记的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！