Menu
In my app I should create a viewcontroller where inside should be a map; In this map I should see a route that connects two pins. (because I have two pins) So I want to know what's the best solution to have this result; again I should see two type of route: a route with car and a walking route... is there a framework that can help me? (because mapkit don't solve my problem) thanks
601
Yes, Apple Maps does have this feature. The route is optimized to move from your starting point to the next location. It can plan a path between two stops. It currently does not support routes that have multiple destinations or points.
Apple Maps lets you generate a custom route plan but allows a fixed number of additional stops. It initially sets your current location as the starting point that you can change at any point later. In addition, you would have a personalized guide to let you know about unknown places.
If you use a UIWebView, you can use javascript and get the functionality basically for free, because as you said, MapKit does not provide that functionality. It's pretty simple, check this google maps tutorial for the basics. Of course this way, you get all the pros and cons of html and javascript.
You simply write your javascript code into a html (here is map.html) which you put in your project folder and initiate that html file like this.
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]]];
You call a javascript function from objective-c like this. here, in the map.html there is a javascript function called setMarkerAtPosition(latitude, longitude). pretty straight forward.
[self.mapView stringByEvaluatingJavaScriptFromString:[NSString stringWithFormat:@"setMarkerAtPosition(%f,%f)",latlong.latitude, latlong.longitude]];
Edit upon request:
You add a UIWebView and hook it up to the controller (if you don't know how to do this, you should definitely step back from this and do some basic tutorials) (don't forget to synthesize the mapView. again, if you don't know what that is do basic reading)
#import <UIKit/UIKit.h>
@interface MapViewController : UIViewController
@property (weak, nonatomic) IBOutlet UIWebView *mapView;
@end
Then put the following code in your viewDidLoad method.It creates a NSString and initializes it with the contents of your local html file (just like already posted). Then, you call loadHTMLString method of your UIWebView. the html string is based on your local html file map.html (just name it that and just drag and drop into your project if you have not added it yet).
- (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];
}
Next add a button to your view (interface builder, you should know how) and connect it to a method. Inside this method, put this code (this will give you a route in germany by the way)
[self.mapView stringByEvaluatingJavaScriptFromString:@"calculateRoute(50.777682, 6.077163, 50.779347, 6.059429)"];
Last, use this as the content of your map.html file (note; there is also some useless stuff inside, but you can figure that out later. I deleted all the code you don't need to display a route, but there is much in the header that useless):
<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®ion=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>
Please See this tutorial to draw polyline or route in mkmapview
1>Draw route using mapkit
2>From versions above ios4.0 You can use MKOverlayPathView See Apple Docs
26
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
