需要帮助将已弃用的Google Maps API代码转换为V3(Need help converting deprecated Google Maps API code to V3)

我正在进行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', 'You are here.'); 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文档的示例代码中）：

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

I am working on a Foursquare/Google Maps API integration and I am using a script I found on GitHub as a starting point. The issue is that this script was written 3 years ago and uses a very early version of jQuery Mobile to render the map. I want to get rid of the jQuery Mobile library and use updated Google API V3 code to render the map.

This is the script using the old library:

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', 'You are here.'); 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) } ); } } });

And here is the code that sets the markers:

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

Here is my updated script so far. This is working in terms of loading the map, but it's not putting the user location or the Foursquare venue location on the map. I'm assuming it has something to do with the callback(which I just copied into the example code from the Google API V3 docs for the time being):

Can anyone point me in the right direction? Thanks!

最满意答案

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

你可以通过将它添加到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); }); }

There is no callback-option for a map(the function never will be executed).

You may implement it on your own by adding this to the end of loadMap():

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

But there is no need to wait for anything, you may execute the code inside callback directly (at the end of loadMap). Of course you'll also need to update addFoodTruckMarker , because it still requires jquery-ui-map

Note: libraries may be updated, there is a newer version of jquery-ui-map, the only change that is related to your code is the method addInfoWindow that has been removed, you'll need to update addFoodTruckMarker :

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

更多推荐