将XML标记传递到Google Map
Passing XML markers to Google Map
我一直在根据Mike Williams的这个例子创建一个V3谷歌地图http://www.geocodezip.com/v3_MW_example_linktomap.html
不过我遇到了一点问题。如果我的URL中没有参数，那么我会在Firebug中得到错误"id is undefined idmarks[I.toLowerCase（）]=marker；"，并且只会显示一个标记。如果我有一个参数（例如？id=105），那么所有的侧边栏链接都说105（或者URL中的任何参数），而不是XML文件中列出的它们各自的标签，并且将打开一个随机信息窗口，而不是URL中id的窗口。这是我的javascript：
var map = null;
var lastmarker = null;
// ========== Read paramaters that have been passed in ==========
// Before we go looking for the passed parameters, set some defaults
// in case there are no parameters
var id;
var index = -1;
// these set the initial center, zoom and maptype for the map
// if it is not specified in the query string
var lat = 42.194741;
var lng = -121.700301;
var zoom = 18;
var maptype = google.maps.MapTypeId.HYBRID;
function MapTypeId2UrlValue(maptype) {
var urlValue = 'm';
switch (maptype) {
case google.maps.MapTypeId.HYBRID: urlValue = 'h';
break;
case google.maps.MapTypeId.SATELLITE: urlValue = 'k';
break;
case google.maps.MapTypeId.TERRAIN: urlValue = 't';
break;
default:
case google.maps.MapTypeId.ROADMAP: urlValue = 'm';
break;
}
return urlValue;
}
// If there are any parameters at eh end of the URL, they will be in location.search
// looking something like "?marker=3"
// skip the first character, we are not interested in the "?"
var query = location.search.substring(1);
// split the rest at each "&" character to give a list of "argname=value" pairs
var pairs = query.split("&");
for (var i = 0; i < pairs.length; i++) {
// break each pair at the first "=" to obtain the argname and value
var pos = pairs[i].indexOf("=");
var argname = pairs[i].substring(0, pos).toLowerCase();
var value = pairs[i].substring(pos + 1).toLowerCase();
// process each possible argname - use unescape() if theres any chance of spaces
if (argname == "id") { id = unescape(value); }
if (argname == "marker") { index = parseFloat(value); }
if (argname == "lat") { lat = parseFloat(value); }
if (argname == "lng") { lng = parseFloat(value); }
if (argname == "zoom") { zoom = parseInt(value); }
if (argname == "type") {
// from the v3 documentation 8/24/2010
// HYBRID This map type displays a transparent layer of major streets on satellite images.
// ROADMAP This map type displays a normal street map.
// SATELLITE This map type displays satellite images.
// TERRAIN This map type displays maps with physical features such as terrain and vegetation.
if (value == "m") { maptype = google.maps.MapTypeId.ROADMAP; }
if (value == "k") { maptype = google.maps.MapTypeId.SATELLITE; }
if (value == "h") { maptype = google.maps.MapTypeId.HYBRID; }
if (value == "t") { maptype = google.maps.MapTypeId.TERRAIN; }
}
}
// this variable will collect the html which will eventually be placed in the side_bar
var side_bar_html = "";
// arrays to hold copies of the markers and html used by the side_bar
// because the function closure trick doesnt work there
var gmarkers = [];
var idmarkers = [];
// global "map" variable
var map = null;
// A function to create the marker and set up the event window function
function createMarker(point, icon, label, html) {
var contentString = html;
var marker = new google.maps.Marker({
position: point,
map: map,
title: label,
icon: icon,
zIndex: Math.round(point.lat() * -100000) << 5
});
marker.id = id;
marker.index = gmarkers.length;
google.maps.event.addListener(marker, 'click', function () {
lastmarker = new Object;
lastmarker.id = marker.id;
lastmarker.index = marker.index;
infowindow.setContent(contentString);
infowindow.open(map, marker);
});
// save the info we need to use later for the side_bar
gmarkers.push(marker);
idmarkers[id.toLowerCase()] = marker;
// add a line to the side_bar html
side_bar_html += '<a href="javascript:myclick(' + (gmarkers.length - 1) + ')">' + id + '<'/a><br>';
}
// This function picks up the click and opens the corresponding info window
function myclick(i) {
google.maps.event.trigger(gmarkers[i], "click");
}
function makeLink() {
var mapinfo = "lat=" + map.getCenter().lat().toFixed(6)
+ "&lng=" + map.getCenter().lng().toFixed(6)
+ "&zoom=" + map.getZoom()
+ "&type=" + MapTypeId2UrlValue(map.getMapTypeId());
if (lastmarker) {
var a = "/about/map/default.aspx?id=" + lastmarker.id + "&" + mapinfo;
var b = "/about/map/default.aspx?marker=" + lastmarker.index + "&" + mapinfo;
} else {
var a = "/about/map/default.aspx?" + mapinfo;
var b = a;
}
document.getElementById("idlink").innerHTML = '<a href="' + a + '" id=url target=_new>- Link directly to this page by id</a> (id in xml file also entry "name" in sidebar menu)';
document.getElementById("indexlink").innerHTML = '<a href="' + b + '" id=url target=_new>- Link directly to this page by index</a> (position in gmarkers array)';
}
function initialize() {
// create the map
var myOptions = {
zoom: zoom,
center: new google.maps.LatLng(lat, lng),
mapTypeId: maptype,
mapTypeControlOptions: { style: google.maps.MapTypeControlStyle.DROPDOWN_MENU },
navigationControl: true,
mapTypeId: google.maps.MapTypeId.HYBRID
};
map = new google.maps.Map(document.getElementById("map_canvas"),
myOptions);
var stylesarray = [
{
featureType: "poi",
elementType: "labels",
stylers: [
{ visibility: "off" }
]
},
{
featureType: "landscape.man_made",
elementType: "labels",
stylers: [
{ visibility: "off" }
]
}
];
var options = map.setOptions({ styles: stylesarray });
// Make the link the first time when the page opens
makeLink();
// Make the link again whenever the map changes
google.maps.event.addListener(map, 'maptypeid_changed', makeLink);
google.maps.event.addListener(map, 'center_changed', makeLink);
google.maps.event.addListener(map, 'bounds_changed', makeLink);
google.maps.event.addListener(map, 'zoom_changed', makeLink);
google.maps.event.addListener(map, 'click', function () {
lastmarker = null;
makeLink();
infowindow.close();
});
// Read the data from example.xml
downloadUrl("example.xml", function (doc) {
var xmlDoc = xmlParse(doc);
var markers = xmlDoc.documentElement.getElementsByTagName("marker");
for (var i = 0; i < markers.length; i++) {
// obtain the attribues of each marker
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 label = markers[i].getAttribute("label");
var icon = markers[i].getAttribute("icon");
// create the marker
var marker = createMarker(point, icon, label, html);
}
// put the assembled side_bar_html contents into the side_bar div
document.getElementById("side_bar").innerHTML = side_bar_html;
// ========= If a parameter was passed, open the info window ==========
if (id) {
if (idmarkers[id]) {
google.maps.event.trigger(idmarkers[id], "click");
} else {
alert("id " + id + " does not match any marker");
}
}
if (index > -1) {
if (index < gmarkers.length) {
google.maps.event.trigger(gmarkers[index], "click");
} else {
alert("marker " + index + " does not exist");
}
}
});
}
var infowindow = new google.maps.InfoWindow(
{
size: new google.maps.Size(150, 50)
});
google.maps.event.addDomListener(window, "load", initialize);
下面是我的XML格式化的一个例子
<marker lat="42.196175"
lng="-121.699224"
html="This is the information about 104"
iconimage="/about/map/images/104.png"
label="104" />
更新：我已经有了一个基本的地图。我在这里试图实现的是能够为标记分配ID，以便在从外部URL加载页面时触发特定的标记。它适用于示例页面。事实上，我已经让它在我的页面上正常工作了（只要我不尝试加入自定义图标）。
正如我试图说的那样。你有一个全球性的：
var id;
它似乎唯一被设置（或没有设置）的地方是查询字符串。然而，当您循环通过xml输入时，您会调用createMarker（），它使用该全局id。
function createMarker(point, icon, label, html) {
var contentString = html;
var marker = new google.maps.Marker({
position: point,
map: map,
title: label,
icon: icon,
zIndex: Math.round(point.lat() * -100000) << 5
});
marker.id = id;
....
因此，每个标记都得到相同的id。如果我是你，我会将"id"作为另一个属性添加到xml文件中，然后从那里设置它，并使用查询字符串id只执行选择逻辑。
相关文章：
- 回调函数中传递参数的困难(Google Map API Markers）
- 使用API在我的网站Google-Map上显示搜索地址的纬度和经度
- 通过内部数组将JSON数据导入D3.js+Google Map
- 没有显示带有Infobox PHP/SQL的Google Map API v3
- 在javascript函数中访问Google map api
- Google Map API BackBoneJS 无法读取 null 的属性 'offsetWidth'
- Google Map KML层占位符点击事件返回ZERO_RESULTS
- Google Map JS API-加载地图分幅，但所有图像(标记、缩放控制等）都不加载;t负载2分钟
- Google MAP API 未捕获类型错误:无法读取 null 的属性“offsetWidth”
- jQuery在使用Bootstrap 3的Google Map v3的信息窗口中工作不完美
- 将Jquery拖放到Google Map V3
- Angular Google Map的自定义样式
- 样式化地图和地点库Google Map API v3
- 在Google Map API中定位画布外的输入字段
- Google Map API v3 在 Wordpress 中不起作用
- Google Map API use LatLng or Address
- SetTimeout on Directionservice route in google map javascrip
- Google Map API - foreach 循环中的信息窗口
- 将 MarkerClusterer 与数据库驱动的 Google Map V3 集成
- javascript google map setcenter and setzoom with animation
