Javascript 需要帮助将不推荐的Google Maps API代码转换为V3吗

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

这是使用旧库的脚本：

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

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

函数加载映射（）{
变量映射选项={
中心：新google.maps.LatLng（39.828175，-98.5795），
缩放：4，
街景控制：错误，
mapTypeControl:false，
mapTypeId:google.maps.mapTypeId.ROADMAP，
回调：函数（映射）{
if（navigator.geolocation）{
navigator.geolocation.getCurrentPosition（
职能（职位）{
jQuery.userloc=new google.maps.LatLng（position.coords.latitude，position.coords.longitude）；
addFoodTruckMarker（jQuery.userloc，'userloc.png'，'你在这里。
'）；
map.panTo（jQuery.userloc）；
loadFoodTrucks（{lat:position.coords.latitude，lng:position.coords.longitude，userloc:jQuery.userloc，zoomtotrucks:true}）；
},
函数（错误）{
//jQuery.mobile.pageLoading（true）；
警报（“对不起，找不到您的位置。”）；
},
{
EnableHighAccurance:正确，
最大值：（1000*60*10），
超时：（1000*20）
}
);
}
}
};
var map=new google.maps.map（document.getElementById（“map_canvas”），
地图选项）；
}
google.maps.event.addDomListener（窗口'load'，loadMap）；

---

谁能给我指出正确的方向吗？谢谢

映射没有回调选项（函数永远不会执行）

您可以通过将其添加到

loadMap（）

的末尾来自行实现：

但是不需要等待任何东西，您可以直接在

回调中执行代码（在loadMap的末尾）。当然，您还需要更新
addFoodTruckMarker
，因为它仍然需要
jqueryui映射

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

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

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);

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

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