调用百度地图api

一篇很详细的调用百度api教程

z.q.xiao

3094人浏览 · 2022-01-13 19:35:39

z.q.xiao · 2022-01-13 19:35:39 发布

首先进入百度地图api官网:

百度地图开放平台 | 百度地图API SDK | 地图开发百度地图API是一套为开发者提供的基于百度地图的应用程序接口，包括JavaScript、iOS、Andriod、静态地图、Web服务等多种版本，提供基本地图、位置搜索、周边搜索、公交驾车导航、定位服务、地理编码及逆地理编码等丰富功能。LBS·云是百度地图针对LBS开发者全新推出的平台级服务。通过地图API，一方面解决移动开发者服务器端日益增长的海量位置数据的存储维护压力，另一方面彻底解决所有LBS开发者基于位置数据的高并发检索瓶颈。https://lbsyun.baidu.com/index.php?title=%E9%A6%96%E9%A1%B5然后点击控制台|应用管理|我的应用

然后创建应用

注意,要是在浏览器端访问一定要选择浏览器端, 不要选服务端, 其他的按照步骤来就行了

创建好之后, 选择开发文档,可以看到面向各种操作系统和平台的服务

我以Web开发的JavaScript API来演示

先写最简单的Hello World, 点击右侧的Hello World

这时看文档大概也知道怎么做了吧, 下面直接上我的代码, 注意一定要是自己的密钥

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>Hello, World</title> 
<style type="text/css">
    html{height:100%} 
    body{height:100%;margin:0px;padding:0px} 
    #container{height:100%}
</style>

<script type="text/javascript" src="https://api.map.baidu.com/api?v=1.0&type=webgl&ak=您的密钥">
</script>

</head>
<body>
<div id="container"></div>
</body>

<script type="text/javascript">
    var map = new BMapGL.Map("container");
    // 创建地图实例 
    var point = new BMapGL.Point(116.404, 39.915);
    // 创建点坐标 
    map.centerAndZoom(point, 15);
    // 初始化地图，设置中心点坐标和地图级别
    map.enableScrollWheelZoom(true);
    // 开启鼠标滚轮缩放
</script>

</html>

然后就调用成功啦, Hello World!

但有时候可能会报如下错误: A parser-blocking, cross site (i.e. different eTLD+1) script

不要怀疑,一定是引入api的链接错了, 仔细检查有没有各个参数: v, type, ak, 修改过来就好了