Question

我已经使用了版本2很长一段时间，并决定是时候转到版本3作为主要网站更新的一部分了。我将所有代码都基于“Mike Williams' tutorial The Basics - Part 3: Loading the data from an XML file translated to v3”。经过几个小时的微调，我完成了所有工作，包括聚类和自定义标记。

我是一个非常快乐的兔子，并热衷于展示它。然后令我失望的是，我发现它在IE或Firefox中都不起作用（我在Chrome中测试过它）。

我很清楚谷歌地图API并不是一件容易的事情，但有什么理由说我应该在不同的浏览器中使用这种行为？通过转到www.littlehotels.co.uk/new/并点击“地图搜索”可以看到地图。代码在这里：

<!DOCTYPE html>
<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>Little Hotels of Spain - Google Map</title>
<meta name="description" content="Little Hotels provides maps showing the location of hotels, using Google Maps to create both a street/road map and a satellite image.">
<meta name="keywords" content="Little Hotels, Little Hotels of Spain, Spain, mainland spain, balearic, balearics, canary, canaries, small, hotel, hotels, map, google map, holiday, holidays">
<style type="text/css">
html { height: 100% }
body{ height: 100%; margin: 0; padding: 0; font-family: Arial, Helvetica, sans-serif; font-size:12px; color:#333333;}
a:link, a:visited, a:hover {color: #FF6600; text-decoration: none; font-weight: bold;}
h1{font-size: 16px; color: #2B8CB9; font-weight: bold;}
#content{padding: 0 5px 0; width: 640px;}
#map_canvas { height: 100% }
.verdana{font-family:Verdana, Arial, Helvetica, sans-serif; font-size: 9px; color: #666666;}
</style>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> 
<script type="text/javascript" src="http://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerclusterer/src/markerclusterer_compiled.js"></script>
<script type="text/javascript" src="../js/downloadxml.js"></script>
<script type="text/javascript"> 
//<![CDATA[
      var gmarkers = []; 

     // global "map" variable
      var map = null;
      var markerclusterer = null;

  var image = new google.maps.MarkerImage('../images/hotel_icon.png',
      new google.maps.Size(32, 37),
      new google.maps.Point(0,0),
      new google.maps.Point(16, 35));
  var shadow = new google.maps.MarkerImage('../images/hotel_shadow.png',
      new google.maps.Size(51, 37),
      new google.maps.Point(0,0),
      new google.maps.Point(16, 35));

// A function to create the marker and set up the event window function 
function createMarker(latlng, name, html) {
    var contentString = html;
    var marker = new google.maps.Marker({
        position: latlng,
        icon: image,
        shadow: shadow
        });

    google.maps.event.addListener(marker, 'click', function() {
        infowindow.setContent(contentString); 
        infowindow.open(map,marker);
        });

    // save the info we need to use later for the side_bar
    gmarkers.push(marker);
}

// This function picks up the click and opens the corresponding info window
function myclick(i) {
  google.maps.event.trigger(gmarkers[i], "click");
}

function initialize() {
      var lat = 0;
      var lng = 0;
      var zoomzoom = 0;
      var query = location.search.substring(1);
      var pairs = query.split("&");
      for (var i=0; i<pairs.length; i++) {
    var pos = pairs[i].indexOf("=");
    var argname = pairs[i].substring(0,pos).toLowerCase();
    var value = pairs[i].substring(pos+1).toLowerCase();
        if (argname == "lat") {lat = parseFloat(value);}
        if (argname == "lng") {lng = parseFloat(value);}
        if (argname == "zoom") {zoomzoom = parseInt(value);}
      }
 var thisLatlng = new google.maps.LatLng(lat, lng);
  var myOptions = {
center: thisLatlng,
zoom: zoomzoom,
mapTypeId: google.maps.MapTypeId.ROADMAP,
   streetViewControl: false,
   zoomControl: true,
   zoomControlOptions: {
    style: google.maps.ZoomControlStyle.SMALL
   }
   }

  map = new google.maps.Map(document.getElementById("map_canvas"),
                                myOptions);

  google.maps.event.addListener(map, 'click', function() {
        infowindow.close();
        });

      downloadUrl("php-to-xml.php", function(doc) {
        var xmlDoc = xmlParse(doc);
        var markers = xmlDoc.documentElement.getElementsByTagName("marker");
        for (var i = 0; i < markers.length; i++) {

          var lat = parseFloat(markers[i].getAttribute("lat"));
          var lng = parseFloat(markers[i].getAttribute("lng"));
          var point = new google.maps.LatLng(lat,lng);
          var html=markers[i].getAttribute("html");
          var hotel=markers[i].getAttribute("hotel");

          var marker = createMarker(point,hotel,html);
        }

var clusterStyles = [
  {
    opt_textColor: '#5a7aba',
    url: '../images/cluster_icon.png',
    height: 40,
    width: 40
  }
];
        var mcOptions = {gridSize: 35, maxZoom: 8, styles: clusterStyles};
        markerCluster = new MarkerClusterer(map, gmarkers,mcOptions);
      });
    }

var infowindow = new google.maps.InfoWindow(
  { 
    size: new google.maps.Size(300,50)
  });

//]]>
</script> 
</head> 

<body onload="initialize()"> 
<div id="content">
<h1>Little Hotels Map Search</h1>
<span class="verdana">Click on the icons for more information or use the Google controls to zoom, scroll, pan and change view.<br /><br /></span>
<table border=1 bordercolor="#666666">
      <tr>
        <td>
<div id="map_canvas" style="width: 640px; height: 450px"></div>
        </td>
      </tr>
</table>
<br />
</div>
</body> 
</html>

感谢任何人提供的建议。

Answer 1

返回的XML格式不正确。它包含：

pretty "pueblos blancos"

您必须使用"作为双引号或CDATA部分。

因此，您将无法将返回的数据解析为XML

Answer 2

我在Firefox中收到错误：

错误：格式不正确源文件：http://www.littlehotels.co.uk/new/maps/php-to-xml.php 行：1，专栏：1722

使用XML验证器进行检查。

Answer 3

Molle博士，这是PHP脚本：

    <?php
header('Content-Type: text/xml');
header('charset:UTF-8');

require_once('../Connections/MySQL_extranet.php'); 

function parseToXML($htmlStr) 
{ 
$xmlStr=str_replace('<','&lt;',$htmlStr); 
$xmlStr=str_replace('>','&gt;',$xmlStr); 
$xmlStr=str_replace('"','&quot;',$xmlStr); 
$xmlStr=str_replace("'",'&#39;',$xmlStr); 
$xmlStr=str_replace("&",'&amp;',$xmlStr); 
$xmlStr=str_replace("ñ",'&ntilde;',$xmlStr); 
return $xmlStr; 
} 

mysql_select_db($database_MySQL_extranet, $MySQL_extranet);
// Select all the rows in the markers table
$query = "SELECT hid, hotel, lat, lng, picture, summary FROM ex_hotel WHERE country = 'spain'";
$result = mysql_query($query);
if (!$result) {
  die('Invalid query: ' . mysql_error());
}

// Start XML file, echo parent node
echo "<?xml version=\"1.0\" encoding=\"UTF-8\"?>"; 

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 ' html="&lt;img src=&quot;../images/' . $row['picture'] . '&quot; align=&quot;left&quot; height=&quot;108&quot; width=&quot;155&quot; style=&quot;margin-right:8px;&quot;&gt; &lt;div style=&quot;width:320px&quot;&gt; &lt;a href=&quot;' . 'http://www.littlehotels.co.uk/new/spain/' . $row['hid'] . '.php&quot; target=&quot;_parent&quot; &gt;' . parseToXML($row['hotel']) . '&lt;/a&gt; &lt;br&gt;&lt;span class=&quot;verdana&quot;&gt;&lt;br&gt;'.parseToXML($row['summary']).'&lt;/span&gt;&lt;/div&gt;"';
  echo ' lat="' . $row['lat'] . '"';
  echo ' lng="' . $row['lng'] . '"';
  echo ' />';
}

// End XML file
echo '</markers>';
?>

parsetoXML函数应该可以解决我原来的问题。它适用于引号，但不适用于ñ字符。我已尝试用ñ＆amp; 0141替换ñ;和n。他们都没有工作。但是，我刚刚决定避免使用ñ。当我有更多时间时，我会再回来解决这个问题。

非常感谢我指出了正确的方向。

Answer 4

刚刚调查过同样的问题。无论如何，自定义图标阴影功能似乎正在被删除。

＆＃34;在视觉刷新中删除了所有阴影。以编程方式指定的任何阴影都将被忽略。＆＃34;

https://developers.google.com/maps/documentation/javascript/basics#VisualRefreshChanges

Google Maps API V3标记未显示

4 个答案: