Use Baidu map plug-in ionic/cordova, ioniccordova

Use Baidu map plug-in ionic/cordova, ioniccordova

In the ionic project, you can use the cordova-plugin-geolocation provided by ng-cordova to implement the positioning function.

However, due to the high wall, this plug-in does not work in the Chinese andorid environment (available in ios environment ).

In China, it is better to use the APIS provided by Baidu map to implement positioning and a series of map extension functions.

Now we use the cordova-qdc-baidu-location provided by 'weizhe He 'to try to create a simple location app.

 

Stpe1: Create a project (the tab project is used here. For details about how to create an Ionic1 project offline, refer to my previous article)

Stpe2: apply for the Baidu map API key

Select the application type: Andorid Application

Package name: Name (id value of the widget node in config. xml)

Stpe3: add the cordova-qdc-baidu-location plug-in to the Project

Install plug-in command: ionic plugin add https://github.com/hewz/cordova-baidu-location -- variable API_KEY = "your application key"
Ps:
Uninstall the plug-in command: ionic plugin rm com. hewz. plugins. baidu. location
List all plug-ins: ionic plugin list

Visible content after installation:

Stpe4: Add JS reference to Baidu map API in the project

Open index.html

4.1 Add code to the head

<meta http-equiv="Content-Security-Policy" content="script-src * 'unsafe-eval'; connect-src * 'unsafe-eval';object-src 'self'; style-src * 'unsafe-inline'; img-src *" >

<Script type = "text/javascript" src = "http://api.map.baidu.com/api? V = 2.0 & ak = your application's key "> </script>

4.2 compile the code for using the plug-in

4.2.1 open www-> templates-> tab-dash.html to modify the code:

<Ion-view-title = "Baidu map test"> <ion-content> <ion-list> <ion-item> <button class = "button-block button- calm "ng-click =" getpoint () "> start positioning </button> </ion-item> <ion-item> longitude: {ret. longpolling} latitude: {ret. latitude }}</ion-item> <div id = "allmap" style = "height: 600px; "> </div> </ion-item> </ion-list> </ion-content> </ion-view>

4.2.2 open www-> js-> controllers. js and modify the [DashCtrl] Code:

. Controller ('dashctrl', function ($ scope) {var map = new BMap. map ("allmap"); // create Map instance var point = new BMap. point (104.108164, 30.773969); // create coordinate $ scope. ret = {latitude: 30.773969, longpolling: 104.108164}; map. centerAndZoom (point, 19); // initialize the map. Use the city name to set the map center var marker = new BMap. marker (point); // creates a map annotation. addOverlay (marker); // Add the annotation to the map $ scope. getpoint = function () {baidu_location.getCurrentPosition (function (data) {$ scope. ret = {longpolling: data. longpolling, latitude: data. latitude}; var map = new BMap. map ("allmap"); // create Map instance var point = new BMap. point (data. longpolling, data. latitude); // create a Coordinate map. centerAndZoom (point, 19); var marker = new BMap. marker (point); // creates a map annotation. addOverlay (marker); // Add annotation to map}, function (err) {alert ("error:" + err )});};})

Stpe5: Test

Note that when we test the project in a browser, We will prompt that the baidu_location is not defined. We need to experience the complete functions on the mobile phone.

After the mobile phone connects to the computer, use the ionic assistant to open the project and debug the real machine, directly install the app on the mobile phone. Note that the mobile phone USB debugging mode is enabled to keep the mobile phone unlocked and lit, the ionic assistant compilation and installation are completed. It may take a few steps:

 

Others:

Baidu map API example

 

Special thanks to Weizhe