在Google地图之外打开特定标记的infoWindow（V3） [英] Open infoWindow of specific marker from outside Google Maps (V3)
本文介绍了在Google地图之外打开特定标记的infoWindow（V3）的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我似乎无法回答这个问题：
我有一张地图（很多）标记（公司）来自生成的XML文件。在地图下方，我想显示在地图上显示的所有公司的（非JavaScript生成的）列表。当我点击列表中的公司时，地图会平移到该特定标记并打开一个infoWindow。事情是，我想地图和列表是两个单独的东西...
什么是正确的方法来解决这个问题？谢谢！重要的是所有的markerinfo是动态的...
function initialize_member_map（lang）{
var map = new google。 maps.Map（document.getElementById（large-map-canvas），{
center：new google.maps.LatLng（50.85034，4.35171），
zoom：13，
mapTypeId： 'roadmap'
}）;
var infoWindow = new google.maps.InfoWindow;
downloadUrl（/ ajax / member-xml-output.php，function（data）{
var xml = data.responseXML;
var markers = xml.documentElement。 getElementsByTagName（marker）;
var bounds = new google.maps.LatLngBounds（）;
for（var i = 0; i< markers.length; i ++）{
var company = markers [i] .getAttribute（company）;
var address = markers [i] .getAttribute（address）;
var type = markers [i] .getAttribute ;
var uid = markers [i] .getAttribute（uid）; // MySQL中公司表的主键
var point = new google.maps.LatLng（
parseFloat [i] .getAttribute（lat）），
parseFloat（markers [i] .getAttribute（lng）））;
var html =< b& ; / b>< br />+ address;
bounds.extend（point）;
var marker = new google.maps.Marker（{
map：map，
position：point，
uid：uid //一些实验，想用这个来定位特定的标记...
}）;
bindInfoWindow（marker，map，infoWindow，html）;
}
map.setCenter（bounds.getCenter（））;
map.fitBounds（bounds）;
}）;
}
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（）{}
按照Michal的建议，我试过以下，但我遇到两个问题：我的控制台告诉我 markers [index] .getPosition不是一个函数，我的列表中的第一项显示为 undefined 。你能帮忙吗？
// JavaScript文档
var map;
var markers = new Array（）;
var company_list;
function initialize_member_map（lang）{
map = new google.maps.Map（document.getElementById（large-map-canvas），{
center：new google.maps.LatLng 50.85034，4.35171），
zoom：13，
mapTypeId：'roadmap'
}）;
var infoWindow = new google.maps.InfoWindow;
//根据PHP文件的名称更改这个值
downloadUrl（/ ajax / member-xml-output.php？country = BE，function（data）{
var xml = data.responseXML;
markers = xml.documentElement.getElementsByTagName（marker）;
var bounds = new google.maps.LatLngBounds（）;
for（var i = 0; i< markers.length; i ++）{
var company = markers [i] .getAttribute（company）;
var address = markers [i] .getAttribute ;
var type = markers [i] .getAttribute（type）;
var uid = markers [i] .getAttribute（uid）;
var point = new google.maps .LatLng（
parseFloat（markers [i] .getAttribute（lat）），
parseFloat（markers [i] .getAttribute（lng）））;
var html = < b>+ company +< / b>< br />+ address;
bounds.extend（point）;
var marker = new google.maps.Marker
map：map，
position：point，
uid：uid
}）;
bindInfoWindow（mark，map，infoWindow，html）;
company_list + =< div onclick = scrollToMarker（+ i +）>+ company +< / div>;
}
map.setCenter（bounds.getCenter（））;
map.fitBounds（bounds）;
//在html中显示公司数据
document.getElementById（company_list）。innerHTML = company_list;
}）;
}
function scrollToMarker（index）{
map.panTo（markers [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（）{
}
方案
你在正确的轨道上。您只需要为您的Marker对象创建一个单独的全局数组，并将所有创建的标记推送到此数组。当您写出所有公司数据到html时，包括一个带有在点击时执行的标记的索引的调用。下面是一个示例代码。我使用JSON作为我的数据结构来保存公司信息而不是XML。
< html> < head> < meta name =viewportcontent =initial-scale = 1.0，user-scalable = yes/> < meta http-equiv =content-typecontent =text / html; charset = UTF-8/> < title> Google地图滚动到标记< / title> < script type =text / javascriptsrc =http://maps.google.com/maps/api/js?sensor=false>< / script> < / head> < body onload =initialize（）> < div id =map_canvasstyle =width：900px; height：600px;>< / div> < div id =companies>< / div> < script type =text / javascript> var map; //公司数据的JSON - 等同于您的XML公司= {data：[{name：Company 1，lat：42.166，lng：-87.848}，{name：Company 2，lat：41.8358，lng：-87.7128}，{name：Company 3，lat：41.463，lng:-88.870} ，lat：41.809，lng： - 87.790}]} //我们将使用这个来存储google地图Marker对象var markers = new Array（）; function initialize（）{var chicago = new google.maps.LatLng（41.875696，-87.624207）; var myOptions = {zoom：9，center：chicago，mapTypeId：google.maps.MapTypeId.ROADMAP} map = new google.maps.Map（document.getElementById（map_canvas），myOptions）; listCompanies（）; } function listCompanies（）{html =//通过所有公司循环（i = 0; i< companies.data.length; i ++）{//获取制造者位置lat = companies.data [i] .lat lng = companies.data [i] .lng // add google maps marker marker = new google.maps.Marker（{map：map，position：new google.maps.LatLng（lat，lng），title：companies.data [i ] .name}）markers.push（marker）; html + =< div onclick = scrollToMarker（+ i +）>+ companies.data [i] .name +< / div>; } //在html中显示公司数据document.getElementById（companies）。innerHTML = html; } function scrollToMarker（index）{map.panTo（markers [index] .getPosition（））; }< / script>< / body> < / html>
确定我为您添加了另一个解决方案 - 使用您的代码。这一个使用你的bindInfWindow函数来绑定DOM（HTML）点击事件以打开信息窗口并滚动到标记。请注意，由于您正在动态加载公司，在开始将事件绑定到DOM之前，保存其名称和ids的div（或其他标签）必须存在于DOM中 - 因此，您需要执行的第一个函数是公司HTML（而不是映射init）。请注意，我没有测试这个，因为我没有你的数据..
//你必须先写出公司divs
< body onload =showCompanies（）>
< script>
// JavaScript文档
var map;
//这是你的文本数据
var markers = new Array（）;
//你需要首先创建你的公司列表，因为我们将绑定dom事件，因此它必须在marekrs初始化之前存在
function showCompanies（）{
downloadUrl（/ ajax / member-xml-output.php？country = BE，function（data）{
var xml = data.responseXML;
markers = xml.documentElement.getElementsByTagName标记）;
for（var i = 0; i< markers.length; i ++）{
var company = markers [i] .getAttribute（company）;
markerId =id _+ i;
company_list + =< div id =+ markerId +>+ company +< / div>;
}
//在html中显示公司数据
document.getElementById（company_list）。innerHTML = company_list;
//现在您已准备好初始化映射
initialize_member_map（lang）
}）;
}
function initialize_member_map（lang）{
map = new google.maps.Map（document.getElementById（large-map-canvas），{
center：new google.maps.LatLng（50.85034，4.35171），
zoom：13，
mapTypeId：'roadmap'
}）;
var xml = data.responseXML;
var bounds = new google.maps.LatLngBounds（）;
//读取您的公司数据并准备映射
for（var i = 0; i< markers.length; i ++）{
var infoWindow = new google.maps .InfoWindow;
var company = markers [i] .getAttribute（company）;
var address = markers [i] .getAttribute（address）;
var type = markers [i] .getAttribute（type）;
var uid = markers [i] .getAttribute（uid）;
var point = new google.maps.LatLng（
parseFloat（markers [i] .getAttribute（lat）），
parseFloat（markers [i] .getAttribute（lng） ））;
var html =< b> + company +< / b>< br /> +地址;
bounds.extend（point）;
var marker = new google.maps.Marker（{
map：map，
position：point，
uid：uid
}）;
//将新标记对象添加到gMarkers数组
markerId =id _+ i;
bindInfoWindow（marker，map，infoWindow，html，markerId）;
}
map.setCenter（bounds.getCenter（））;
map.fitBounds（bounds）;
}
function scrollToMarker（index）{
map.panTo（markers [index] .getPosition（））;
}
function bindInfoWindow（marker，map，infoWindow，html，markerId）{
google.maps.event.addListener（marker，'click'，function（）{
infoWindow.setContent（html）;
infoWindow.open（map，marker）;
}）;
//将onlcick事件绑定到html中的div或其他对象
markerObj = document.getElementById（markerId）;
//可以为地图创建DOM事件侦听器
google.maps.event.addDomListener（markerObj，'click'，function（）{
infoWindow.setContent（html）;
infoWindow.open（map，marker）;
map.panTo（marker.getPosition（））;
}）;
}
函数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>
I can't seem to get my head around this problem:
I've got a map with (a lot of) markers (companies) that come from a generated XML file. Below the map, I want to show a (non-JavaScript-generated) list of all the companies that are displayed on the map. When I would click a company in the list, the map would pan to that specific marker and open an infoWindow. The thing is that I want the map and the list to be two separate things...
What would be the right way to tackle this problem? Thanks! Important is that all markerinfo is dynamic...
function initialize_member_map(lang) {
var map = new google.maps.Map(document.getElementById("large-map-canvas"), {
center: new google.maps.LatLng(50.85034, 4.35171),
zoom: 13,
mapTypeId: 'roadmap'
});
var infoWindow = new google.maps.InfoWindow;
downloadUrl("/ajax/member-xml-output.php", function(data) {
var xml = data.responseXML;
var markers = xml.documentElement.getElementsByTagName("marker");
var bounds = new google.maps.LatLngBounds();
for (var i = 0; i < markers.length; i++) {
var company = markers[i].getAttribute("company");
var address = markers[i].getAttribute("address");
var type = markers[i].getAttribute("type");
var uid = markers[i].getAttribute("uid"); // Primary key of company table in MySQL
var point = new google.maps.LatLng(
parseFloat(markers[i].getAttribute("lat")),
parseFloat(markers[i].getAttribute("lng")));
var html = "<b>" + company + "</b> <br/>" + address;
bounds.extend(point);
var marker = new google.maps.Marker({
map: map,
position: point,
uid: uid // Some experiments, wanted to use this to target specific markers...
});
bindInfoWindow(marker, map, infoWindow, html);
}
map.setCenter(bounds.getCenter());
map.fitBounds(bounds);
});
}
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() {}
Following the suggestions by Michal, I've tried the following, but am encountering two problems: my console tells me markers[index].getPosition is not a function and the first item in my list shows to be undefined. Can you please help?
//JavaScript Document
var map;
var markers = new Array();
var company_list;
function initialize_member_map(lang) {
map = new google.maps.Map(document.getElementById("large-map-canvas"), {
center: new google.maps.LatLng(50.85034, 4.35171),
zoom: 13,
mapTypeId: 'roadmap'
});
var infoWindow = new google.maps.InfoWindow;
// Change this depending on the name of your PHP file
downloadUrl("/ajax/member-xml-output.php?country=BE", function(data) {
var xml = data.responseXML;
markers = xml.documentElement.getElementsByTagName("marker");
var bounds = new google.maps.LatLngBounds();
for (var i = 0; i < markers.length; i++) {
var company = markers[i].getAttribute("company");
var address = markers[i].getAttribute("address");
var type = markers[i].getAttribute("type");
var uid = markers[i].getAttribute("uid");
var point = new google.maps.LatLng(
parseFloat(markers[i].getAttribute("lat")),
parseFloat(markers[i].getAttribute("lng")));
var html = "<b>" + company + "</b> <br/>" + address;
bounds.extend(point);
var marker = new google.maps.Marker({
map: map,
position: point,
uid: uid
});
bindInfoWindow(marker, map, infoWindow, html);
company_list += "<div onclick=scrollToMarker(" + i + ")>"+company+"</div>";
}
map.setCenter(bounds.getCenter());
map.fitBounds(bounds);
//display company data in html
document.getElementById("company_list").innerHTML = company_list;
});
}
function scrollToMarker(index) {
map.panTo(markers[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(){
}
解决方案 You are on the right track. You just need to create a separate global array for your Marker objects and push all created markers to this array. When you write out all your company data to html include a call with the index of the marker executed on click. Below is an example code. I used JSON as my data structure to hold company info instead of XML.
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=yes" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>Google Maps Scroll to Marker</title>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
</head>
<body onload="initialize()">
<div id="map_canvas" style="width: 900px;height: 600px;"></div>
<div id="companies"></div>
<script type="text/javascript">
var map;
//JSON of company data - equivalent of your XML
companies = {
"data": [
{
"name": "Company 1",
"lat": 42.166,
"lng": -87.848
},
{
"name": "Company 2",
"lat": 41.8358,
"lng": -87.7128
},
{
"name": "Company 3",
"lat": 41.463,
"lng": -88.870
},
{"name":"Company 4",
"lat":41.809, "lng":-87.790}
]
}
//we will use this to store google map Marker objects
var markers=new Array();
function initialize() {
var chicago = new google.maps.LatLng(41.875696,-87.624207);
var myOptions = {
zoom: 9,
center: chicago,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById("map_canvas"),
myOptions);
listCompanies();
}
function listCompanies() {
html = ""
//loop through all companies
for (i=0;i<companies.data.length;i++) {
//get the maker postion
lat = companies.data[i].lat
lng = companies.data[i].lng
//add google maps marker
marker = new google.maps.Marker({
map:map,
position: new google.maps.LatLng(lat,lng),
title: companies.data[i].name
})
markers.push(marker);
html += "<div onclick=scrollToMarker(" + i + ")>"+companies.data[i].name+"</div>";
}
//display company data in html
document.getElementById("companies").innerHTML =html;
}
function scrollToMarker(index) {
map.panTo(markers[index].getPosition());
}
</script>
</body>
</html>
Ok I added another solution for you - uising your code. This one uses your bindInfWindow function to bind the DOM (HTML) click event to open info window and scroll to marker. Please note that because you are loading companies dynamically the divs (or some other tags) that hold their names and ids must exist in the DOM BEFORE you start binding events to it - so the first function you need to execute is the one that renders companies HTML (not the map init). Please note I have not tested this one as I do not have your data..
//you must write out company divs first
<body onload="showCompanies()">
<script>
//JavaScript Document
var map;
//this is your text data
var markers = new Array();
//you need to create your company list first as we will be binding dom events to it so it must exist before marekrs are initialized
function showCompanies() {
downloadUrl("/ajax/member-xml-output.php?country=BE", function(data) {
var xml = data.responseXML;
markers = xml.documentElement.getElementsByTagName("marker");
for (var i = 0; i < markers.length; i++) {
var company = markers[i].getAttribute("company");
markerId = "id_"+i;
company_list += "<div id="+markerId+">"+company+"</div>";
}
//display company data in html
document.getElementById("company_list").innerHTML = company_list;
//now you are ready to initialize map
initialize_member_map("lang")
});
}
function initialize_member_map(lang) {
map = new google.maps.Map(document.getElementById("large-map-canvas"), {
center: new google.maps.LatLng(50.85034, 4.35171),
zoom: 13,
mapTypeId: 'roadmap'
});
var xml = data.responseXML;
var bounds = new google.maps.LatLngBounds();
//your company data was read in and is ready to be mapped
for (var i = 0; i < markers.length; i++) {
var infoWindow = new google.maps.InfoWindow;
var company = markers[i].getAttribute("company");
var address = markers[i].getAttribute("address");
var type = markers[i].getAttribute("type");
var uid = markers[i].getAttribute("uid");
var point = new google.maps.LatLng(
parseFloat(markers[i].getAttribute("lat")),
parseFloat(markers[i].getAttribute("lng")));
var html = "<b>" + company + "</b> <br/>" + address;
bounds.extend(point);
var marker = new google.maps.Marker({
map: map,
position: point,
uid: uid
});
//add the new marker object to the gMarkers array
markerId = "id_"+i;
bindInfoWindow(marker, map, infoWindow, html,markerId);
}
map.setCenter(bounds.getCenter());
map.fitBounds(bounds);
}
function scrollToMarker(index) {
map.panTo(markers[index].getPosition());
}
function bindInfoWindow(marker, map, infoWindow, html, markerId) {
google.maps.event.addListener(marker, 'click', function() {
infoWindow.setContent(html);
infoWindow.open(map, marker);
});
//bind onlcick events to the div or other object in html
markerObj = document.getElementById(markerId);
//you can create DOM event listeners for the map
google.maps.event.addDomListener(markerObj, 'click', function() {
infoWindow.setContent(html);
infoWindow.open(map, marker);
map.panTo(marker.getPosition());
});
}
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>
这篇关于在Google地图之外打开特定标记的infoWindow（V3）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
