使用jQuery动态添加谷歌地图V3标记

Dynamically Add Google Map V3 Markers using jQuery

本文关键字：V3 标记 谷歌地图 添加 jQuery 动态 使用      更新时间：2023-09-26

我正在使用jquery和Google Maps V3 API动态地向Google Maps添加标记。当单击按钮search_button时，使用AJAX将请求发送到服务器，该请求返回与结果相对应的JSON LatLng数组，该数组将用于放置标记。然而，在我的Javascript控制台，我得到的错误:Invalid value for property <map>: map。我哪里做错了?下面是我的代码:

HTML Header 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
            });
        }
    });
});
});

你应该让你的变量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
            });
        }
    });
}
相关文章：