需要帮助转换弃用的谷歌地图API代码到V3

Need help converting deprecated Google Maps API code to V3

本文关键字：API 谷歌地图 代码 V3 帮助 转换      更新时间：2023-09-26

我正在研究Foursquare/Google Maps API集成，我正在使用我在GitHub上找到的脚本作为起点。问题是这个脚本是3年前编写的，并且使用了非常早期的jQuery Mobile版本来渲染地图。我想摆脱jQuery移动库和使用更新的谷歌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);
谁能给我指个正确的方向?谢谢!

map没有回调选项(函数永远不会被执行)。

您可以通过将此添加到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);
    }); 
}
相关文章：