Question

我试图找出为什么我的谷歌地图没有显示出来。我没有创建原始代码。是什么导致错误，我的谷歌地图消失了？

//XXXX: openInfoWindowHtml
/*--------------------------------------------------*/
/*	GOOGLE MAP FUNCTIONS
/*--------------------------------------------------*/

var map, agentMarkers, reoMarkers, officeMarker, currentMarker, bounds, agentIcon, reoIcon, officeIcon;
var infoWindow = new google.maps.InfoWindow();

function initAgentMap(lat, lng) {
	lat = isNaN(lat) || lat === null ? 37.4419 : lat;
	lng = isNaN(lng) || lat === null ? -122.1419 : lng;
	map = new google.maps.Map(document.getElementById("map-canvas"), {
        center : new google.maps.LatLng(lat, lng),
        zoom: 13,
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        zoomControlOptions : {
	        style : google.maps.ZoomControlStyle.SMALL
	    }
	});
	agentMarkers = [];
	reoMarkers = [];
	currentMarker = null;
	bounds = new google.maps.LatLngBounds();

	var baseIcon = {
	    size : new google.maps.Size(29,25),
	    anchor : new google.maps.Point(15,25),
	    imageMap : [0, 0, 22, 0, 22, 25, 0, 25]
	};

	agentIcon = {
	    size : baseIcon.size,
	    anchor : baseIcon.anchor,
	    imageMap : baseIcon.imageMap,
	    url : "/images/icon_redbook.png"
    };

	reoIcon = {
	    size : baseIcon.size,
	    anchor : baseIcon.anchor,
	    imageMap : baseIcon.imageMap,
	    url : "/images/icon_reo.png"
	};

	officeIcon = {
        size : baseIcon.size,
        anchor : baseIcon.anchor,
        imageMap : baseIcon.imageMap,
        url : "/images/icon_office.png"
	};
}

function plotAgent(lat, long, text, id) {
	var point = new google.maps.LatLng(lat, long);
	var marker = new google.maps.Marker({
	    position : point,
	    icon : agentIcon,
	    anchorPoint : new google.maps.Point(12,0),
	    map : map
	});
	google.maps.event.addListener(marker, "click", function() {
		infoWindow.setContent(text);
		infoWindow.open(map, marker);
	});
	agentMarkers[id] = marker;
	bounds.extend(point);
	return marker;
}

function plotREO(lat, long, text, id) {
	var point = new google.maps.LatLng(lat, long);
	var marker = new google.maps.Marker({
	    position : point,
	    icon : reoIcon,
	    anchorPoint : new google.maps.Point(12,0),
	    map : map
	});
	google.maps.event.addListener(marker, "click", function () {
		infoWindow.setContent(text);
		infoWindow.open(map, marker);
	});
	reoMarkers[id] = marker;
	bounds.extend(point);
	return marker;
}

function plotOffice(lat, long, text) {
	var point = new google.maps.LatLng(lat, long);
	var marker = new google.maps.Marker({
	    position : point,
	    icon : officeIcon,
	    anchorPoint : new google.maps.Point(12,0),
	    map : map
	});
	google.maps.event.addListener(marker, "click", function () {
		infoWindow.setContent(text);
		infoWindow.open(map, marker);
	});
	officeMarker = marker;
	bounds.extend(point);
	return marker;
}

function showAgent(id) {
	if(currentMarker != id){
		currentMarker = id;
		google.maps.event.trigger(agentMarkers[id], "click");
		map.setZoom(11);
		pnt = agentMarkers[id].getPosition();
		pnt2 = new google.maps.LatLng(pnt.lat() + .02 , pnt.lng());
		map.setCenter(pnt2);
	}

}

function showREO(id) {
	if(currentMarker != id){
		currentMarker = id;
		google.maps.event.trigger(reoMarkers[id], "click");
		map.setZoom(11);
		pnt = reoMarkers[id].getPosition();
		pnt2 = new google.maps.LatLng(pnt.lat() + .02 , pnt.lng());
		map.setCenter(pnt2);
	}
}

function showOffice() {
	if(currentMarker != 'office'){
		currentMarker = 'office';
		google.maps.event.trigger(officeMarker, "click");
		map.setZoom(11);
		pnt = officeMarker.getPosition();
		pnt2 = new google.maps.LatLng(pnt.lat() + .02 , pnt.lng());
		map.setCenter(pnt2);
	}
}

我试图找出为什么我的谷歌地图没有显示出来。我没有创建原始代码。是什么导致错误，我的谷歌地图消失了？

Answer 1

您提供了一些随机的javascript函数。要制作地图，您需要： 1）包括谷歌地图API。 2）在html页面上定义地图的位置 2）定义地图大小 3）在Windows加载事件完成后初始化映射。

为了好玩，我一直在破解你的代码，直到它给出了一些结果。这可能会给你一些你误入歧途的提示。我强烈建议您阅读API文档和再现示例。 https://developers.google.com/maps/documentation/javascript/examples/map-simple

<html>
<script src="http://maps.googleapis.com/maps/api/js" type="text/javascript"></script>           


<style>
    /* we need to define map size */
    #map-canvas {        
        height: 350px;
        width: 600px;        
    }
</style>    
<script>

var map, agentMarkers, reoMarkers, officeMarker, currentMarker, bounds, agentIcon, reoIcon, officeIcon;
var infoWindow = new google.maps.InfoWindow();

function initialize(){
    initAgentMap(37,-122)
    var marker = plotAgent(37, -122, 'hello world', 1);
    marker.setMap(map); }

function initAgentMap(lat, lng) {
    lat = isNaN(lat) || lat === null ? 37.4419 : lat;
    lng = isNaN(lng) || lat === null ? -122.1419 : lng;
    map = new google.maps.Map(document.getElementById("map-canvas"), {  
        center : new google.maps.LatLng(lat, lng),
        zoom: 13,
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        zoomControlOptions : {
            style : google.maps.ZoomControlStyle.SMALL
        }
    });
}

function plotAgent(lat, lng, text, id) {
    var point = new google.maps.LatLng(lat, lng);
    var marker = new google.maps.Marker({
        position : point,
        title: text, // Appears on hover
        label: id, // Latter on marker      
    });
    return marker;
}

// don't start the process until Windows "load" event is completed
google.maps.event.addDomListener(window, 'load', initialize);
</script>

<div id="map-canvas"></div>

Answer 2

唯一的问题似乎是maps-API的URL，从正确的URL加载API（如文档中所定义）：

<script type="text/javascript" 
        src="https://maps.googleapis.com/maps/api/js?v=3&amp;key=AIzaSyDgNW8A9SvxtI0DazJOJ7x652I2BdhWxdg"></script>

谷歌地图错误未捕获InvalidValueError：setPosition：不是LatLng或LatLngLiteral：在属性lat中：不是数字

2 个答案: