javascript – 使用google maps API和phonegap显示当前位置信息?

前端之家收集整理的这篇文章主要介绍了javascript – 使用google maps API和phonegap显示当前位置信息?前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

我有以下要求

>显示从起点到目的地的路线
>显示用户的当前位置.

我正在创建一个带有路线的地图,然后在其上显示用户的当前位置.

  1. function showDirection(orgn,dstntn)
  2. {
  3. var directionsService = new google.maps.DirectionsService();
  4. var directionsDisplay = new google.maps.DirectionsRenderer();
  5. var map = new google.maps.Map(document.getElementById('displayMap'),{
  6. zoom : 7,mapTypeId : google.maps.MapTypeId.ROADMAP
  7. });
  8. directionsDisplay.setMap(map);
  9. directionsDisplay.setPanel(document.getElementById('displayDirections'));
  10. var request = {
  11. origin : orgn,destination : dstntn,travelMode : google.maps.DirectionsTravelMode.WALKING
  12. };
  13. directionsService.route(request,function(response,status) {
  14. if (status == google.maps.DirectionsStatus.OK) {
  15. directionsDisplay.setDirections(response);
  16. }
  17. });
  18. var win = function(position) {
  19. var lat = position.coords.latitude;
  20. var long = position.coords.longitude;
  21. var myLatlng = new google.maps.LatLng(lat,long);
  22. var iconimage="images/current_location_small.png";
  23. var marker = new google.maps.Marker({
  24. position: myLatlng,map: map
  25. icon: iconimage
  26. });
  27. marker.setMap(map);
  28. };
  29. var fail = function(e) {
  30. alert('Can\'t retrieve position.\nError: ' + e);
  31. };
  32. var watchID = navigator.geolocation.getCurrentPosition(win,fail);
  33. }

如果用户位于为显示路线而创建的地图内,则上述代码可以正常工作,但如果用户不在地图区域内,则不会显示其当前位置.

我不知何故想要三个点1.起点,2.目的地和3.用户位置以适应地图.有没有办法可以缩放地图以适应所有三个点,或者以所有三个点都可见的方式创建原始地图.

最佳答案
在marker.setMap(map)之后添加以下内容;

  1. marker.setMap(map);
  2. //Add these lines to include all 3 points in the current viewport
  3. var bounds = new google.maps.LatLngBounds();
  4. bounds.extend(orgn);
  5. bounds.extend(dstntn);
  6. bounds.extend(myLatlng);
  7. map.fitBounds(bounds);

猜你在找的jQuery相关文章