![](/img/trans.png)
[英]Error hiding markers on google map javascript api zoom 3.7
[英]Google Map api markers Javascript
我有一個運行時的javascript,它將從我已設置的MYSQL表中構建XML文件。 它可以正常工作,並且按計划繪制所有標記。 現在,我嘗試使用一些下拉過濾器。 我已經瀏覽了許多示例,但是不能使其適用於我的示例。
我為下拉菜單添加了變量,如下所示:
var MeetingType = document.getElementById("Meeting_Type");
var type = MeetingType.options[MeetingType.selectedIndex].text;
var DayofMeeting = document.getElementById("Day_of_Meeting");
var day = DayofMeeting.options[DayofMeeting.selectedIndex].text;
var TimeofMeeting = document.getElementById("Time_of_Meeting");
var time = TimeofMeeting.options[TimeofMeeting.selectedIndex].text;
現在,我試圖在創建標記后創建一個數組,以便可以像這樣過濾它們:
for (var i = 0; i < placemarkers.length; i++) {
if (placemarkers[i].type==type&&placemarkers[i].day==day&&placemarkers[i].time==time){
placemarkers[i].setMap(MYMAP.map);
}else{
clearOverlays();
mymarkers=[]
}
}
}
這是整個代碼。 誰能幫助我將這些值放入數組? 我的沒有工作。
$(document).ready(function() {
$("#map").css({
height: 500,
width: 600
});
var myLatLng = new google.maps.LatLng(43.653823, -79.382843);
MYMAP.init('#map', myLatLng, 11);
$("#showmarkers").click(function(e){
MYMAP.placeMarkers('include/xml.php');
});
});
var MYMAP = {
map: null,
bounds: null
}
MYMAP.init = function(selector, latLng, zoom) {
var myOptions = {
zoom:zoom,
center: latLng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
this.map = new google.maps.Map($(selector)[0], myOptions);
this.bounds = new google.maps.LatLngBounds();
}
var markerfilter = new Array();
MYMAP.placeMarkers = function(filename) {
$.get(filename, function(xml){
$(xml).find("marker").each(function(){
var name = $(this).find('name').text();
var address = $(this).find('address').text();
var address2 = $(this).find('address2').text();
var Meeting_Type = $(this).find('Meeting_Type').text();
var Time_of_Meeting = $(this).find('Time_of_Meeting').text();
var Day_of_Meeting = $(this).find('Day_of_Meeting').text();
var Open_Meeting = $(this).find('Open_Meeting').text();
var Wheelchair = $(this).find('Wheelchair').text();
var ASL = $(this).find('ASL').text();
var Comments = $(this).find('Comments').text();
markerfilter.push(marker);
var MeetingType = document.getElementById("Meeting_Type");
var type = MeetingType.options[MeetingType.selectedIndex].text;
var DayofMeeting = document.getElementById("Day_of_Meeting");
var day = DayofMeeting.options[DayofMeeting.selectedIndex].text;
var TimeofMeeting = document.getElementById("Time_of_Meeting");
var time = TimeofMeeting.options[TimeofMeeting.selectedIndex].text;
// create a new LatLng point for the marker
var lat = $(this).find('lat').text();
var lng = $(this).find('lng').text();
var point = new google.maps.LatLng(parseFloat(lat),parseFloat(lng));
// extend the bounds to include the new point
MYMAP.bounds.extend(point);
var marker = new google.maps.Marker({
position: point,
map: MYMAP.map
});
var infoWindow = new google.maps.InfoWindow();
var html='<b><u>'+name+'</b></u><br />'+address2+'<br />'+address+'<br />'+Meeting_Type+', '+Time_of_Meeting+', '+Day_of_Meeting+'<br />Open Meeting: '+Open_Meeting+'<br />Wheelchair Accessible: '+Wheelchair+'<br />ASL: '+ASL+'<br />Comments: '+Comments;
google.maps.event.addListener(marker, 'click', function() {
infoWindow.setContent(html);
infoWindow.open(MYMAP.map, marker);
});
MYMAP.map.fitBounds(MYMAP.bounds);
});
});
}
我已經對代碼進行了編輯,以反映所做的一些更改,但仍無法正常工作。
如果有幫助,請嘗試使用jQuery Map Marker插件,因為它具有良好的靈活性/以下是該鏈接
在不了解其余代碼的情況下,最直接的方法是
var marker = new google.maps.Marker({
position: point,
map: MYMAP.map
});
mymarkers.push(marker);
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.