1.注册一个密钥。
申请链接:http://lbsyun.baidu.com/apiconsole/key?application=key
2.点击创建根据自身的选择填写
- 示例代码
// An highlighted block
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
body, html,#allmap {width: 100%;height: 100%;overflow: hidden;margin:0;font-family:"微软雅黑";}
</style>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=这里填写你刚刚申请的密钥"></script>
//上面记得填写您申请的密钥喔
<title>浏览器定位</title>
</head>
<body>
<div id="allmap"></div>//产生地图的区块
</body>
</html>
<script type="text/javascript">
// 百度地图API功能
var map = new BMap.Map("allmap");//创建
var point = new BMap.Point(116.331398,39.897445);
map.centerAndZoom(point,12);
var geolocation = new BMap.Geolocation();
geolocation.getCurrentPosition(function(r){
if(this.getStatus() == BMAP_STATUS_SUCCESS){
var mk = new BMap.Marker(r.point);
map.addOverlay(mk);
map.panTo(r.point);
alert('您的位置:'+r.point.lng+','+r.point.lat);
}
else {
alert('failed'+this.getStatus());
}
},{enableHighAccuracy: true})
</script>
浏览结果:
接下来自己试着一遍吧,这里有百度官方给了更详细的示例供您参考
http://lbsyun.baidu.com/jsdemo.htm#a1_2
个人github:https://github.com/webxingkong
如有不正确的地方请指教联系修改,后期将不断更新,谢谢你们的支持