Question

我使用“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),
});

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

Answer 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）我知道将标记添加到数组中可能不是最佳实践，但我发现这使得后者更容易访问。

Answer 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在谷歌地图中显示其他标记

2 个答案:

全球JS示例