谷歌地图/ JavaScript - 显示某些标记 - MySQL后端 [英] Google Maps / JavaScript - display certain markers - MySQL backend
问题描述
我有一个在Google地图上显示标记的网页。
标记存储在MySQL DB中。
通过PHP将值检索到XML文件中。
I have a web page that is displaying markers on a Google Map. The markers are stored in a MySQL DB. The values are retrieved into an XML file via with PHP.
完整说明如下：
https://developers.google.com/maps/articles/phpsqlajax_v3
到目前为止一切顺利：
http://www.pizzazzle.co.uk /maps/phpAndMySQL.php
So far so good: http://www.pizzazzle.co.uk/maps/phpAndMySQL.php
我为我的两个类型的针添加了两个勾选框。
I have added two tick boxes for my two "types" of pin.
我想只显示属于被检查类型的相关标记。
I want to display only the relevant markers that belong to the types that are checked.
因此，如果勾选所有类型，则显示所有引脚。如果仅勾选bar，则只显示类型为bar的引脚。
So if all types are ticked all pins display. If only "bar" is ticked, only the pins with type "bar" should display.
我正试图弄清楚如何使其正常工作。主要是因为我不熟悉JavaScript - 我真的是一个PHP人。
I'm scratching my head trying to work out how to get this to function. Mainly because I'm not that familiar with JavaScript - I am a PHP guy really.
任何想法都会很棒。
目前的页面代码如下。我现在已经添加了完整的工作代码。
The code for the page so far is below. I've now added the full working code.
<!DOCTYPE html >
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>PHP/MySQL & Google Maps Example</title>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
//<![CDATA[
//set up globals
var gmarkers = [];
var infoWindow = [];
//set up icons
var customIcons = {
restaurant: {
icon: 'http://labs.google.com/ridefinder/images/mm_20_blue.png'
},
bar: {
icon: 'http://labs.google.com/ridefinder/images/mm_20_red.png'
}
};
//load function
function load() {
//initialise map
var map = new google.maps.Map(document.getElementById("map"), {
center: new google.maps.LatLng(47.6145, -122.3418),
zoom: 13,
mapTypeId: 'roadmap'
});
var infoWindow = new google.maps.InfoWindow;
//ok
//set up pins from xmlgen.php file
// Change this depending on the name of your PHP file
downloadUrl("xmlgen.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 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
});
marker.mycategory = type;
gmarkers.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() {}
// == shows all markers of a particular category, and ensures the checkbox is checked ==
function show(category) {
for (var i=0; i<gmarkers.length; i++) {
if (gmarkers[i].mycategory == category) {
gmarkers[i].setVisible(true);
}
}
// == check the checkbox ==
document.getElementById(category+"box").checked = true;
}
// == hides all markers of a particular category, and ensures the checkbox is cleared ==
function hide(category) {
for (var i=0; i<gmarkers.length; i++) {
if (gmarkers[i].mycategory == category) {
gmarkers[i].setVisible(false);
}
}
// == clear the checkbox ==
document.getElementById(category+"box").checked = false;
// == close the info window, in case its open on a marker that we just hid
infoWindow.close();
}
// == a checkbox has been clicked ==
function boxclick(box,category) {
if (box.checked) {
show(category);
} else {
hide(category);
}
}
//]]>
</script>
</head>
<body onload="load()">
<div id="map" style="width: 700px; height: 500px"></div>
<form action="#">
<input type="checkbox" id="restaurantbox" onclick="boxclick(this,'restaurant')" checked/>
<label>restaurant</label>
<input type="checkbox" id="barbox" onclick="boxclick(this,'bar')" checked/>
<label>bar</label>
</form>
</body>
</html>
推荐答案
您目前的问题是唯一的标记在你的代码是downloadUrl回调函数的本地代码，它是来自的xml对象数组：
Your problem at present is that the only "markers" in you code is local to the downloadUrl callback function, it is the array of xml objects that comes from:
var markers = xml.documentElement.getElementsByTagName（marker） ;
var markers = xml.documentElement.getElementsByTagName("marker");
boxclick函数是一个HTML onclick函数，在全局范围内运行，你需要一个google.maps.Marker对象数组（全局范围） ）调用hide / show on。
The boxclick function, which is a HTML onclick function, runs in the global scope, and you need an array of google.maps.Marker objects in that (global scope) to call hide/show on.
-
添加全局gmarkers数组（在任何函数之外）：
add a global gmarkers array (outside of any function):
var gmarkers = [];
var infoWindow = new google.maps.InfoWindow({}); // update, global infoWindow
将google.maps.Markers推送到该阵列创建它们：
push the google.maps.Markers onto that array as you create them:
// Change this depending on the name of your PHP file
downloadUrl("xmlgen.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 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
});
marker.mycategory = type;
gmarkers.push(marker);
bindInfoWindow(marker, map, infoWindow, html);
}
更改隐藏和显示函数以使用gmarkers数组：
change your hide and show functions to use the gmarkers array:
// == shows all markers of a particular category, and ensures the checkbox is checked ==
function show(category) {
for (var i=0; i<gmarkers.length; i++) {
if (gmarkers[i].mycategory == category) {
gmarkers[i].setVisible(true);
}
}
// == check the checkbox ==
document.getElementById(category+"box").checked = true;
}
// == hides all markers of a particular category, and ensures the checkbox is cleared ==
function hide(category) {
for (var i=0; i<gmarkers.length; i++) {
if (gmarkers[i].mycategory == category) {
gmarkers[i].setVisible(false);
}
}
// == clear the checkbox ==
document.getElementById(category+"box").checked = false;
// == close the info window, in case its open on a marker that we just hid
infoWindow.close();
}
这篇关于谷歌地图/ JavaScript - 显示某些标记 - MySQL后端的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
