Ionic 3：百度地图只能在浏览器中使用

Question

在我使用 Ionic 3 开发的应用程序中，我使用 npm 包 angular2-baidu-map 来显示中国大陆的地图。

我有一个百度地图的 API 密钥（对于 JS API），地图在浏览器中工作正常（即 ionic serve -l），但是一旦编译并安装在真实设备上，地图没有显示。

经过一些调试，结果是 API 发送请求到 file://api.map.baidu.com，不管我在 protocol 映射初始化选项中设置什么。

例如，Safari 开发者工具的控制台记录一些很多消息，例如：

The requested URL was not found on this server. file://api.map.baidu.com/api?v=2.0&ak=...&callback=baidumapinit&s=0 Failed to load resource: The requested URL was not found on this server.

编辑：添加代码

基本上我只是用演示代码试用了这个插件。但是，为了完整起见，就在这里。

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，这就是组件决定使用哪个协议的方式：

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>

Ionic 3：百度地图只能在浏览器中使用

Ionic 3: Baidu map working only in browser

angular

typescript

ionic3

baidu

baidu-map