创建具有起点，目的地和航点的MapKit JS

Question

我正在从Google Maps API迁移到Apple MapKit JS，原因很简单，我有一个开发者帐户，他们提供更多的免费点击。

无论如何，MapKit JS的实际示例有点单薄(或者至少Google没有找到它们 - 绘制您将绘制的阴谋论(，因此，尽管我已经掌握了显示嵌入式地图的基本知识，但我似乎无法进行下一步，即两点之间的路由(Apple的文档似乎也难以理解，因为它们没有显示示例(。

这是我的基本地图脚本：

<script>
mapkit.init({
authorizationCallback: function(done) {
done('[MY-TOKEN]');
}
});
var MarkerAnnotation = mapkit.MarkerAnnotation
var myMarker = new mapkit.Coordinate(55.9496320, -3.1866360)
var myRegion = new mapkit.CoordinateRegion(
new mapkit.Coordinate(55.9496320, -3.1866360),
new mapkit.CoordinateSpan(0.003, 0.003)
);
var map = new mapkit.Map("map");    
var myAnnotation = new MarkerAnnotation(myMarker, { color: "#9b6bcc", title: "theSpace On The Mile"});
map.showItems([myAnnotation]);  
map.region = myRegion;
</script>

现在我想：

•显示两点之间的步行路线

•在路线上包括航点

有人可以展示可以实现这一点的代码吗？一旦我看到一个例子，我知道我会得到它;-(

Answer 1

好的，所以我找到了解决这个问题的方法，所以为了其他人的利益，在这里分享它。

让我们首先说Apple的MapKit JS似乎没有Google Maps API提供的航点选项 - 所以解决方法是创建一个地图，将标记存储在数组中，然后从一个路由到下一个。代码将最后一个航点的位置存储在变量中，如果这是数组中的第一个航点(显然(，则不会费心绘制到最后一个航点的路线。

<script>
// Initiallise MapKit - you'll need your own long-lived token for this 
mapkit.init({
authorizationCallback: function(done) {
done('[MY-TOKEN]');
}
});
// Function to draw the route once MapKit has returned a response
function directionHandler(error, data) {
data["routes"].forEach(function(route, routeIdx) {
if (routeIdx !== 0) { return; }
overlays = [];
route['path'].forEach(function(path) {
// This styles the line drawn on the map
let overlayStyle = new mapkit.Style({
lineWidth: 3,
strokeColor: "#9b6bcc"
});
let overlay = new mapkit.PolylineOverlay(path, {
style: overlayStyle
});
overlays.push(overlay);
});
map.addOverlays(overlays);
});
}
// This asks MapKit for directions and when it gets a response sends it to directionHandler
function computeDirections(origin,destination) {
let directionsOptions = { 
origin: origin, 
destination: destination, 
transportType: mapkit.Directions.Transport.Walking 
};
directions.route(directionsOptions, directionHandler);
}   
// This sets the initial region, but is overridden when all points have been potted to automatically set the bounds
var myRegion = new mapkit.CoordinateRegion(
new mapkit.Coordinate(55.9496320, -3.1866360),
new mapkit.CoordinateSpan(0.05, 0.05)
);
var map = new mapkit.Map("map");
map.region = myRegion;

var myAnnotations = [];
// lastWaypoint variable is 'unset' initially so the map doesn't try and find a route to the lastWaypoint for the first point of the route
var lastWaypoint = "unset";
var directions = new mapkit.Directions();
// Array of co-ordinates and label for marker
waypoints = [
{name:'Sofi’s Bar',lat:55.9746308,lon:-3.1722282},
{name:'TThe Roseleaf Cafe',lat:55.975992,lon:-3.173474},
{name:'Hemingway’s',lat:55.9763631,lon:-3.1706564},
{name:'Teuchter’s Landing',lat:55.9774693,lon:-3.1713826},
{name:'The King’s Wark',lat:55.9761425,lon:-3.1695419},
{name:'Malt and Hops',lat:55.975885,lon:-3.1698957},
{name:'The Carrier’s Quarters',lat:55.9760813,lon:-3.1685323},
{name:'Noble’s',lat:55.974905,lon:-3.16714},
{name:'The Fly Half',lat:55.9747906,lon:-3.1674496},
{name:'Port O’ Leith',lat:55.974596,lon:-3.167525}
];  
// Loop through the array and create marker for each    
waypoints.forEach(function(data) {
var myAnnotation = new mapkit.MarkerAnnotation(new mapkit.Coordinate(data['lat'],data['lon']), { 
color: "#9b6bcc", 
title: data['name']
});
myAnnotations.push(myAnnotation);
// As long as this isn't the first point on the route, draw a route back to the last point
if(lastWaypoint!="unset") {
computeDirections(lastWaypoint,new mapkit.Coordinate(data['lat'],data['lon']));
}
lastWaypoint = new mapkit.Coordinate(data['lat'],data['lon']);
});
map.showItems(myAnnotations);       
</script>

这张地图是用于在利斯周围的酒吧爬行，所以trasportType是"步行"，但如果你愿意，可以把它改成"汽车"。

感谢Vasile，他的MapKit JS演示(https://github.com/vasile/mapkit-js-demo(帮助我更多地了解了这些选项。