Google地图补充工具栏

我一直在使用Open infoWindow of specific marker from outside Google Maps (V3)尝试在我的一个地图页面中实施侧边栏。我将以下代码放在一起（请参阅下文），但当我尝试打开页面时出现错误。该错误是“的document.getElementById（...）”为空或不是一个对象，它是指向该行：只是Google地图补充工具栏

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>

来源

2011-09-10 IRHM

您在这里缺少一个括号：

。这仅仅是一个错字，还是在你的实际页面上是一样的？ –

嗨，非常感谢您回复我的帖子并指出其中的一个错误。我现在把括号放进去了，但是我现在收到以下错误：'gmarkers [...]'为空或者不是对象'，它指向这一行map.panTo（gmarkers [index]）。为getPosition（））;.我不认为你有什么想法，请问我现在出错了吗？再次非常感谢和亲切的问候。 Chris – IRHM

“var gmarkers = xml.documentElement ....”。您将重新声明变量为该函数的本地变量。尝试从该行的开头删除“var”。 –

的问题是，gmarkers只是一堆XML数据，和（（）等为getPosition）上定义没有功能。

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

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

来源

2011-09-10 19:00:00

嗨，很抱歉不能早日回复你。我已经添加了代码，它的工作原理。我承认已经超出了我的深度，但我试图添加到您的代码中，所以当单击列表项时，infowindow会在适当的标记上打开，但我没有取得很大的成功。我只是想知道是否有可能让我看看如何设置信息框以及如何在点击列表项时将鼠标图标更改为默认箭头。我包含一个指向我的页面的链接，以方便http://www.mapmyfinds.co.uk/alllocationssidebar.html。真诚的感谢和亲切的问候。 Chris – IRHM

由于您在* scrollToMarker（）函数内声明了bindInfoWindow（）函数，因此该页面暂时不工作。 –

非常感谢您的继续帮助。我已经修改了scrolltoMarker函数。我已经研究了一段时间，还有一些问题我已经尝试解决，没有任何运气。当将鼠标悬停在列表上时，图标表示这些是文本框而不是链接。当我点击链接时，地图正确地平移并居中于标记，但我无法打开InfoWindow。最后，列表标题显示为未定义，我尝试更改div和元素名称，但这不会改变。我只是想知道您是否可以提供更多的帮助吗？ – IRHM

Google地图补充工具栏

回答

相关问题