我无法将保存的标记显示在地图上。在我的浏览器中打开时，我的XML文件正确显示（尽管我在顶部收到一条消息“此XML文件似乎没有与之关联的任何样式信息。文档树如下所示。”）
以下是我的xml进程文件的代码：
<?php
require_once'db_connect.php';
function parseToXML($htmlStr)
{
$xmlStr=str_replace('<','<',$htmlStr);
$xmlStr=str_replace('>','>',$xmlStr);
$xmlStr=str_replace('"','"',$xmlStr);
$xmlStr=str_replace("'",''',$xmlStr);
$xmlStr=str_replace("&",'&',$xmlStr);
return $xmlStr;
}
// Opens a connection to a MySQL server
$connection=mysql_connect ($db_host, $db_username, $db_pass);
if (!$connection) {
die('Not connected : ' . mysql_error());
}
// Set the active MySQL database
$db_selected = mysql_select_db($db_name, $connection);
if (!$db_selected) {
die ('Can\'t use db : ' . mysql_error());
}
// Select all the rows in the markers table
$query = "SELECT * FROM divesites_tbl WHERE 1";
$result = mysql_query($query);
if (!$result) {
die('Invalid query: ' . mysql_error());
}
header("Content-type: text/xml");
// Start XML file, echo parent node
echo '<markers>';
// Iterate through the rows, printing XML nodes for each
while ($row = @mysql_fetch_assoc($result)){
// ADD TO XML DOCUMENT NODE
echo '<marker ';
echo 'site_name="' . parseToXML($row['site_name']) . '" ';
echo 'site_country="' . parseToXML($row['site_country']) . '" ';
echo 'site_lat="' . $row['site_lat'] . '" ';
echo 'site_lng="' . $row['site_lng'] . '" ';
echo 'site_dive_type="' . $row['site_dive_type'] . '" ';
echo '/>';
}
// End XML file
echo '</markers>';
?>
和javascript＆amp;我的地图页面的相关HTML：
<script>
//<![CDATA[
var styles = [{
stylers: [{
hue: "#00ffe6"
}, {
saturation: -20
}]
}, {
featureType: 'water',
elementType: 'geometry.fill',
stylers: [{
color: '#010159'
}]
}, {
featureType: "water",
elementType: 'labels',
stylers: [{
color: '#ffffff'
}, {
strokeColor: '#000000'
}]
}, {
featureType: "water",
elementType: 'labels.text.stroke',
stylers: [{
visibility: 'off'
}]
}, {
featureType: 'landscape',
elementType: 'all',
stylers: [{
color: '#0061a3'
}]
}, {
featureType: "road",
stylers: [{
visibility: "off"
}]
}, {
featureType: "poi",
stylers: [{
visibility: "off"
}]
}, {
featureType: "transit",
stylers: [{
visibility: "off"
}]
}, {
featureType: "administrative",
stylers: [{
visibility: "off"
}]
}, {
featureType: "administrative",
elementType: 'labels',
stylers: [{
visibility: "on"
}, {
color: "#c9c9c9"
}]
}, {
featureType: "administrative",
elementType: 'labels.text.stroke',
stylers: [{
visibility: 'off'
}]
}];
var map;
var marker;
//var infowindow;
function initialize() {
var latlng = new google.maps.LatLng(31.267694, 17.341919);
var mapOptions = {
zoom: 3,
center: latlng,
minZoom: 3,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById('google_map_div'), mapOptions);
map.setOptions({
styles: styles
});
} //
var infoWindow = new google.maps.InfoWindow;
//var customIcons = {
//Wreck Dive: {
//icon: 'images/marker.png'
//}
//};
function load() {
// Change this depending on the name of your PHP file
downloadUrl("xml_output.php", function (data) {
var xml = data.responseXML;
var markers = xml.documentElement.getElementsByTagName("marker");
for (var i = 0; i < markers.length; i++) {
var site_name = markers[i].getAttribute("site_name");
var site_country = markers[i].getAttribute("site_country");
var site_dive_type = markers[i].getAttribute("site_dive_type");
var point = new google.maps.LatLng(
parseFloat(markers[i].getAttribute("site_lat")),
parseFloat(markers[i].getAttribute("site_lng")));
var html = "<b>" + site_name + "</b><br/>" + site_country;
//var icon = customIcons[site_dive_type] || {};
var marker = new google.maps.Marker({
map: map,
position: point
});
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() {}
google.maps.event.addDomListener(window, 'load', initialize);
//]]>
</script>
<body onload="load()">
答案 0 :(得分：0)
所以我设法修复了JavaScript范围/结构中的问题。通过将所有内容放在初始化函数中，并重新编写代码以获取标记图像的路径，我修复了问题
下面是我的工作代码结构，用于从数据库中获取标记并使用PHP显示XML输出。请注意onload =“initialize（）”位于HTML
的body标签上创建新标记的代码也在这里
var map;
var marker;
var infowindow;
function initialize() {
var latlng = new google.maps.LatLng(31.267694, 17.341919);
var mapOptions = {
zoom: 3,
center: latlng,
minZoom:3,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById('google_map_div'), mapOptions);
map.setOptions({styles: styles});
google.maps.event.addListener(map, "click", function(event) {
marker = new google.maps.Marker({
position: event.latLng,
map: map,
});
// click to create a new marker
marker_position = marker.getPosition();
marker_position_lat = marker.getPosition().lat();
marker_position_lng = marker.getPosition().lng();
var html = "this is the html to be placed in the infowindow";
infowindow = new google.maps.InfoWindow({
content: html
});
google.maps.event.addListener(marker, "click", function() {
infowindow.open(map, marker);
});
}); //click to add site
// display markers
var InfoWindow = new google.maps.InfoWindow;
downloadUrl ("xml_output.php", function(data) {
var xml = data.responseXML;
var markers = xml.documentElement.getElementsByTagName("marker");
for (var i = 0; i < markers.length; i++) {
var site_name = markers[i] .getAttribute("site_name");
var site_country = markers[i] .getAttribute("site_country");
var point = new google.maps.LatLng(
parseFloat(markers[i] .getAttribute("site_lat")),
parseFloat(markers[i] .getAttribute("site_lng")));
var html = "<b>" + site_name + "</b> </br/>" + site_country;
var markericon ='images/icon.png';
var marker = new google.maps.Marker({
map: map,
position: point,
icon: markericon
});
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() {}
}
</script>
<body onload='initialize()'>