Question

我正在学习使用Rails现在使用javascript，并且我在使用AJAX根据我当前的位置更新我的标记时遇到了一些问题。我相信就绪页面：加载没有运行已作为数据属性附加的更新的坐标，因为页面在技术上没有重新加载，所以是coords。如何使用当前位置数据并使用经度/纬度值事件更新它？

var map; 

$(document).on('ready page:load', function() {
 if ("geolocation" in navigator) {
    myMap.init();

    var coords = $('#map-canvas').data('coords');

    if (coords){
        myMap.addMarkers(coords);
    }
 }
});

myMap.init = function() {
 if(navigator.geolocation){

  var mapOptions = {
    zoom: 14,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };

 map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);

 navigator.geolocation.getCurrentPosition(function(position){

    var pos = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
    var infoWindow = new google.maps.InfoWindow({
        map: map,
        position: pos
    });

    var marker = new google.maps.Marker({
        position: new google.maps.LatLng(position.coords.latitude, position.coords.longitude),
        map: map
    });

    map.setCenter(pos);

    var latitude = position.coords.latitude;
    var longitude = position.coords.longitude;  

    $.ajax({
        url:"/all_events",
        method: "GET",
        data: {
            latitude: latitude,
            longitude: longitude
        },
        dataType: 'script'
    });
});

} else {
    document.getElementById('map-canvas').innerHTML = 'No Geolocation Support.';
}

};

myMap.addMarkers = function(coords){

var image = "http://maps.google.com/mapfiles/ms/icons/yellow-dot.png"

coords.forEach(function(coord){
    var myMarker = new google.maps.Marker({
        position: new google.maps.LatLng(coord.latitude, coord.longitude),
        map: map,
        icon: image
    });
});
}

Answer 1

为了让您的脚本按照您想要的方式工作，请尝试以下步骤：

将foreach循环放在函数中，并在连续的AJAX回调结束时调用它。
Google地图完成加载后加载AJAX。如果谷歌地图库尚未完成加载而不能创建谷歌LatLng对象，那么这就是可能发生的事情。

希望这会有所帮助

使用Google Map API上的当前位置更新标记

1 个答案: