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