Ionic call Baidu Map API and locate the current location example

First, you can refer to the JS version of the Baidu Map API example.

Because in the Ionic program, we generally use the ES5 or ES6 or the typescript. There are some differences between this and JS. So, in our program, the code is not exactly the same as the official sample code format.

Below, briefly explain how to call the Baidu Map API in the Ionic program.

1. In the Ionic program, navigate to File: \src\index.html. Add the following code and note replace "your key" with the key you requested

<script type= "Text/javascript" src= "http://api.map.baidu.com/api?v=2.0&ak= Your Keys" ></script>

2. Refer to Ionic geolocation official documentation, install the geolocation package, which is used to locate the latitude and longitude information of the current device.
$ ionic Cordova Plugin Add cordova-plugin-geolocation--variable geolocation_usage_description= "to locate You"

$ npm Install--save @ionic-native/geolocation

3. In the Ionic program, open the terminal, enter the Ionic G page map, and register the map page with the Src\app\app.module.

Import {Mappagemodule} from '. /pages/map/map.module ';

Import {geolocation} from ' @ionic-native/geolocation ';

@NgModule ({

Imports: [...

Mappagemodule

Providers: [...

Geolocation

4. In the Ionic program, navigate to File: \src\pages\map\map.html, in ion-content tag, add the following code.

<div class= "Align-bottom" #map id= "Map_container" ></div>

The code looks like this.

5. Navigate to File: \src\pages\map\map.ts,

Import {Component, Viewchild, elementref} from ' @angular/core ';

Import {ionicpage, Navcontroller, Alertcontroller, Navparams, Menucontroller} from ' Ionic-angular ';

Import {geolocation} from ' @ionic-native/geolocation ';

declare var BMap;

declare var bmaplib;

@IonicPage ()

@Component ({

Selector: ' Page-map ',

Templateurl: ' map.html ',

})

Export Class Mappage {

Map:any;

Mygeo:any;

Myicon:any;

@ViewChild (' map ') map_container:elementref;

Constructor (public navctrl:navcontroller, public Navparams:navparams,

Private Geolocation:geolocation) {

Please place an icon file on your own in the Ssets/icon directory.

This.myicon = new Bmap.icon ("Assets/icon/position.png", New Bmap.size (32, 32));

}

Ionviewdidload () {

Amin:! Important:map_container shoud be called here, it can ' t be inited in constructor, if called in constructor

This.map = new Bmap.map ("Map_container");

This.map.centerAndZoom (' Shanghai ', 13);

This.map.enableScrollWheelZoom (TRUE);

This.mygeo = new Bmap.geocoder ();

var Geolocationcontrol = new Bmap.geolocationcontrol ();

This.map.addControl (Geolocationcontrol);

This.getlocation ();

}

GetLocation () {

This.geolocation.getCurrentPosition () and then (resp) = {

if (resp && resp.coords) {

Let Locationpoint = new Bmap.point (resp.coords.longitude, resp.coords.latitude);

Let convertor = new Bmap.convertor ();

Let Pointarr = [];

Pointarr.push (Locationpoint);

Convertor.translate (Pointarr, 1, 5, (data) + = {

if (data.status = = = 0) {

Let marker = new Bmap.marker (Data.points[0], {icon:this.myIcon});

This.map.panTo (Data.points[0]);

Marker.setposition (Data.points[0]);

This.map.addOverlay (marker);

}

})

This.map.centerAndZoom (Locationpoint, 13);

Console.log (' GPS Location: Your location is ' + Resp.coords.longitude + ', ' + resp.coords.latitude ');

}

}). catch (E = = {

Console.log (' Error happened when get current position. ');

});

}

The result of the operation is as shown. Note that the above code is to load the map and implement the positioning function, so please ignore the input box on the way.

If the mistake or any question, welcome the message, also welcome to put forward the criticism. @caiyaming.

Ionic calls the Baidu Map API and locates the current location example