百度地图API使用
跟着这个文档就可以创建一个简单的百度地图示例。记录一下~
https://lbsyun.baidu.com/index.php?title=jspopularGL
首先需要一个百度帐号(就是百度贴吧账号)
1.必须注册一个百度地图开发者账号(由于百度地图API需要创建自己的地图应用,生产一个AK秘钥key来定义自己的地图)
https://lbsyun.baidu.com/
这里注册的时候会用百度账号来登录,跟着指引填写信息,需要填写真实姓名实名认证。
完成注册后就能登录道控制台,长这样:
2.创建应用,得到一个key
控制台左侧 应用管理 --> 我的应用 --> 创建应用 --> 根据自己的实际情况填写完提交后
就会得到一个应用记录,里面有使用API必须的AK key值
3.页面里怎么使用
根据文章最开始的文档就可以创建一个地图了
下面展示一个简单的demo
// An highlighted block
<!DOCTYPE html>
<html lang="en">
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
...
//这里引入API,使用key
<script type="text/javascript" src="https://api.map.baidu.com/api?v=1.0&&type=webgl&ak=你的key值"></script>
<style>
body{height:100%; overflow:hidden; margin:0px; padding:0px;}
#myMap {height:100%; background:#fff; position:absolute; width:100%;}
</style>
</head>
<body>
<div id="myMap"></div>
</body>
</html>
<script type="text/javascript">
var map = new BMapGL.Map("myMap");
var centerPoint = new BMapGL.Point(114.045555, 22.447969); //中心点经纬度
map.centerAndZoom(centerPoint, 18);
map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放
var zoomCtrl = new BMapGL.ZoomControl(); // 添加缩放控件
map.addControl(zoomCtrl);
var point = new BMapGL.Point(114.045555, 22.447969); //需标记点的经纬度
var marker = new BMapGL.Marker(point);// 创建默认Marker标注
map.addOverlay(marker);
var content = "My point";
var label = new BMapGL.Label(content, { // 创建文本标注
position: point, // 设置标注的地理位置
offset: new BMapGL.Size(-25, 5) // 设置标注的偏移量
})
label.setStyle({ // 设置label的样式
border: 'none'
})
map.addOverlay(label);
</script>
另外:同类型的产品还有腾讯地图、高德地图,其使用方法与百度地图类似,也是需要一个key值来创建自己的地图
腾讯地图:https://lbs.qq.com/webApi/javascriptV2/jsGuide/jsStreetview
高德地图:https://lbs.amap.com/api/javascript-api-v2/getting-started