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

最新推荐文章于 2022-03-05 14:31:25 发布

weixin_34117211

最新推荐文章于 2022-03-05 14:31:25 发布

阅读量380

点赞数

文章标签：移动开发 javascript ViewUI

原文链接：http://www.cnblogs.com/amanda-man/p/6437856.html

版权

首先引入百度地图

在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请指教。

转载于:https://www.cnblogs.com/amanda-man/p/6437856.html

weixin_34117211

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫