First introduce Baidu map
Add in HTML file
<script type= "Text/javascript" src= "http://api.map.baidu.com/api?v=2.0&ak= your Key" ></script>// Apply for a Baidu key, it is recommended to apply for the browser version of the more convenient test
<body>
<button id = "GetPosition" > My location </button>//reference Phone GPS location
<div id= "Allmap" ></div>//quote Baidu map
</body>
Add in the Controller
. Controller (' Chartctrl ', function ($scope) {
var map = new Bmap.map ("Allmap"); Create a Map instance
Map.centerandzoom (new Bmap.point (116.404, 39.915), 11); Initialize the map, set the center point coordinates and the map level
Map.addcontrol (New Bmap.maptypecontrol ()); Add a map type control
map.setcurrentcity ("Beijing"); Set the city that the map displays this entry is
Map.enablescrollwheelzoom (true) that must be set; Turn on mouse wheel zoom
document.getElementById ("GetPosition"). AddEventListener ("click", GetPosition); Reference Phone GPS Location
function GetPosition () {
var options = {
Enablehighaccuracy:true,
maximumage:3600000
}
var Watchid = navigator.geolocation.getCurrentPosition (onsuccess, OnError, Options);
function onsuccess (position) {
var lat = position.coords.latitude;
var long = Position.coords.longitude
Alert (' Latitude: ' + position.coords.latitude + ' \ n ' +
' Longitude: ' + position.coords.longitude + ' \ n ');
Map.centerandzoom (New Bmap.point (lat, long), 7);
};
function OnError (Error) {
Alert (' Cannot get location ');
}
}
}
Results
I am using the browser version, so the talks out of the picture two hint box, I packed to the mobile phone, is normal, if I this method has what bug please advise.
Ionic Cordova quote Baidu Map and use mobile phone GPS positioning