Question

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

我有一个百度地图的API密钥（用于JS API），地图在浏览器中工作正常（即ionic serve -l），但是一旦编译并安装在真实设备上，地图就不会出现＃39; t出现。

经过一些调试后，无论我在file://api.map.baidu.com map init选项中设置了什么，都会向protocol发送请求。

例如，Safari开发者工具＆＃39;控制台记录 ~~some~~ 很多消息，如：

在此服务器上找不到请求的URL。 file：//api.map.baidu.com/api？v = 2.0＆amp; ak = ...＆amp; callback = baidumapinit＆amp; 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，这就是组件决定使用哪种协议的方式：

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

因此，如果没有传递协议，它将使用您的页面所在的协议（如果是离子，则为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：百度地图仅在浏览器中工作

1 个答案: