在ionic2项目

Question

我安装了一个非常基本的ionic2项目，支持传单（https://github.com/SBejga/ionic2-map-leaflet）。然后我执行了

sudo npm install --save leaflet-routing-machine

为了安装传单路由机。在map.ts上，我有以下代码：

import { Component } from '@angular/core';
import { NavController, NavParams } from 'ionic-angular';

import "leaflet";
import "leaflet-routing-machine"

declare var L: any;

/*
  Generated class for the Map page.

  See http://ionicframework.com/docs/v2/components/#navigation for more info on
  Ionic pages and navigation.
*/
@Component({
  selector: 'page-map',
  templateUrl: 'map.html'
})
export class MapPage {
  map: L.Map;
  center: L.PointTuple;

  constructor(public navCtrl: NavController, public navParams: NavParams) {}

  ionViewDidLoad() {
    console.log('ionViewDidLoad MapPage');

    //set map center
    //this.center = [48.137154, 11.576124]; //Munich
    this.center = [48.775556, 9.182778]; //Stuttgart

    //setup leaflet map
    this.initMap();

    L.Routing.control({
      waypoints: [
        L.latLng(48.776, 9.183),
        L.latLng(48.786, 9.193)
      ]
    }).addTo(this.map);

  }

  initMap() {
    this.map = L.map('map', {
      center: this.center,
      zoom: 13
    });

    //Add OSM Layer
    L.tileLayer("http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png")
      .addTo(this.map);
  }

}

地图似乎正常加载，但我没有得到任何路由。在控制台中，我收到消息：

  

router.project-osrm.org/route/v1/driving/9.183,48.776;9.193,48.786?overview=false&alternatives=true&steps=true&hints=;无法加载资源：服务器响应状态为503   （服务不可用：后端服务器处于容量状态）localhost /：1   无法加载   https://router.project-osrm.org/route/v1/driving/9.183,48.776;9.193,48.786?overview=false&alternatives=true&steps=true&hints= ;:   No＆＃39; Access-Control-Allow-Origin＆＃39;标题出现在请求的上   资源。起源＆＃39; http://localhost:8100＆＃39;因此是不允许的   访问。响应具有HTTP状态代码503。   leaflet-routing-machine.js：10477路由错误：对象

我做错了吗？

Answer 1

要在Chrome上运行，请安装Chrome插件Allow Control allow origin并启用它。