Google 使用新的 JSON mapOptions 的地图 initialize() 将不起作用

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

Google 使用新的 JSON mapOptions 的地图 initialize() 将不起作用

Google Maps initialize() with new JSON mapOptions won't work

json

google-maps

initialization

maps