动态添加使用jQuery谷歌地图V3标记 [英] Dynamically Add Google Map V3 Markers using jQuery

问题描述

我加入动态使用jQuery和谷歌地图API V3标志谷歌地图。当按钮 search_button 被点击时，请求使用AJ​​AX，它返回经纬度的JSON数组对应的结果，这将被用于放置标记物被发送到服务器。然而，在我的javascript Conole，我得到的错误：财产和LT的值无效;映射计算值：地图。我哪里做错了？这是我的code：

HTML头JS：

 ＆LT;脚本类型=文/ JavaScript的＆GT;
  函数初始化（）{
  VAR经纬度=新google.maps.LatLng（42.354183，-71.065063）;
  VAR的选择= {
    变焦：15，
    中心：经纬度，
    mapTypeId：google.maps.MapTypeId.ROADMAP
    };
    VAR地图=新google.maps.Map（的document.getElementById（map_canvas提供），选项）;
}
＆LT; / SCRIPT＆GT;
 

的jQuery

  $（函数（）{

$（＃search_button）。点击（函数（五）{
    即preventDefault（）;


        //在地图上的地点标记
        对于（i = 0; I＆LT; json.length;我++）{
            VAR经纬度=新google.maps.LatLng（JSON [I] .lat，JSON [I] .lng）;
            VAR的标记=新google.maps.Marker（{
                位置：经纬度，
                地图：地图
            }）;
        }

    }）;
}）;
}）;
 

解决方案

你应该让你的全局变量调用的地图。这一切，其实我的建议是将所有到JavaScript文件中像这样

  $（文件）。就绪（初始化）;
    VAR地图;

函数初始化（）{
    VAR经纬度=新google.maps.LatLng（42.354183，-71.065063）;
    VAR的选择= {
        变焦：15，
        中心：经纬度，
        mapTypeId：google.maps.MapTypeId.ROADMAP
    };

    地图=新google.maps.Map（$（'＃地图画布'）[0]，选项）;

    $（＃search_button）。点击（函数（五）{
    即preventDefault（）;


        //在地图上的地点标记
        对于（i = 0; I＆LT; json.length;我++）{
            VAR经纬度=新google.maps.LatLng（JSON [I] .lat，JSON [I] .lng）;
            VAR的标记=新google.maps.Marker（{
                位置：经纬度，
                地图：地图
            }）;
        }

    }）;
}
 

I am adding markers to Google Maps dynamically using jquery and Google Maps V3 API. When the button search_button is clicked, a request is sent to the server using AJAX, which returns a JSON array of LatLng corresponding to the results, which will be used to place the markers. However in my Javascript Conole, I get the error: Invalid value for property <map>: map. Where did I go wrong? Here's my code:

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

    });
});
});

解决方案

you should make global your variable called map. That's all, in fact my recommendation it's to move all to a javascript file like this

    $(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
            });
        }

    });
}

这篇关于动态添加使用jQuery谷歌地图V3标记的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！