通过ajax在谷歌地图中显示附加标记答案

【问题标题】：Showing additional marker in google map through ajax通过ajax在谷歌地图中显示附加标记
【发布时间】：2013-03-29 14:41:16
【问题描述】：

我使用“maps.googleapis.com/maps/api/js?v=3”创建了一个谷歌地图。在该地图中，我显示了不同位置的标记，效果很好。以下是我使用的代码。

google.maps.event.addDomListener(window, 'load', function() {
                var map = new google.maps.Map(document.getElementById('map1'), {
                      zoom: 10,
                      center: new google.maps.LatLng(latitude, longitude),
                      mapTypeId: google.maps.MapTypeId.ROADMAP
                });
                var marker = new google.maps.Marker({
                                map: map,
                                position: new google.maps.LatLng(23.42323, -45.47653),

                            });
});

现在我想在 Ajax 中添加更多位置标记。例如：我将从下拉列表中添加位置名称，它会对服务器端进行 ajax 调用。拉出位置经纬度，会显示在地图上。我怎样才能实现它。

我已经编写了一个单独的 js 函数来进行 ajax 调用，但是在里面的代码没有得到'map'实例。这里我只使用了这段代码

    new google.maps.Marker({
    map: map,
    position: new google.maps.LatLng(23.42323, -45.47653),
});

这里我不再初始化地图。所以它没有得到地图实例并抛出错误。如何解决。

【问题讨论】：

标签： javascript google-maps google-maps-api-3

【解决方案1】：

地图的范围仅限于事件句柄内部。试试这个：

var map, markerCollection;

google.maps.event.addDomListener(window, 'load', function() {
    map = new google.maps.Map(document.getElementById('map1'), {
        zoom: 10,
        center: new google.maps.LatLng(latitude, longitude),
        mapTypeId: google.maps.MapTypeId.ROADMAP
    });
});

function addMarker(lat, lng){
    var marker = new google.maps.Marker({
        map: map,
        position: new google.maps.LatLng(lat, lng),
    });
    markerCollection.push(marker);
}

注意事项： 1）在定义地图中心时填写“纬度”和“经度”的值。否则，您只会显示地图。 2) 我知道将标记添加到数组中可能不是最佳做法，但我发现这比后者更容易访问。

【讨论】：

嘿，xion，你能告诉我我应该把代码的上半部分保存在哪里，即写在 addMarker() 上面的代码，以及把下面的部分保存在哪里。因为目前我将地图初始化保存在 document.ready() 和 addmarker() 之外 document.ready()。
通过将代码“var map”放在事件句柄之外，它会将变量的范围变为全局。这将允许您在 javascript 中的任何位置调用“地图”。我不知道您的 ajax 是如何工作的，但这应该是您的工作流程：1）页面加载，2）触发 DOM 侦听器，3）实例化“地图”，4）触发 Ajax（您需要提供更多信息或知道如何自己做），5）Ajax 成功调用'addMarker（lat，lng）'并传递纬度和经度值，6）一个标记应该出现在你的地图上。

【解决方案2】：

由于map 不是全局变量，它正在被取消引用。将 map 对象设为全局对象或在存储所有代码的容器函数中。

全局 JS 示例

//now it's global
var map;
google.maps.event.addDomListener(window, 'load', function () {
    map = new google.maps.Map(document.getElementById('map1'), {
        zoom: 10,
        center: new google.maps.LatLng(latitude, longitude),
        mapTypeId: google.maps.MapTypeId.ROADMAP
    });
    var marker = new google.maps.Marker({
        map: map,
        position: new google.maps.LatLng(23.42323, -45.47653),
    });
});

【讨论】：

是的，我最初编写了这么多代码来显示初始标记。但现在我想通过 ajax 调用添加更多标记而不重新加载页面。为此，我编写了另一个 js 函数，例如 add_more_markers()。如何在此方法中获取地图实例。
只需使用map 变量。它是全球性的。