为什么我的infowindows没有出现？

时间：2014-12-12 04:20:29

标签： javascript google-maps google-maps-api-3

我正在制作一张使用我从魔兽世界中提取的自定义图块的地图，我已经有标记出现了，我很确定我正在正确地做infowindows但是当我点击它时它们没有显示出来标记

Relevant JsFiddle

脚本：

$(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);
}

很抱歉，如果这是一个容易解决的问题，这是我第一次使用谷歌地图。

1 个答案:

答案 0 :(得分：0)

使用它：

     var marker_image = 'http://labs.google.com/ridefinder/images/mm_20_yellow.png';

而不是

 var marker_image = markers[i].getAttribute('markerimage');

或在xml中添加markerimage。

因为您的代码会为url提供错误，因为图片字符串不可用，这就是您没有获得信息的原因。

//在此处查看演示

＆＃13;
＆＃13; 
$(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");
	        console.log(markers);
	        for (var i = 0; i < markers.length; i++) {
	            var name = markers[i].getAttribute("name");
	            var marker_image = 'http://labs.google.com/ridefinder/images/mm_20_yellow.png';
	            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);
	}
＆＃13; 
html {
    height: 100%
}
body {
    height: 100%;
    margin: 0px;
    padding: 0px
}
#map_canvas {
    height: 100%;
    z-index: 0;
}
#gmnoprint {
    width: auto;
}
＆＃13; 
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?libraries=drawing"></script>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js'></script>
<div class="topnav">
    <ul id="nav" xclass="topnav">
        <li><a href="/" class="current">Azeroth</a>

        </li>
        <li><a href="/outland/">Outland</a>

        </li>
        <li><a href="/deepholm/">Deepholm</a>

        </li>
        <li><a href="/outland/">Draenor</a>

        </li>
    </ul>
</div>
<div id="map_canvas" style="background: #1B2D33;"></div>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题