谷歌地图初始化()与新的JSON地图选项将不起作用

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

工作小提琴

代码片段:

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?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
<div id="map-canvas" style="border: 2px solid #3872ac;"></div>