Warning: file_get_contents(/data/phpspider/zhask/data//catemap/9/javascript/381.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Javascript 谷歌地图标记显示/隐藏_Javascript_Google Maps - Fatal编程技术网

Javascript 谷歌地图标记显示/隐藏

Javascript 谷歌地图标记显示/隐藏,javascript,google-maps,Javascript,Google Maps,我尝试了几个代码,并搜索了很多答案,但我无法让这个工作。我对Javascript知之甚少,所以我希望有人能帮我解决这个问题,因为我对这个问题失去了理智。标记没有切换,只是什么都没有发生 var customIcons = { monumento: { icon: 'images/monumento_ico.png' }, hotel: { icon: 'images/hotel_ico.png' }, restaurantes: { icon

我尝试了几个代码,并搜索了很多答案,但我无法让这个工作。我对Javascript知之甚少,所以我希望有人能帮我解决这个问题,因为我对这个问题失去了理智。标记没有切换,只是什么都没有发生

     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() {}
var自定义图标={
纪念碑:{
图标:“images/montero_ico.png”
},
酒店:{
图标:“images/hotel_ico.png”
},
餐厅:{
图标:“images/restaurant_ico.png”
},
博物馆:{
图标:“images/museu_ico.png”
}
};
var markerGroups={“博物馆”:[],“纪念碑”:[],“餐厅”:[],“酒店”:[]};
var gmarkers=[];
函数加载(){
var map=new google.maps.map(document.getElementById(“map”){
中心:新google.maps.LatLng(38.639104,-8.210413),
缩放:12,
mapTypeId:“路线图”
});
var infoWindow=new google.maps.infoWindow;
map.set('样式'[
{
动物控制:错误,
},
{
功能类型:“道路。公路”,
elementType:“几何体.填充”,
样式:[
{颜色:#ffd986}
]
},{
功能类型:“道路.干线”,
elementType:“几何体.填充”,
样式:[
{颜色:#9e574f}
]
},{
featureType:“road.local”,
elementType:“几何体.填充”,
样式:[
{颜色:#d0cbc0},
{重量:1.1}
]
}, {
功能类型:“道路”,
elementType:'标签',
样式:[
{饱和度:-100}
]
}, {
功能类型:“景观”,
elementType:“几何体”,
样式:[
{色调:'#ffff00'},
{gamma:1.4},
{饱和度:82},
{亮度:96}
]
}, {
功能类型:“poi.school”,
elementType:“几何体”,
样式:[
{色调:'#fff700'},
{亮度:-15},
{饱和:99}
]
}
]);
下载URL(“markers.xml”,函数(数据){
var xml=data.responseXML;
var markers=xml.documentElement.getElementsByTagName(“标记”);
对于(var i=0;i“+地址;
var icon=customIcons[type]| |{};
var marker=new google.maps.marker({
地图:地图,
位置:点,,
icon:icon.icon,
shadow:icon.shadow,
类型:类型
});
bindInfoWindow(标记、地图、infoWindow、html);
}
});
}
函数createMarker(点、名称、地址、类型){
var标记=新的GMarker(点,自定义图标[类型]);
MarkerGroup[类型]。推送(标记);
var html=“”+名称+”
“+地址; addListener(标记'click',函数(){ marker.openInfoWindowHtml(html); }); 返回标记; } 功能切换组(类型){ 对于(var i=0;i
这是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语法的问题,并使用了它
  • MarkerGroup[type]中已初始化的数组
  • 对于it is.getVisible,没有
    .ishiden
    方法
  • a没有.show()或.hide()方法,它是.setVisible
  • 自“视觉刷新”实施以来,v3中没有标记阴影
(无法测试自定义标记,您没有提供它们)

工作代码片段:

var infoWindow=new google.maps.infoWindow();
var customIcons={
纪念碑:{
图标:'http://maps.google.com/mapfiles/ms/icons/blue.png'
},
酒店:{
图标:'http://maps.google.com/mapfiles/ms/icons/green.png'
},
餐厅:{
图标:'http://maps.google.com/mapfiles/ms/icons/yellow.png'
},
博物馆:{
图标:'http://maps.google.com/mapfiles/ms/icons/purple.png'
}
};
var markerGroups={
“博物馆”:[],
“纪念碑”:[],
“餐厅”:[],
“酒店”:[]
};
函数加载(){
var map=new google.maps.map(document.getElementById(“map”){
中心:新google.maps.LatLng(38.639104,-8.210413),
缩放:12,
mapTypeId:“路线图”
});
var infoWindow=new google.maps.infoWindow();
map.set('样式'[{
动物控制:错误
}, {
功能类型:“道路。公路”,
elementType:“几何体.填充”,
样式:[{
颜色:“ffd986”
}]
}, {
功能类型:“道路.干线”,
elementType:“几何体.填充”,
样式:[{
颜色:“9e574f”
}]
}, {
featureType:“road.local”,
elementType:“几何体.填充”,
样式:[{
颜色:“d0cbc0”
}, {
重量:1.1
}
]
}, {
功能类型:“道路”,
elementType:'标签',
样式:[{
饱和度:-100
}]
}, {
功能类型:“景观”,
elementType:“几何体”,
样式:[{
色调:“#ffff00”
}, {
伽马:1.4
}, {
饱和度:82
}, {
亮度:96
}]
}, {
功能类型:“poi.school”,
elementType:“几何体”,
样式:[{
色调:“#fff700”
}, {
亮度:-15
}, {
饱和度:99
}]
}]);
//下载URL(“markers.xml”,函数(数据){
var xml=xmlParse(xmlData);
//var xml=data.responseXML;
var markers=xml.documentElement.getElementsByTagName(“标记”);
对于(var i=0;i