Ionic 3: карта Baidu работает только в браузере

В приложении, которое я разрабатываю для Ionic 3, я использую пакет angular2-baidu-map пакета npm для отображения карт материкового Китая.

У меня есть ключ API для Baidu Maps (для JS API), и карта отлично работает в браузере (т.е. ionic serve -l), но после компиляции и установки на реальном устройстве карта не отображается.

После некоторой отладки получается, что API отправляет запросы file://api.map.baidu.com независимо от того, что я установил в protocol опция инициализации карты.

Например, консоль инструментов разработчика Safari регистрирует множество сообщений, таких как:

Запрашиваемый URL не найден на этом сервере. file://api.map.baidu.com/api?v=2.0&ak=...&callback=baidumapinit&s=0 Не удалось загрузить ресурс: запрошенный URL-адрес не найден на этом сервере.

Редактировать: добавлен код

В основном я только что попробовал этот плагин с демо-кодом. Но ради полноты вот оно.

HTML код

<ion-header>
  <ion-navbar>
    <button ion-button menuToggle>
      <ion-icon name="menu"></ion-icon>
    </button>
    <ion-title>Baidu map</ion-title>
  </ion-navbar>
</ion-header>

<ion-content>
<baidu-map ak="{{ak}}"
     [options]="opts" [offline]="offlineOpts" 
     (onMapLoaded)="loadMap($event)" 
     (onMarkerClicked)="clickMarker($event)" 
     (onClicked)="clickMap($event)"></baidu-map>
</ion-content>

Машинопись

карта-baidu.module.ts

import { NgModule } from '@angular/core';
import { IonicPageModule } from 'ionic-angular';
import { MapBaiduPage } from './map-baidu';
import { TranslateModule } from '@ngx-translate/core';
import { BaiduMapModule } from 'angular2-baidu-map';

@NgModule({
  declarations: [
    MapBaiduPage,
  ],
  imports: [
    IonicPageModule.forChild(MapBaiduPage),
    TranslateModule.forChild(),
    BaiduMapModule
  ],
})
export class MapBaiduPageModule {}

карта-baidu.ts

import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
import { OfflineOptions, ControlAnchor, NavigationControlType } from 'angular2-baidu-map';

@IonicPage()
@Component({
  selector: 'page-map-baidu',
  templateUrl: 'map-baidu.html',
})
export class MapBaiduPage {

  public ak:string = '<your Baidu JS API key here>';
  opts: any;
  offlineOpts: OfflineOptions;

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

  ionViewDidLoad() {
    console.log('ionViewDidLoad MapBaiduPage');
  }

  loadMap(map:any){
    console.log('> loadMap:', map);
  }
  clickMap(e:any){
    console.log('> clickMap:', e.point.lat, e.point.lng);
  }

  clickMarker(marker:any){
    console.log('> clickMarker:', marker);
  }

  ngOnInit() {
    this.opts = {
      // protocol:'https:', // changes nothing
      center: {
        longitude: 121.506191,
        latitude: 31.245554
      },
      zoom: 12,
      markers: [{
        longitude: 121.506191,
        latitude: 31.245554,
        title: 'Where',
        content: 'Put description here',
        enableDragging: true
      }],
      geolocationCtrl: {
        anchor: ControlAnchor.BMAP_ANCHOR_BOTTOM_RIGHT
      },
      scaleCtrl: {
        anchor: ControlAnchor.BMAP_ANCHOR_BOTTOM_LEFT
      },
      overviewCtrl: {
        isOpen: true
      },
      navCtrl: {
        type: NavigationControlType.BMAP_NAVIGATION_CONTROL_LARGE
      }
    };

    this.offlineOpts = {
      retryInterval: 5000,
      txt: "Network unavailable"
    };
  }
}

Любая идея?

Источник

1 ответ

Решение

Хорошо, я посмотрел на исходный код, и вот как компонент решает, какой протокол использовать:

export var loader = function (ak, offlineOpts, callback, protocol) {
  var realProtocol = protocol || location.protocol;

Поэтому, если протокол не передан, он использует протокол, с которого обслуживается ваша страница (в случае ionic это file:// или в случае WKWebview localhost://).

Теперь вы сказали в своем вопросе, что вы пытались передать другой протокол, но, глядя на свой код, вы передали его как свойство opts объект. Но если вы посмотрите на компонент BaiduMap, он ожидает, что протокол будет отдельным @Input:

export class BaiduMap implements OnInit, OnChanges {
  @Input() ak: string;
  @Input() protocol: string;
  @Input() options: MapOptions;

Поэтому вам нужно изменить шаблон компонента следующим образом:

<baidu-map ak="{{ak}}"
  [options]="opts" 
  [offline]="offlineOpts" 
  [protocol]="'https'" // not sure about the extra quotation marks
  (onMapLoaded)="loadMap($event)" 
  (onMarkerClicked)="clickMarker($event)" 
  (onClicked)="clickMap($event)">
</baidu-map>
Источник
Другие вопросы по тегам