使用 jQuery 动态添加 Google Map V3 标记答案

【问题标题】：Dynamically Add Google Map V3 Markers using jQuery使用 jQuery 动态添加 Google Map V3 标记
【发布时间】：2011-12-12 06:40:00
【问题描述】：

我正在使用 jquery 和 Google Maps V3 API 向 Google Maps 动态添加标记。当点击按钮search_button 时，使用AJAX 向服务器发送一个请求，该请求返回一个与结果对应的LatLng 的JSON 数组，该数组将用于放置标记。但是在我的 Javascript Conole 中，我得到了错误：Invalid value for property <map>: map。我哪里做错了？这是我的代码：

HTML 标头 JS：

<script type="text/javascript">
  function initialize() {
  var latlng = new google.maps.LatLng(42.354183,-71.065063);
  var options = {
    zoom: 15,
    center: latlng,
    mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    var map = new google.maps.Map(document.getElementById("map_canvas"), options);
}
</script>

jQuery

$(function() {

$("#search_button").click(function(e){
    e.preventDefault();


        // Place markers on map
        for( i = 0; i < json.length; i++) {
            var latLng = new google.maps.LatLng(json[i].lat, json[i].lng);
            var marker = new google.maps.Marker({
                position: latLng,
                map: map
            });
        }

    });
});
});

【问题讨论】：

如何先执行ajax调用，然后加载带有标记的地图？因为地图是在窗口加载时加载的，而 ajax 调用是稍后执行的，所以在地图加载后稍后会收到纬度/经度。你能帮我解决这个问题好几个小时。如何强制 Ajax 调用先进行并获取数组，然后使用标记加载地图？

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

【解决方案1】：

你应该将你的变量设为全局变量，称为 map。就是这样，实际上我的建议是将所有内容都移动到这样的 javascript 文件中

    $(document).ready(initialize);
    var map;

function initialize() {
    var latlng = new google.maps.LatLng(42.354183,-71.065063);
    var options = {
        zoom: 15,
        center: latlng,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };

    map = new google.maps.Map($('#map-canvas')[0], options);

    $("#search_button").click(function(e){
    e.preventDefault();


        // Place markers on map
        for( i = 0; i < json.length; i++) {
            var latLng = new google.maps.LatLng(json[i].lat, json[i].lng);
            var marker = new google.maps.Marker({
                position: latLng,
                map: map
            });
        }

    });
}

【讨论】：