Ionic Cordova quote Baidu Map and use mobile phone GPS positioning

Source: Internet
Author: User

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

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.