ionic cordova 引用百度地图以及利用手机GPS定位

Posted wang.man

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了ionic cordova 引用百度地图以及利用手机GPS定位相关的知识,希望对你有一定的参考价值。

首先引入百度地图

html文件里面加入

<head>
  <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=你的密钥"></script> //申请一个百度密钥,建议申请浏览器版的比较方便测试
</head>
<body>
  <button id = "getPosition">我的位置</button>   //引用手机GPS定位

    <div id="allmap"></div>     //引用百度地图

</body>

在控制器里面加入
.controller(\'ChartCtrl\', function ($scope) {
var map = new BMap.Map("allmap");    // 创建Map实例
map.centerAndZoom(new BMap.Point(116.404, 39.915), 11); // 初始化地图,设置中心点坐标和地图级别
map.addControl(new BMap.MapTypeControl()); //添加地图类型控件
map.setCurrentCity("北京"); // 设置地图显示的城市 此项是必须设置的
map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放
document.getElementById("getPosition").addEventListener("click", getPosition);   //引用手机GPS定位
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(long, lat), 7);
};
function onError(error) {
alert(\'无法获取地理位置\');
}
}
}
结果如图:

我是用浏览器版截图的,所以会谈出图二提示框,我打包到手机上过,是正常的,如果我这个方法有什么bug请指教。



以上是关于ionic cordova 引用百度地图以及利用手机GPS定位的主要内容,如果未能解决你的问题,请参考以下文章

ionic3 百度地图插件定位 问题

ionic3引用外部插件--百度地图及echart报表的使用

cordova百度地图定位Android版插件

Ionic 6. 更新到 cordova 10.0.0 后 Google 地图未显示

如何添加 Android 意图以在 Cordova/Ionic 项目中打开谷歌地图?

谷歌地图不适用于 ionic cordova run android