Question

这是标准的Google代码，可以很好地加载地图。

var mapOptions = {
            center: { lat: -34.397, lng: 150.644 },
            zoom: 8
        };

function initialize() {             
            var map = new google.maps.Map(document.getElementById('map-canvas'),
            mapOptions);
        }
        google.maps.event.addDomListener(window, 'load', initialize);

但是，在我搜索XML文件中的值并将它们设置为mapOptions之后，它不会为我的上帝进行初始化。我已经尝试了一切。

$(xml).find("location").each(function(){ 

                    var lat = $(this).find("lat").text();
                    var lng = $(this).find("lng").text();

                    mapOptions.center.lat = lat;
                    mapOptions.center.lng = lng;

                    initialize();
            });

我甚至在initialize（）中添加了警报，他们确实使用了XML中的新坐标。为什么地图载荷不会超出我的范围......

function initialize() {
            alert(mapOptions.center.lat);
            alert(mapOptions.center.lng);

            var map = new google.maps.Map(document.getElementById('map-canvas'),
            mapOptions);
        }
        google.maps.event.addDomListener(window, 'load', initialize);

解决方案：正如用户geocodezip建议的那样，解决方案是在设置变量时使用parseFloat（）。

var lat = parseFloat($(this).find("lat").text());

Answer 1

我收到错误Uncaught InvalidValueError: setCenter: not a LatLng or LatLngLiteral: in property lat: not a number。请注意，zoom也是必填/必需MapOption。这对我有用：

$(xml).find("location").each(function () {

    var lat = parseFloat($(this).find("lat").text());
    var lng = parseFloat($(this).find("lng").text());

    mapOptions.center.lat = lat;
    mapOptions.center.lng = lng;

    initialize();
});

working fiddle

代码段：

var geocoder;
var map;
var mapOptions = {center: {}, zoom:5};

function initialize() {
    var map = new google.maps.Map(document.getElementById('map-canvas'),
    mapOptions);
}

function parseXml(str) {
    if (window.ActiveXObject) {
        var doc = new ActiveXObject('MicrosoftXMLDOM');
        doc.loadXML(str);
        return doc;
    } else if (window.DOMParser) {
        return (new DOMParser()).parseFromString(str, 'text/xml');
    }
}
var xmlData = "<markers><location><lat>45</lat><lng>-72</lng></location></markers>";
var xml = parseXml(xmlData);


$(xml).find("location").each(function () {

    var lat = parseFloat($(this).find("lat").text());
    var lng = parseFloat($(this).find("lng").text());

    mapOptions.center.lat = lat;
    mapOptions.center.lng = lng;

    initialize();
});

html, body, #map-canvas {
    height: 500px;
    width: 500px;
    margin: 0px;
    padding: 0px
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map-canvas" style="border: 2px solid #3872ac;"></div>

使用新JSON mapOptions的Google Maps initialize（）将无效

1 个答案: