百度地图接口调用
前往百度地图开放平台 | 百度地图API SDK | 地图开发 (baidu.com),注册登录,进入控制台
点击应用管理—我的应用—创建应用:
选择相应需求的应用类型和服务,名命应用名称,IP白名单根据提示要求输入,提交即可;
提交创建完成后会有对应的应用AK,这个AK即为你访问连接百度开放平台的密钥
接下来准备页面
根据HTML标准,每一份HTML文档都应该声明正确的文档类型,建议使用最新的符合HTML5规范的文档声明:
<!DOCTYPE html>
- 设置容器样式,设置容器样式大小,使地图充满整个浏览器窗口
<style type="text/css">
html{height:100%}
body{height:100%;margin:0px;padding:0px}
#container{height:100%}
</style>
- 引用百度地图API文件
<script type="text/javascript" src="https://api.map.baidu.com/api?v=3.0&ak=您的密钥"></script>
- 创建地图容器元素
地图需要一个HTML元素作为容器,这样才能展现到页面上。这里创建了一个div元素。
<div id="container"></div>
- 创建地图实例
位于BMap命名空间下的Map类表示地图,通过new操作符可以创建一个地图实例。其参数可以是元素id也可以是元素对象。
var map = new BMap.Map("container");
- 设置中心点坐标
这里我们使用BMap命名空间下的Point类来创建一个坐标点。Point类描述了一个地理坐标点,其中116.404表示经度,39.915表示纬度。(为天安门坐标)
var point = new BMap.Point(116.404, 39.915);
- 地图初始化,同时设置地图展示级别
在创建地图实例后,BMap.Map.centerAndZoom()方法要求设置中心点坐标和地图级别。 地图必须经过初始化才可以执行其他操作。
map.centerAndZoom(point, 15);
至此,就成功快速创建了一张以天安门为中心的地图!
地图被实例化并完成初始化以后,就可以与其进行交互了。API中的地图对象的外观与行为与百度地图网站上交互的地图非常相似。它支持鼠标拖拽、滚轮缩放、双击放大等交互功能。