谷歌地图侧边栏答案

【问题标题】：Google Maps Sidebar谷歌地图侧边栏
【发布时间】：2011-09-17 08:09:19
【问题描述】：

我一直在使用Open infoWindow of specific marker from outside Google Maps (V3) 尝试在我的一个地图页面中实现侧边栏。我已经将以下代码放在一起（见下文），但是当我尝试打开页面时出现错误。错误是 'document.getElementById(...)' is null or not an object' 它指向这一行：

document.getElementById("locationslist").innerHTML = locationslist;

我已经查看这个问题已经有一段时间了，我只是看不出错误是什么。

<!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" lang="en">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>All Locations</title>
        <link rel="stylesheet" href="css/alllocationsstyle.css" type="text/css" media="all" />
        <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false&language=en"></script>


<div id="map"></div> 
<div id="locationslist"></div> 

<body onload="showLocations()"> 

<script type="text/javascript"> 

var map; 
var gmarkers = new Array();
var locationslist;

function showLocations() { 
  map = new google.maps.Map(document.getElementById("map"), { 
    center: new google.maps.LatLng(54.312195845815246,-4.45948481875007), 
            zoom:6, 
            mapTypeId: 'terrain' 
  }); 
  var infoWindow = new google.maps.InfoWindow; 

  // Change this depending on the name of your PHP file 
  downloadUrl("phpfile.php", function(data) { 
    var xml = data.responseXML; 
    gmarkers = xml.documentElement.getElementsByTagName("marker"); 
    var bounds = new google.maps.LatLngBounds(); 
    for (var i = 0; i < gmarkers.length; i++) { 
      var locationname = gmarkers[i].getAttribute("locationname"); 
      var address = gmarkers[i].getAttribute("address"); 
      var locationid = gmarkers[i].getAttribute("locationid"); 
      var point = new google.maps.LatLng( 
          parseFloat(gmarkers[i].getAttribute("osgb36lat")), 
          parseFloat(gmarkers[i].getAttribute("osgb36lon"))); 
      var html = "<b>" + locationname + "</b> <br/>" + address; 
      bounds.extend(point);  
      var marker = new google.maps.Marker({ 
        map: map, 
        position: point, 
        locationid: locationid 
      }); 
      bindInfoWindow(marker, map, infoWindow, html);  
      locationslist += "<div onclick=scrollToMarker(" + i + ")>"+locationname+"</div>"; 
    }        
    map.setCenter(bounds.getCenter()); 
    map.fitBounds(bounds);  
    //display company data in html 
    document.getElementById("locationslist").innerHTML = locationslist; 
  }); 

} 

function scrollToMarker(index) { 
    map.panTo(gmarkers[index].getPosition()); 
} 

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> 
            </html>

【问题讨论】：

您在此处缺少一个括号：
。这只是这里的一个错字，还是在您的实际页面上是一样的？
您好，非常感谢您回复我的帖子并指出其中一个错误。我现在把括号放进去，但我现在收到以下错误：'gmarkers[...]' is null or not an object' 它指向这条线 map.panTo(gmarkers[index].获取位置（））；。我不认为你有任何想法，请问我现在哪里出错了？再次非常感谢和亲切的问候。克里斯
"var gmarkers = xml.documentElement...."。您将变量重新声明为该函数的本地变量。尝试从该行的开头删除“var”。
您好，非常感谢您在这方面的支持。我已经进行了更改，但现在出现错误：“对象不支持此属性或方法”，并且突出显示以下行作为问题：map.panTo(gmarkers[index].getPosition()); .我不得不承认我不确定从哪里开始，因为从我可以看到标记是在开始时定义的。非常感谢和亲切的问候。克里斯

【解决方案1】：

问题是gmarkers只是一堆XML数据，上面没有定义函数（比如getPosition()）。

map.panTo() 方法采用一个参数 (source)，即 LatLng 类型。所以你需要先创建一个google.maps.LatLng 类的实例。您已经在 main 函数中执行了此操作，因此也将其复制到此处：

function scrollToMarker(index) { 
    var point = new google.maps.LatLng(
        parseFloat(gmarkers[index].getAttribute("osgb36lat")), 
        parseFloat(gmarkers[index].getAttribute("osgb36lon"))
    );
    map.panTo(point); 
}

【讨论】：

您好，很抱歉没有尽快回复您。我已经添加了代码，它很有效。我承认超出了我的深度，但我尝试添加到您的代码中，因此当单击列表项时，信息窗口会在相应的标记上打开，但我并没有取得很大的成功。我只是想知道您是否有可能向我展示如何设置信息框以及如何在单击列表项时将鼠标图标更改为默认箭头。为了方便mapmyfinds.co.uk/alllocationssidebar.html，我包含了一个指向我的页面的链接。真诚的感谢和亲切的问候。克里斯
由于您在 scrollToMarker() 函数中声明了 bindInfoWindow() 函数，因此页面目前无法正常工作。
非常感谢您一直以来的帮助。我已经修改了scrolltoMarker 功能。我已经为此工作了一段时间，并且我尝试解决了一些问题，但没有任何运气.当悬停在列表上时，图标表示这些是文本框而不是链接。当我单击链接时，地图正确平移并以标记为中心，但我无法打开信息窗口。最后，列表标题显示为未定义，我尝试更改 div 和元素名称，但这并没有改变。我只是想知道您是否可以提供更多帮助？。亲切的问候 Chris