Google Maps Marker显示/隐藏

用户名

我尝试了几种代码并进行了大量搜索以寻找答案,但是我无法使其正常工作。我对Java语言了解甚少,所以我希望有人可以帮助我解决这个问题,因为我对此一无所知。标记不会切换,什么也不会发生。

     var customIcons = {
  monumento: {
    icon: 'images/monumento_ico.png'
  },
  hotel: {
    icon: 'images/hotel_ico.png'
  },
  restaurantes: {
    icon: 'images/restaurante_ico.png'
  },
  museus: {
    icon: 'images/museu_ico.png'
  }
};

var markerGroups = { "museus": [], "monumentos": [], "restaurantes": [], "hotel": []};
var gmarkers = [];

function load() {
var map = new google.maps.Map(document.getElementById("map"), {
center: new google.maps.LatLng(38.639104, -8.210413),
zoom: 12,
mapTypeId: 'roadmap'
});
var infoWindow = new google.maps.InfoWindow;



map.set('styles', [
{
zoomControl: false,
},
{
featureType: "road.highway",
elementType: "geometry.fill",
stylers: [
  { color: "#ffd986" }
]
},{
featureType: "road.arterial",
elementType: "geometry.fill",
stylers: [
  { color: "#9e574f" }
]
},{
featureType: "road.local",
elementType: "geometry.fill",
stylers: [
  { color: "#d0cbc0" },
  { weight: 1.1 }

]
}, {
featureType: 'road',
elementType: 'labels',
stylers: [
  { saturation: -100 }
]
}, {
featureType: 'landscape',
elementType: 'geometry',
stylers: [
  { hue: '#ffff00' },
  { gamma: 1.4 },
  { saturation: 82 },
  { lightness: 96 }
]
}, {
featureType: 'poi.school',
elementType: 'geometry',
stylers: [
  { hue: '#fff700' },
  { lightness: -15 },
  { saturation: 99 }
]
}
]);

downloadUrl("markers.xml",  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 type = markers[i].getAttribute("type");

var point = new google.maps.LatLng(
parseFloat(markers[i].getAttribute("lat")),
parseFloat(markers[i].getAttribute("lng")));
var html = "<b>" + name + "</b> <br/>" + address;
var icon = customIcons[type] || {};
var marker = new google.maps.Marker({
map: map,
position: point,
icon: icon.icon,
shadow: icon.shadow,
type: type
});

bindInfoWindow(marker, map, infoWindow, html);
}
});
}

function createMarker(point, name, address, type) {
var marker = new GMarker(point, customIcons[type]);
markerGroups[type].push(marker);
var html = "<b>" + name + "</b> <br/>" + address;
GEvent.addListener(marker, 'click', function() {
marker.openInfoWindowHtml(html);
});
return marker;
}

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();
    }
  } 
}

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() {}

这是HTML:

<div class="map_wrap">
<div class="siderbarmap">
<ul>
<input id="monumentoCheckbox" type="checkbox" onclick="toggleGroup('monumento')">
<input id="museusCheckbox" type="checkbox" onclick="toggleGroup('museus')">
<input id="restaurantesCheckbox" type="checkbox" onclick="toggleGroup('restaurantes')">
<input id="hotelCheckbox" type="checkbox" onclick="toggleGroup('hotel')">


</ul>

</div>

<div id="map" style="width:100%;height:585px; z-index: 1;"></div>

这就是XML。非常感谢您提供的任何帮助!

<markers>
<marker name="Castelo" address="Rua da Condessa de Valença" lat="38.64351973190569" lng="-8.216521812152905" type="monumento" />
<marker name="Anta 1 de Tourais" address="Estrada Nacional 114" lat="38.64260059929888" lng="-8.159376865959189" type="monumento" />


<marker name="Hotel da Ameira" address="Herdade da Ameira" lat="38.64109640475479" lng="-8.180432206726096" type="hotel" />
<marker name="Hotel Montemor" address="Avenida Gago Coutinho 8, 7050-248 Montemor-o-Novo" lat="38.64925541964039" lng="-8.216489625644726" type="hotel" />

<marker name="Restaurante Monte Alentejano" address="Av. Gago Coutinho 8" lat="38.6492329" lng="-8.216665" type="restaurantes" />
<marker name="Restaurante A Ribeira" address="Rua de São Domingos" lat="38.6347498199708" lng="-8.206468892765088" type="restaurantes" />

<marker name="Núcleo Museológico do Convento de S. Domingos" address="" lat="38.643139" lng="-8.212732" type="museus" />
<marker name="Centro Interpretativo do Castelo de Montemor-o-Novo" address="Rua Condessa de Valença" lat="38.64258748216167" lng="-8.21467108793263" type="museus" />


</markers>
地理编码

工作小提琴

您需要查看JavaScript控制台。

  • 修复了createMarker以使用v3语法并使用它的问题。
  • markerGroups [type]中的初始化数组
  • google.maps.Marker没有.isHidden方法,它是.getVisible。
  • google.maps.Marker没有.show()或.hide()方法,它是.setVisible。
  • 自实施“视觉刷新”以来,v3中没有标记阴影

(无法测试您的自定义标记,您未提供它们)

工作代码段:

var infoWindow = new google.maps.InfoWindow();
var customIcons = {
  monumento: {
    icon: 'http://maps.google.com/mapfiles/ms/icons/blue.png'
  },
  hotel: {
    icon: 'http://maps.google.com/mapfiles/ms/icons/green.png'
  },
  restaurantes: {
    icon: 'http://maps.google.com/mapfiles/ms/icons/yellow.png'
  },
  museus: {
    icon: 'http://maps.google.com/mapfiles/ms/icons/purple.png'
  }
};

var markerGroups = {
  "museus": [],
  "monumentos": [],
  "restaurantes": [],
  "hotel": []
};

function load() {
  var map = new google.maps.Map(document.getElementById("map"), {
    center: new google.maps.LatLng(38.639104, -8.210413),
    zoom: 12,
    mapTypeId: 'roadmap'
  });
  var infoWindow = new google.maps.InfoWindow();



  map.set('styles', [{
    zoomControl: false
  }, {
    featureType: "road.highway",
    elementType: "geometry.fill",
    stylers: [{
      color: "#ffd986"
    }]
  }, {
    featureType: "road.arterial",
    elementType: "geometry.fill",
    stylers: [{
      color: "#9e574f"
    }]
  }, {
    featureType: "road.local",
    elementType: "geometry.fill",
    stylers: [{
        color: "#d0cbc0"
      }, {
        weight: 1.1
      }

    ]
  }, {
    featureType: 'road',
    elementType: 'labels',
    stylers: [{
      saturation: -100
    }]
  }, {
    featureType: 'landscape',
    elementType: 'geometry',
    stylers: [{
      hue: '#ffff00'
    }, {
      gamma: 1.4
    }, {
      saturation: 82
    }, {
      lightness: 96
    }]
  }, {
    featureType: 'poi.school',
    elementType: 'geometry',
    stylers: [{
      hue: '#fff700'
    }, {
      lightness: -15
    }, {
      saturation: 99
    }]
  }]);

  //         downloadUrl("markers.xml", function (data) {
  var xml = xmlParse(xmlData);
  // 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 type = markers[i].getAttribute("type");

    var point = new google.maps.LatLng(
      parseFloat(markers[i].getAttribute("lat")),
      parseFloat(markers[i].getAttribute("lng")));
    var html = "<b>" + name + "</b> <br/>" + address;
    // var icon = customIcons[type] || {};
    var marker = createMarker(point, name, address, type, map);
    bindInfoWindow(marker, map, infoWindow, html);
  }
  // });
}

function createMarker(point, name, address, type, map) {
  var icon = customIcons[type] || {};
  var marker = new google.maps.Marker({
    map: map,
    position: point,
    icon: icon.icon,
    // shadow: icon.shadow,
    type: type
  });
  if (!markerGroups[type]) markerGroups[type] = [];
  markerGroups[type].push(marker);
  var html = "<b>" + name + "</b> <br/>" + address;
  bindInfoWindow(marker, map, infoWindow, html);
  return marker;
}

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);
    }
  }
}

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() {}
google.maps.event.addDomListener(window, 'load', load);

var xmlData = '<markers><marker name="Castelo" address="Rua da Condessa de Valença" lat="38.64351973190569" lng="-8.216521812152905" type="monumento" /><marker name="Anta 1 de Tourais" address="Estrada Nacional 114" lat="38.64260059929888" lng="-8.159376865959189" type="monumento" /><marker name="Hotel da Ameira" address="Herdade da Ameira" lat="38.64109640475479" lng="-8.180432206726096" type="hotel" /><marker name="Hotel Montemor" address="Avenida Gago Coutinho 8, 7050-248 Montemor-o-Novo" lat="38.64925541964039" lng="-8.216489625644726" type="hotel" /><marker name="Restaurante Monte Alentejano" address="Av. Gago Coutinho 8" lat="38.6492329" lng="-8.216665" type="restaurantes" /><marker name="Restaurante A Ribeira" address="Rua de São Domingos" lat="38.6347498199708" lng="-8.206468892765088" type="restaurantes" /><marker name="Núcleo Museológico do Convento de S. Domingos" address="" lat="38.643139" lng="-8.212732" type="museus" /><marker name="Centro Interpretativo do Castelo de Montemor-o-Novo" address="Rua Condessa de Valença" lat="38.64258748216167" lng="-8.21467108793263" type="museus" /></markers>';

function xmlParse(str) {
  if (typeof ActiveXObject != 'undefined' && typeof GetObject != 'undefined') {
    var doc = new ActiveXObject('Microsoft.XMLDOM');
    doc.loadXML(str);
    return doc;
  }

  if (typeof DOMParser != 'undefined') {
    return (new DOMParser()).parseFromString(str, 'text/xml');
  }

  return createElement('div', null);
}
html,
body,
#map,
#map_wrap {
  height: 100%;
  width: 100%;
}
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
<div class="map_wrap">
  <div class="siderbarmap">
    <ul>
      Monuments (blue)
      <input id="monumentoCheckbox" type="checkbox" onclick="toggleGroup('monumento')" checked="checked" />Museums (purple)
      <input id="museusCheckbox" type="checkbox" onclick="toggleGroup('museus')" checked="checked" />Restaurants (yellow)
      <input id="restaurantesCheckbox" type="checkbox" onclick="toggleGroup('restaurantes')" checked="checked" />Hotels (green)
      <input id="hotelCheckbox" type="checkbox" onclick="toggleGroup('hotel')" checked="checked" />
    </ul>
  </div>
  <div id="map" style="width:100%;height:585px; z-index: 1;"></div>
</div>

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

未显示Google Maps Marker Shadow

来自分类Dev

Google Maps信息窗口显示/隐藏操作

来自分类Dev

拖放Google Maps Marker

来自分类Dev

隐藏Google Maps密钥

来自分类Dev

未显示不同标记的Google Maps Customized Marker图标

来自分类Dev

Google Maps Drag Marker GeoCode

来自分类Dev

Google Maps Marker无法删除

来自分类Dev

Google Maps Drag Marker GeoCode

来自分类Dev

Google Maps Marker链接失败

来自分类Dev

在NgMap中显示和隐藏绘图控件-Google Maps

来自分类Dev

通过ClusterManager Google Maps Android显示的隐藏信息窗口

来自分类Dev

根据类别或群组隐藏/显示Google Maps标记

来自分类Dev

使用Twitter Bootstrap从隐藏区域显示Google Maps

来自分类Dev

Google Maps Heatmap未显示

来自分类Dev

Google Maps API停止显示

来自分类Dev

Google Maps Heatmap未显示

来自分类Dev

Google Maps Infowindow未显示

来自分类Dev

Google Maps Marker —设置背景颜色

来自分类Dev

iOS Google Maps Marker拖动事件

来自分类Dev

Google Maps Multi Marker不起作用

来自分类Dev

Google Maps Marker —设置背景颜色

来自分类Dev

在ImageMapType上水平重复Google Maps Marker

来自分类Dev

Android Google Maps Marker无法立即更新

来自分类Dev

Google Maps API Snap Marker To Polyline

来自分类Dev

Google Maps Marker标题不再显示为悬停工具提示

来自分类Dev

隐藏github的google maps api键

来自分类Dev

GOOGLE MAPS URL参数隐藏标签

来自分类Dev

Google Maps API标记内容默认隐藏

来自分类Dev

隐藏/显示基于滑块值和数据值的Google Maps标记