Javascript 为什么我的信息窗口没有显示？
我正在制作一张地图，它使用了我从魔兽世界中提取的自定义瓷砖，我已经得到了标记来显示，我很确定我正确地使用了信息窗口，但是当我点击标记时，它们没有显示出来 脚本：Javascript 为什么我的信息窗口没有显示？,javascript,google-maps,google-maps-api-3,Javascript,Google Maps,Google Maps Api 3,我正在制作一张地图，它使用了我从魔兽世界中提取的自定义瓷砖，我已经得到了标记来显示，我很确定我正确地使用了信息窗口，但是当我点击标记时，它们没有显示出来 脚本： $(function () { initialize(); $(window).resize(function () { $('#map').css('width', $(window).width() + 'px'); $('#map').css('height', ($(window)
$(function () {
initialize();
$(window).resize(function () {
$('#map').css('width', $(window).width() + 'px');
$('#map').css('height', ($(window).height() - 35) + 'px');
google.maps.event.trigger(map, 'resize');
hash_init(); // keeps the map centered correctly
}).resize();
});
function CustomMapType() {}
CustomMapType.prototype.tileSize = new google.maps.Size(256, 256);
CustomMapType.prototype.maxZoom = 7;
CustomMapType.prototype.getTile = function (coord, zoom, ownerDocument) {
var div = ownerDocument.createElement('DIV');
var baseURL = 'http://d1m6g5gl70bc4l.cloudfront.net/';
baseURL += zoom + '_' + coord.x + '_' + coord.y + '.png';
div.style.width = this.tileSize.width + 'px';
div.style.height = this.tileSize.height + 'px';
div.style.backgroundColor = '#1B2D33';
div.style.backgroundImage = 'url(' + baseURL + ')';
return div;
};
CustomMapType.prototype.name = "Custom";
CustomMapType.prototype.alt = "Tile Coordinate Map Type";
var map;
var CustomMapType = new CustomMapType();
function initialize() {
var mapOptions = {
minZoom: 2,
maxZoom: 7,
isPng: true,
mapTypeControl: false,
streetViewControl: false,
center: new google.maps.LatLng(56.705, -35.200),
zoom: 3,
mapTypeControlOptions: {
mapTypeIds: ['custom', google.maps.MapTypeId.ROADMAP],
style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
}
};
map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
map.mapTypes.set('custom', CustomMapType);
map.setMapTypeId('custom');
geocoder = new google.maps.Geocoder();
infoWindow = new google.maps.InfoWindow();
xmlUrl = "markers.xml";
loadMarkers();
}
google.maps.event.addDomListener(window, 'load', initialize);
//
// Google Maps functions
//
// Google Maps vars
var myLatlng; // Add the coordinates
var mapOptions = {};
var geocoder;
var map;
var defaultZoom = 10;
var image;
var xmlUrl;
var infoWindow;
var markers;
var contactUrl;
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 loadMarkers() {
map.markers = map.markers || [];
// downloadUrl(xmlUrl, function (data) {
// var xml = data.responseXML;
var xmlString ='<?xml version="1.0" encoding="UTF-8"?><markers><marker id="1" name="Goldshire" address1="Azeroth" address2="info" address3="info" city="info" postcode="info" lat="35.120" lng="33.706" /></markers>';
var xml = xmlParse(xmlString);
markers = xml.documentElement.getElementsByTagName("marker");
for (var i = 0; i < markers.length; i++) {
var name = markers[i].getAttribute("name");
var marker_image = markers[i].getAttribute('markerimage');
var id = markers[i].getAttribute("id");
var address = markers[i].getAttribute("address1")+"<br />"+markers[i].getAttribute("address2")+"<br />"+markers[i].getAttribute("address3")+"<br />"+markers[i].getAttribute("postcode");
var image = {
url: marker_image,
size: new google.maps.Size(71, 132),
origin: new google.maps.Point(0, 0),
scaledSize: new google.maps.Size(71, 132)
};
var point = new google.maps.LatLng(
parseFloat(markers[i].getAttribute("lat")),
parseFloat(markers[i].getAttribute("lng")));
var html = "<div class='infowindow'><b>" + name + "</b> <br/>" + address + '<br/></div>';
var marker = new google.maps.Marker({
map: map,
position: point,
icon: image,
title: name
});
map.markers.push(marker);
bindInfoWindow(marker, map, infoWindow, html);
}
// });
}
function bindInfoWindow(marker, map, infoWindow, html) {
google.maps.event.addListener(marker, 'click', function () {
infoWindow.setContent(html);
infoWindow.open(map, marker);
});
}
/**
* Parses the given XML string and returns the parsed document in a
* DOM data structure. This function will return an empty DOM node if
* XML parsing is not supported in this browser.
* @param {string} str XML string.
* @return {Element|Document} DOM.
*/
function xmlParse(str) {
if (typeof ActiveXObject != 'undefined' && typeof GetObject != 'undefined') {
var doc = new ActiveXObject('Microsoft.XMLDOM');
doc.loadXML(str);
return doc;
}
if (typeof DOMParser != 'undefined') {
return (new DOMParser()).parseFromString(str, 'text/xml');
}
return createElement('div', null);
}
var marker_image = 'http://labs.google.com/ridefinder/images/mm_20_yellow.png';
var marker_image = markers[i].getAttribute('markerimage');