Ionic call Baidu plugin and use Baidu map

Ionic Ngcordova offers Google Maps based positioning function

Start the project tour below
1. New Project
Ionic start Ionic_barcode Blank
CD Ionic_barcode
Ionic Platform Add Android
2, add Baidu map positioning plug-in

Cordova Plugin Add https://

Baidu Map Location Plugin address: https://github.com/mrwutong/cordova-qdc-baidu-location
There is a way to use the plug-in

3. Using Baidu Map Plugin
In the index.html
Method of invoking a map in a controller

$scope. Tirarfoto =function () {/*alert ("Start positioning");*/      varMap =NewBmap.map ("Allmap"); Map.centerandzoom (NewBmap.point (116.331398,39.897445), One); Map.enablescrollwheelzoom (true); Baidu_location.getcurrentposition (data) {$scope. Data=data; $rootScope. Team=data; }, function (ERR) {alert ("Error:"+err)}) ;

4. Map Display Page

<ion-view view-title="Baidu Plugin Locator"> <ion-contentclass="padding"> <buttonclass="button Button-block button-positive icon-left"ng-click="Tirarfoto ()">Get geo-location</button> </br></br> <p> location data </p></br></br>{{Data}}<p> Data 2</p>{{Team}}</br></br> <div id="Allmap"></div> <div id="R-result">Longitude:<input id="Longitude"Type="text"style="width:100px; margin-right:10px;"/>Latitude:<input id="Latitude"Type="text"style="width:100px; margin-right:10px;"/> <input type="Button"Value="Enquiry"onclick="thelocation ()"/> </div> </ion-content></ion-view>

The entire Baidu map call was completed

1. When the interface cannot be accessed
Baidu Map, custom API unreachable, remote debugging results display 404
The reason is that the version of Cordova 5.x adds "Content-security-policy" to address security access issues. By default, only native resources can be accessed.
Workaround:
1. Add Whitelist plugin, execute in project directory
Ionic plugin Add Cordova-plugin-whitelist
2. Increase in index.html 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 *" >

2. Baidu map cannot be displayed

<script src="Http://api.map.baidu.com/api?v=2.0&ak=HumGuK48Lis3kPdlHZBxvbvsqgHySljX "></script>

Ionic call Baidu plugin and use Baidu map