通过ajax加载谷歌地图标记

Question

我想使用我自己的地理定位服务通过 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)。

我的错误在哪里？谢谢！

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