离子3:百度地图仅在浏览器中工作

Question

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

我有一个百度地图的 API 密钥(用于 JS API)，并且地图在浏览器中工作正常(即ionic serve -l)，但一旦编译并安装在真实设备上，地图就不会显示。

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

例如，Safari开发人员工具的控制台会记录很多消息，例如：

在此服务器上找不到请求的 URL。 file://api.map.baidu.com/api?v=2.0&ak=...&callback=baidumapinit&s=0 失败 加载资源：在此服务器上找不到请求的 URL。

编辑：添加的代码

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

网页代码

<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>

打字稿

map-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 {}

地图-百度

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

好的，我看了一下源代码，这就是组件决定使用哪种协议的方式：

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

因此，如果没有传递协议，则它正在使用提供页面的协议(在离子的情况下，这是 file://的，或者在WKWebview localhost://的情况下)。

现在你在问题中说你尝试传递不同的协议，但查看你的代码，你把它作为opts对象的属性传递。但是，如果您查看百度Map组件，它期望该协议是一个单独的@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>