繁体   English   中英

Google 地图错误 Uncaught InvalidValueError: setPosition: not a LatLng or LatLngLiteral: in property lat: not a number

[英]Google maps error Uncaught InvalidValueError: setPosition: not a LatLng or LatLngLiteral: in property lat: not a number

我试图找出为什么我的谷歌地图没有出现。 我没有创建原始代码。 是什么导致错误和我的谷歌地图消失?

 //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); } }

我试图找出为什么我的谷歌地图没有出现。 我没有创建原始代码。 是什么导致错误和我的谷歌地图消失?

您提供了一些随机的 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>

唯一的问题似乎是地图 API 的 URL,从正确的 URL(如文档中定义)加载 API:

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

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM