嵌入式谷歌地图可以自动更新而无需手动刷新吗?

时间:2016-06-20 13:01:09

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

道歉,如果这看起来很基本,但我不熟悉使用谷歌产品。我正在创建一个地图,其中包含代表网站周末事件的标记。有没有办法让我的嵌入式周末地图有自己添加的新标记和数据,只需将新数据添加到Google工作表中,而无需刷新嵌入代码

谢谢

1 个答案:

答案 0 :(得分:1)

简而言之,是的。答案越长,提供的具体代码就越宽泛。但我可以解释一下如何做到这一点。

您需要对数据源进行AJAX调用才能获取新的数据点。所以页面是用JavaScript动态构建的。我实际上有一个如何做到这一点的工作模型。您可以查看此页面上的来源以获得更好的想法。 Travel tacking webApp

您必须创建一个帐户并创建一个旅程,以便了解它的工作原理。但这是相关的代码。 (用于数据的PHP。用于其他所有内容的JavaScript。)哦,这个例子并没有使用AJAX。这只是对你情况的一个建议。

<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?v=3&sensor=false&libraries=geometry"></script> 

<script type="text/javascript">
    function codeLatLong() {
    var geocoder = new google.maps.Geocoder();
    var address = "64 martha dr hamilton, CA 90210";
    address = document.getElementById("addressIs").value;

    geocoder.geocode({
        'address': address
    }, function (results, status) {

        if (status == google.maps.GeocoderStatus.OK) {
            var latitude = results[0].geometry.location.lat();
            var longitude = results[0].geometry.location.lng();


            document.getElementById("latIs").value = latitude;
            document.getElementById("lonIs").value = longitude;

            initialize(latitude, longitude);

        }

    });
}

    function initialize(latitude, longitude) {
        var latlng = new google.maps.LatLng(lats[1], longs[1]);

        var myOptions = {
            zoom: 14,
            center: latlng,
            mapTypeId: google.maps.MapTypeId.ROADMAP,
            mapTypeControl: false
        };
        var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

        //var marker = new MarkerWithLabel({
                var marker = new google.maps.Marker({
            position: latlng,
            map: map,
            labelContent: streets[1],
            labelAnchor: new google.maps.Point(-7, 20),
            labelClass: "labels",
            title: "location : home"
        });
        for (xx=2;xx<lats.length;xx++){
        var latlng = new google.maps.LatLng(lats[xx], longs[xx]);
            //marker = new MarkerWithLabel({
                        marker = new google.maps.Marker({  
            position: latlng,
            map: map,
            labelContent: streets[xx],
            labelAnchor: new google.maps.Point(-7, 20),
            labelClass: "labels",
            title: "location : home"
        });
        }
    }


//codeLatLong();
//initialize(40, -75);
</script>