IOS：地圖與路線

在我的應用程序中，我應該創建一個viewcontroller，裏面應該是一張地圖; 在這張地圖中，我應該看到連接兩個引腳的路線。（因爲我有兩個引腳）所以我想知道有什麼最好的解決方案來得到這個結果;我應該再次看到兩種類型的路線：一條有汽車和一條步行路線的路線...... 有沒有可以幫助我的框架？（因爲mapkit沒有解決我的問題）謝謝IOS：地圖與路線

來源

2012-05-13 CrazyDev

如果您使用的是UIWebView，您可以使用JavaScript並免費獲得基本的功能，因爲正如您所說的，MapKit不提供該功能。這很簡單，請檢查this google maps tutorial for the basics。當然，這樣，你可以獲得html和javascript的所有優點和缺點。

您只需將您的JavaScript代碼寫入html（這裏是map.html），然後將其放入項目文件夾並啓動該HTML文件。

NSString *html = [[NSString alloc] initWithContentsOfFile:[[NSBundle mainBundle] pathForResource:@"map" ofType:@"html"] encoding:NSUTF8StringEncoding error:&error]; 
    [self.mapView loadHTMLString:html baseURL:[NSURL fileURLWithPath:[[NSBundle mainBundle] bundlePath]]];

您可以像這樣調用objective-c的javascript函數。在這裏，在map.html中有一個叫做setMarkerAtPosition(latitude, longitude)的javascript函數。非常直截了當。

[self.mapView stringByEvaluatingJavaScriptFromString:[NSString stringWithFormat:@"setMarkerAtPosition(%f,%f)",latlong.latitude, latlong.longitude]];

編輯應要求：

您添加一個UIWebView並把它掛到控制器（如果你不知道如何做到這一點，你絕對應該從這個退後一步，做一些基本教程）（別忘了合成的MapView。再次，如果你不知道那是什麼做的基本的閱讀）

#import <UIKit/UIKit.h> 
@interface MapViewController : UIViewController 
@property (weak, nonatomic) IBOutlet UIWebView *mapView; 
@end

然後把下面的代碼在您的viewDidLoad method.It創建的NSString和用內容初始化它你的本地html文件（就像已發佈的一樣）。然後，你調用你的UIWebView的loadHTMLString方法。該html字符串基於您的本地html文件map.html（只需將其命名，只需拖放到您的項目中，如果尚未添加）。

- (void)viewDidLoad 
{ 
    [super viewDidLoad]; 
    NSError *error = nil; 
    // create NSString from local HTML file and add it to the webView 
    NSString *html = [[NSString alloc] initWithContentsOfFile:[[NSBundle mainBundle] pathForResource:@"map" ofType:@"html"] encoding:NSUTF8StringEncoding error:&error]; 
    [self.mapView loadHTMLString:html baseURL:[NSURL fileURLWithPath:[[NSBundle mainBundle] bundlePath]]]; 
    [self.view sendSubviewToBack:self.mapView]; 
}

下一個按鈕添加到您的視圖（界面生成器，你應該知道怎麼做），並將其連接到一個方法。在此方法中，把這個代碼（這會給你的方式在德國的一個路徑）

[self.mapView stringByEvaluatingJavaScriptFromString:@"calculateRoute(50.777682, 6.077163, 50.779347, 6.059429)"];

最後，用這個作爲你map.html文件的內容（注意;還有裏面的一些無用的東西，但以後你可以明白這一點我刪除了所有你不需要顯示路線的代碼，但仍然有很多在頭無用）：

<html> 
<head> 
<meta name="viewport" content="initial-scale=1.0, user-scalable=no"> 
<script type="text/javascript" src="http://maps.google.de/maps/api/js?sensor=false&region=DE"></script> 
<script src="http://www.google.com/jsapi"></script> 
<script src="http://code.jquery.com/jquery-1.7.2.js"></script> 
<script src="json.js"></script> 
<script type="text/javascript">google.load("jquery", "1");</script> 
<script type="text/javascript"> google.load("maps", "3", {other_params:"sensor=false"}); </script> 
<script type="text/javascript"> 

    // global variables 
    var currentPosition; 
    directionsDisplay = new google.maps.DirectionsRenderer(); 
    var directionsService = new google.maps.DirectionsService(); 
    var map; 

    var infowindow = new google.maps.InfoWindow(); 

    // calculates the current userlocation 
    function getCurrentLocation(){ 
    if (navigator.geolocation) { 
     navigator.geolocation.getCurrentPosition(success, error); 
    } else { 
     alert('geolocation not supported'); 
    } 
    } 

    // called when the userLocation has been located 
    function success(position) { 
    currentPosition = position; 
    drawMap(position.coords.latitude, position.coords.longitude); 
    } 

    // called when the userLocation could not be located 
    function error(msg) { 
    alert('error: ' + msg); 
    } 

    // calculate and route from-to and show on map 
    function calculateRoute(fromLat, fromLong, toLat, toLong){ 
     var start = new google.maps.LatLng(fromLat, fromLong); 
     var end = new google.maps.LatLng(toLat, toLong); 
     var request = { 
      origin:start, 
      destination:end, 
      travelMode: google.maps.DirectionsTravelMode.WALKING 
     }; 
     directionsService.route(request, function(response, status) { 
      if (status == google.maps.DirectionsStatus.OK) { 
      directionsDisplay.setDirections(response); 
      } 
     }); 
     directionsDisplay.setMap(map); 
    } 


    // draws the inital map and shows userlocation 
    function drawMap(latitude, longitude) { 
    var latlng = new google.maps.LatLng(latitude, longitude); 
     var myOptions = { 
     disableDefaultUI: true, 
     zoom: 15, 
     center: latlng, 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
    }; 
     map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); 
     google.maps.event.addListener(map, 'click', function() {if(infowindow){infowindow.close();}}); 
     setMarkerAtPosition(latitude, longitude); 
    } 

</script> 
</head> 
<body onload="getCurrentLocation()"> 
<div id="map_canvas" style="width:100%; height:100%"> 
</body> 
</html>

來源

2012-05-13 19:57:08 MJB

哇，這很有趣，但我的問題是我不知道JavaScript ... – CrazyDev

你可以去https://developers.google.com/maps/documentation/javascript/examples /並查看代碼並將其粘貼。它不需要太多的知識。獲得必要的知識需要不到一個小時的時間。我建立了一個應用程序，可以在兩小時內顯示沒有任何JavaScript知識的路線..其他人可以在15分鐘內做到這一點。我會說試試看，它真的很簡單 – MJB

好的謝謝，我看看這些例子....非常感謝 – CrazyDev