2

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

我有百度地图的 API 密钥（用于 JS API），地图在浏览器中运行良好（即ionic serve -l），但是一旦编译并安装在真实设备上，地图就不会显示。

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

例如，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"
    };
  }
}

任何的想法？

4

1 回答 1

4

好的，我查看了源代码，这是组件决定使用哪个协议的方式：

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

因此，如果没有传递任何协议，则它使用的是提供页面的协议（在 ionic 的情况下，这是 file:// 或在 WKWebview localhost:// 的情况下）。

现在您在问题中说您尝试传递不同的协议，但查看您的代码，您将其作为opts对象的属性传递。但是如果你看一下百度地图组件，它会期望协议作为一个单独的@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>
于 2017-09-08T10:58:46.780 回答