在 Google Maps API 上显示存储的标记

Question

我刚开始使用 Google Maps API（并同时使用 AJAX）... 产生了很多问题... 解决了这些问题。但现在我似乎卡住了。

我按照 Google Developers 教程学习如何创建商店定位器 (https://developers.google.com/maps/articles/phpsqlsearch_v3) - 写得很好，解释得很好 - 但我根据自己的需要对其进行了一些更改。

现在我得到错误

InvalidValueError: setMap: not an instance of Map, and not an instance 街景全景图

产生错误的函数是：

function downloadUrl(url,callback) {
   var request = window.ActiveXObject ? 
   new ActiveXObject('Microsoft.XMLHTTP') : 
   new XMLHttpRequest;

   request.onreadystatechange = function() {
        if (request.readyState == 4) {
            request.onreadystatechange = doNothing;
            callback(request.responseText, request.status);
        }
   };

   request.open('GET', url, true);
   request.send(null); /* Console Points the Error to this line */
}

这是运行上述函数的函数：

function showAll() {
    var searchUrl = 'genxml.php';
    downloadUrl(searchUrl, function(data) {
        var xml = parseXml(data);
        var markerNodes = xml.documentElement.getElementsByTagName("marker");
        for (var i = 0; i < markerNodes.length; i++) {
                var latlng = new google.maps.LatLng(
                    parseFloat(markerNodes[i].getAttribute("lat")),
                    parseFloat(markerNodes[i].getAttribute("lng"))
                );

        showMarker(latlng);
        }
    });
}

我的 genxml.php 工作正常，它生成我可以通过 FireBug 看到的 XML 文档..

我仔细检查了每一行.. 希望有人发现我的错误 :) 如果您需要任何进一步的代码，请告诉我！

编辑： - 添加初始化代码

function initialize() {
                    var hideInfos = [
                        {
                            featureType: "poi",
                            elementType: "labels",
                            stylers: [
                                { visibility: "off" }
                            ]
                    }
                ];  

                // Map configurations
                  var mapOptions = {
                    zoom:12,
                    minZoom:12,
                    maxZoom:19,
                    disableDefaultUI: true,
                    styles: hideInfos,
                    center: new google.maps.LatLng(48.149137,11.5637916)
                  };

                  // Create a new Map with the config above; save object into "map" variable
                  var map = new google.maps.Map(document.getElementById('map'),mapOptions);

                  // Borderpath configuration
                  var borderCoordinates = [
                      new google.maps.LatLng(48.096655, 11.474876),
                      new google.maps.LatLng(48.191954, 11.474876),
                      new google.maps.LatLng(48.191954, 11.655120),
                      new google.maps.LatLng(48.096655, 11.655120),
                      new google.maps.LatLng(48.096655, 11.474876)
                    ];

                    // Create a new Polyline with config above; save object into "border"
                    var border = new google.maps.Polyline({
                      path: borderCoordinates,
                      strokeColor: '#FF0000',
                      strokeOpacity: 1.0,
                      strokeWeight: 2
                    });

                    // Draw border on map
                    border.setMap(map);

                  // Create new LatLngBounds Object and save it into strictBounds
                  var strictBounds = new google.maps.LatLngBounds(
                    new google.maps.LatLng(48.096655, 11.474876), 
                    new google.maps.LatLng(48.191954, 11.655120)
                  );

                  // Listen for the dragend event and check if dragged out of strictBounds
                  google.maps.event.addListener(map, 'dragend', function() {
                    if (strictBounds.contains(map.getCenter())) return;

                    // We're out of bounds - Move the map back within the bounds
                    var c = map.getCenter(),
                        x = c.lng(),
                        y = c.lat(),
                        maxX = strictBounds.getNorthEast().lng(),
                        maxY = strictBounds.getNorthEast().lat(),
                        minX = strictBounds.getSouthWest().lng(),
                        minY = strictBounds.getSouthWest().lat();

                    if (x < minX) x = minX;
                    if (x > maxX) x = maxX;
                    if (y < minY) y = minY;
                    if (y > maxY) y = maxY;

                    map.setCenter(new google.maps.LatLng(y, x));
                  });

                  // Place Marker where clicked
                  google.maps.event.addListener(map, 'click', function(e) { 
                      placeMarker(e.latLng, map);
                  });
                }

Answer 1

很难看到您发布的此代码有任何错误。 但我认为您显示的是 Google Maps 实例的错误。 介意在此处粘贴代码（地图初始化代码）吗？

编辑：

如果我理解的话，您是在尝试在“初始化”函数之外调用“地图”变量。就是它？您需要在函数外部实例化，使变量成为全局变量。