Question

我需要帮助来创建侧边栏。我有部分工作，但有2个问题需要解决。首先，侧边栏仅显示最后的标记信息。我可能没有将一些侧边栏编码放在适当的位置。其次，（可能是第一个问题的一部分），使用Firefox时会显示所有图标，但使用IE8时，除了最后一个图标外，所有图标都会出现。要查看地图和代码，首先转到http://www.askdata.net/propmap/mapdata.php并进行演示（将地址粘贴到文本区域），然后将显示地图页面。再次感谢。代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-    strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml">

<h1>'Comparables Map'</h1><!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>Comparables Map</title>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>

<script type="text/javascript">
//<![CDATA[

var customIcons = {
      Subject: {
    icon: 'http://askdata.net/compmap/mapicons/sub.png',
    //shadow: 'http://labs.google.com/ridefinder/images/mm_20_shadow.png'
  },
      Comp1: {
    icon: 'http://askdata.net/compmap/mapicons/c1.png',
    //shadow: 'http://labs.google.com/ridefinder/images/mm_20_shadow.png'
  },
  Comp2: {
    icon: 'http://askdata.net/compmap/mapicons/c2.png',
    //shadow: 'http://labs.google.com/ridefinder/images/mm_20_shadow.png'
  },
  Comp3: {
    icon: 'http://askdata.net/compmap/mapicons/c3.png',
    //shadow: 'http://labs.google.com/ridefinder/images/mm_20_shadow.png'
  },
  Comp4: {
    icon: 'http://askdata.net/compmap/mapicons/c4.png',
    //shadow: 'http://labs.google.com/ridefinder/images/mm_20_shadow.png'
  },
  Comp5: {
    icon: 'http://askdata.net/compmap/mapicons/c5.png',
    //shadow: 'http://labs.google.com/ridefinder/images/mm_20_shadow.png'
  },
  Comp6: {
    icon: 'http://askdata.net/compmap/mapicons/c6.png',
    //shadow: 'http://labs.google.com/ridefinder/images/mm_20_shadow.png'
  } 
   };

function load() {
  var map = new google.maps.Map(document.getElementById("map"), {
    center: new google.maps.LatLng(41.95, -87.65),
    zoom: 13,
    mapTypeId: 'roadmap'

  });
  var infoWindow = new google.maps.InfoWindow;



  // Change this depending on the name of your PHP file
  downloadUrl("genxml2.php", function(data) {
    var xml = data.responseXML;
    var markers = xml.documentElement.getElementsByTagName("marker");
    for (var i = 0; i < markers.length; i++) {
      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>" + type + "</b> <br/>" + address;
      var icon = customIcons[type] || {};
      var marker = new google.maps.Marker({
        map: map,
        position: point,
        draggable: true,
        icon: icon.icon
        //shadow: icon.shadow
      });




      bindInfoWindow(marker, map, infoWindow, html);


       var sidebar = document.getElementById('sidebar');
   sidebar.innerHTML = '';
   if (markers.length == 0) {
     sidebar.innerHTML = 'No results found.';
     map.setCenter(new GLatLng(41, -87), 4);
     return;
   }

     var sidebarEntry = createSidebarEntry(marker, type, address);
     sidebar.appendChild(sidebarEntry);




    }
  });

  function createSidebarEntry(marker, type, address) {


  var div = document.createElement('div');
  var html = '<b>' + type + '</b>' + address;
  div.innerHTML = html;
  div.style.cursor = 'pointer';
  div.style.marginBottom = '5px'; 
  google.maps.event.addDomListener(div, 'click', function() {
    google.maps.event.trigger(marker, 'click');
  });
  google.maps.event.addDomListener(div, 'mouseover', function() {
    div.style.backgroundColor = '#eee';
  });
  google.maps.event.addDomListener(div, 'mouseout', function() {
    div.style.backgroundColor = '#fff';
  });
  return div;
}


}



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>

</head>

<body onload="load()">

<br/>    
<br/>
<div style="width:1200px; font-family:Arial, 
sans-serif; font-size:11px; border:1px solid black">
<table> 
<tbody> 
  <tr id="cm_mapTR">

    <td width="200" valign="top"> <div id="sidebar" style="overflow: auto; height: 700px;     font-size: 11px; color: #000"></div>

    </td>
    <td> <div id="map" style="overflow: hidden; width: 1000px; height: 700px"></div> </td>

  </tr> 
  </tbody>
  </table>

  </div>    


  </body>

  </html>

Answer 1

IE不喜欢结构末尾的逗号，例如图标后面的逗号：

Comp5: {
    icon: 'http://askdata.net/compmap/mapicons/c5.png',
  }

您正在混合Google Maps API 2和3代码。例如使用API 3声明latlng对象：

center: new google.maps.LatLng(41.95, -87.65)

但是你在这里使用API 2：

map.setCenter(new GLatLng(41, -87), 4);

Answer 2

以下是您的问题： sidebar.innerHTML = '';

因为它在循环内，所以每次循环时，它都会删除前一个条形条目。

在function load() {之后将其置于战斗中 - 在Load()内的循环之后。
使用document.getElementById('sidebar').innerHTML = '';
此外，您必须对customIcons做一些事情你可以把它们改成像这样的东西

Subject: { icon: 'http://askdata.net/compmap/mapicons/sub.png' }

你完成了！

示例

function load() { document.getElementById('sidebar').innerHTML = ''; var map = new google.maps.Map(document.getElementById("map"), { //rest of the code goes here

此外，用CSS替换此代码可能是个好主意：

div.style.cursor = 'pointer'; div.style.marginBottom = '5px'; google.maps.event.addDomListener(div, 'mouseover', function() { div.style.backgroundColor = '#eee'; }); google.maps.event.addDomListener(div, 'mouseout', function() { div.style.backgroundColor = '#fff'; });

CSS选项：

#sidebar { background-color: white; } #sidebar div { cursor: pointer; margin-bottom: 5px; } #sidebar div:hover { background-color: #eee; }

Google Maps API V3的补充工具栏帮助

2 个答案: