Ionic 3：ブラウザでのみ動作するBaiduマップ

Question

Ionic 3で開発しているアプリでは、npmパッケージangular2-baidu-mapを使用して中国本土の地図を表示しています。

私はBaidu Maps（JS API用）のAPIキーを取得しており、マップはブラウザ（つまりionic serve -l）で正常に動作していますが、実際のデバイスにコンパイルしてインストールしてもマップは表示されませんアップ。

デバッグを行った後、 map initオプションで設定した内容にかかわらず、APIがfile://api.map.baidu.comに要求を送信することが判明しました。例えば

は、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" 
    }; 
    } 
} 

いいですか？

Answer 1

私はsourcecodeを見ていたし、これはコンポーネントが使用するプロトコルを決定する方法でOK：

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>