通过 ajax 加载谷歌地图标记答案

【问题标题】：Load Google Maps markers via ajax通过 ajax 加载谷歌地图标记
【发布时间】：2015-08-22 15:33:18
【问题描述】：

我想使用我自己的地理定位服务通过 ajax 加载 Google 地图的标记。 ajax 功能来自 jQuery。我加载标记的代码如下：

 $(document).ready(function() {

        var myLatlng = new google.maps.LatLng(49.47143, 11.107489999999984);
        var mapOptions = {
            zoom: 8,
            center: myLatlng
        };
        var map = new google.maps.Map(document.getElementById('googlemap'), mapOptions);

        $.ajax({
            type: "GET",
            url: "{{ path('jobs_ajax_get_geolocation') }}",
            data: "addr="+encodeURI("{{ company.getAddress }}, {{ company.getZipCode }} {{ company.getCity }}"),
            success: function(data) {
                var marker = new google.maps.Marker({
                    position: new google.maps.LatLng(data.lat, data.long),
                    map: map,
                    title: 'test'
                });
            }
        });
    });

地图以正确的初始化位置加载，但没有显示任何标记。 url 提供了 ajax 结果（{{ path('jobs_ajax_get_geolocation') }}; 这是一个 symfony-route）。

我的错误在哪里？谢谢！

【问题讨论】：

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

【解决方案1】：

你的问题在错误的范围内。

您在函数定义中声明了var marker。在函数之外它不会存在。但是你需要它在外部范围内。

尝试在关闭前声明它：

$(document).ready(function() {

        var myLatlng = new google.maps.LatLng(49.47143, 11.107489999999984);
        var mapOptions = {
            zoom: 8,
            center: myLatlng
        };
        var map = new google.maps.Map(document.getElementById('googlemap'), mapOptions);
        var marker;

        $.ajax({
            type: "GET",
            url: "{{ path('jobs_ajax_get_geolocation') }}",
            data: "addr="+encodeURI("{{ company.getAddress }}, {{ company.getZipCode }} {{ company.getCity }}"),
            success: function(data) {
                    marker = new google.maps.Marker({
                    position: new google.maps.LatLng(data.lat, data.long),
                    map: map,
                    title: 'test'
                });
            }
        });
    });

【讨论】：