[英]Toggle Markers with Google Maps API (XML)
我一直在为此扯头发。 我试图通过单击按钮来切换地图上的标记。 我在网上看到的示例使用JSON,而我使用XML提取数据,这有什么区别吗?
function load() {
var myLatlng = new google.maps.LatLng(51.507664, -0.150174);
var mapOptions = {
center: myLatlng,
zoom: 15,
scrollwheel: true,
zoomControl: false,
mapTypeControl: false,
panControl: false,
streetViewControl: false,
styles: stylesArray,
mapTypeId: 'roadmap' }
var map = new google.maps.Map(document.getElementById("map"), mapOptions);
var infoWindow = new google.maps.InfoWindow;
downloadUrl("inc/map.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,
title: name,
visible: true,
type: type,
icon: icon.icon
});
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() {}
XML文件正与此文件一起创建:
$map = "fW2sxnzi";
// Start XML file, create parent node
$dom = new DOMDocument("1.0");
$node = $dom->createElement("markers");
$parnode = $dom->appendChild($node);
// Opens a connection to a MySQL server
$connection=mysql_connect ('localhost', $username, $password);
if (!$connection) { die('Not connected : ' . mysql_error());}
// Set the active MySQL database
$db_selected = mysql_select_db($database, $connection);
if (!$db_selected) {
die ('Can\'t use db : ' . mysql_error());
}
// Select all the rows in the markers table
$query = "SELECT * FROM places WHERE map_id = '$map'";
$result = mysql_query($query);
if (!$result) {
die('Invalid query: ' . mysql_error());
}
header("Content-type: text/xml");
// Iterate through the rows, adding XML nodes for each
while ($row = @mysql_fetch_assoc($result)){
// ADD TO XML DOCUMENT NODE
$node = $dom->createElement("marker");
$newnode = $parnode->appendChild($node);
$newnode->setAttribute("name",$row['name']);
$newnode->setAttribute("address", $row['address']);
$newnode->setAttribute("lat", $row['lat']);
$newnode->setAttribute("lng", $row['lng']);
$newnode->setAttribute("type", $row['type']);
}
echo $dom->saveXML();
我正在从数据库中提取标记及其详细信息,并希望通过“类型”(即1、2、3或4)切换它们。
所以,这是在Ext Js中,但我想您会明白的。
我做了一个全局数组:
var fireDeptMarkers = [];
然后我添加了一个复选框,但同样适用于按钮或切换:
{
xtype: 'checkbox',
fieldLabel: 'Fire Departments',
itemId: 'fireDepartments',
labelWidth: 200,
width: 300
},
我使用MVC模型,因此这里是控制器。 而不是内联地执行此操作,我只是使用它来调用控制器中的函数:
'#fireDepartments': {
change: this.fireDepartmentsChanged
},
这是实际功能,可以在其中添加或删除标记。 创建标记后的最后一部分是将标记推入全局fireDemartments数组中的位置,然后可以遍历该数组并将setmap设置为null以隐藏它们。
在查看完此内容后,我要回去修复的一件事是,每次单击按钮添加商店时,我都会加载商店。 我应该把它放在已经加载的位置,以仅使用现有数据。 但是我认为这涵盖了我如何在单击按钮时添加和删除标记。
fireDepartmentsChanged: function (checked) {
if (checked.value == true) {
var a = Ext.getStore('fireDepartment_s');
a.load({
callback: function () {
Ext.each(Ext.getStore('fireDepartment_s').data.items, function (record) {
var latitude = record.data.location_lat;
var longitude = record.data.location_lng;
var address = record.data.address;
var department = record.data.department;
var contentString = '<body><p><b>' + department + '</b></p><p> ' + address + '</p>' +
'<button onclick="streetView(' + latitude + ',' + longitude + ')">Street View</button><p id="streetView"></p> ' +
'</body>';
var infowindow = new google.maps.InfoWindow({
content: contentString,
});
var marker = new google.maps.Marker({
position: new google.maps.LatLng(latitude, longitude),
icon: 'resources/images/fireDeptIcon.png',
map: map
});
google.maps.event.addListener(marker, 'click', function () {
infowindow.open(map, marker);
});
fireDeptMarkers.push(marker);
});
}
});
}
else if (checked.value === false) {
for (i = 0; i < fireDeptMarkers.length; i++) {
fireDeptMarkers[i].setMap(null);
}
}
},
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.