Question

我正在进行Foursquare / Google Maps API集成，我正在使用我在GitHub上找到的脚本作为起点。问题是这个脚本是在3年前编写的，它使用了早期版本的jQuery Mobile来渲染地图。我想摆脱jQuery Mobile库并使用更新的Google API V3代码来渲染地图。

这是使用旧库的脚本：

jQuery('#map_canvas').gmap( { 
    'center': new google.maps.LatLng(39.828175, -98.5795), 
    'zoom': 4,  
    'streetViewControl': false, 
    'mapTypeControl': false,
    'mapTypeId': google.maps.MapTypeId.ROADMAP,
    'callback': function (map) {
        if ( navigator.geolocation ) {
            navigator.geolocation.getCurrentPosition ( 
                function( position ) {
                    jQuery.userloc = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
                    addFoodTruckMarker(jQuery.userloc, 'userloc.png', '<p>You are here.</p>');
                    map.panTo(jQuery.userloc);
                    loadFoodTrucks({lat: position.coords.latitude, lng: position.coords.longitude, userloc: jQuery.userloc, zoomtotrucks: true});
                },
                function( error ) {
                    jQuery.mobile.pageLoading( true );
                    alert("Sorry, couldn't find your location.");
                },
                {
                    enableHighAccuracy: true, 
                    maximumAge: (1000 * 60 * 10), 
                    timeout: (1000 * 20)
                }
            );
        }
    }
});

以下是设置标记的代码：

addFoodTruckMarker = function (location, icon, content) {
    jQuery('#map_canvas').gmap('addMarker', { 
        'position': location,
        'icon': icon
    },
    function(map, marker){
        jQuery('#map_canvas').gmap('addInfoWindow', { 
            'position': jQuery.userloc, 
            'content': content
            }, 
            function(iw) {
                jQuery(marker).click(function() {
                    iw.open(map, marker);
                    map.panTo(marker.getPosition());
                });                                                                                                                                                                                                                               
            }
        );
    });
}

到目前为止，这是我更新的脚本。这在加载地图方面很有效，但它并没有将用户位置或Foursquare场地位置放在地图上。我假设它与回调有关（我刚刚将其复制到Google API V3文档的示例代码中）：

function loadMap() {
    var mapOptions = {
      center: new google.maps.LatLng(39.828175, -98.5795),
      zoom: 4,
      streetViewControl: false,
      mapTypeControl: false,
      mapTypeId: google.maps.MapTypeId.ROADMAP,
      callback: function (map) {
        if ( navigator.geolocation ) {
            navigator.geolocation.getCurrentPosition ( 
                function( position ) {
                    jQuery.userloc = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
                    addFoodTruckMarker(jQuery.userloc, 'userloc.png', '<p>You are here.</p>');
                    map.panTo(jQuery.userloc);
                    loadFoodTrucks({lat: position.coords.latitude, lng: position.coords.longitude, userloc: jQuery.userloc, zoomtotrucks: true});
                },
                function( error ) {
                    //jQuery.mobile.pageLoading( true );
                    alert("Sorry, couldn't find your location.");
                },
                {
                    enableHighAccuracy: true, 
                    maximumAge: (1000 * 60 * 10), 
                    timeout: (1000 * 20)
                }
            );
        }
      }
    };
    var map = new google.maps.Map(document.getElementById("map_canvas"),
        mapOptions);
}
google.maps.event.addDomListener(window, 'load', loadMap);

有人能指出我正确的方向吗？谢谢！

Answer 1

地图没有回调选项（永远不会执行该功能）。

您可以将其添加到loadMap()：

的末尾，从而自行实施

//execute callback when the map has been finished initializing
google.maps.event.addListenerOnce(map,'bounds_changed',function(){this.callback();})

但是没有必要等待任何事情，你可以直接在callback内执行代码（在loadMap的末尾）。当然，您还需要更新addFoodTruckMarker，因为它仍然需要jquery-ui-map

注意：库可能会更新，有更新版本的jquery-ui-map，与您的代码相关的唯一更改是已删除的方法addInfoWindow ，您需要更新addFoodTruckMarker：

addFoodTruckMarker = function (location, icon, content) {
    jQuery('#map_canvas').gmap('addMarker', { 
        'position': location,
        'icon': icon
    }).click(function() {
        $('#map_canvas').gmap('openInfoWindow', { 'content': content }, this);
    }); 
}

需要帮助将已弃用的Google Maps API代码转换为V3

1 个答案: