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

【问题标题】：Need help converting deprecated Google Maps API code to V3需要帮助将弃用的 Google Maps API 代码转换为 V3
【发布时间】：2014-04-14 05:33:29
【问题描述】：

我正在研究 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);

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

【问题讨论】：

标签： javascript jquery api google-maps google-maps-api-3

【解决方案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);
    }); 
}

【讨论】：