My current project with Ionic 3 involves incorporating the npm package angular2-baidu-map to display maps of China mainland.
I have successfully obtained an API key for Baidu Maps (for the JS API), and the map functions perfectly in a browser (via ionic serve -l), but once the app is compiled and installed on a physical device, the map fails to appear.
Upon further investigation, it seems that the API is sending requests to file://api.map.baidu.com regardless of the settings in the protocol map initialization option.
For example, the Safari developer tools' console displays numerous messages like:
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.
Edit: included code snippets
Although I initially tested the plugin with the demo code, for completeness, I've provided it here as well.
HTML code
<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>
Typescript
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 {}
map-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"
};
}
}
Any suggestions?