首先引入百度地图
在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(lat, long), 7); }; function onError(error) { alert(‘无法获取地理位置‘); }}
}结果如图：
我是用浏览器版截图的，所以会谈出图二提示框，我打包到手机上过，是正常的，如果我这个方法有什么bug请指教。
时间： 2024-10-23 20:48:12