当前位置: 首页 > 工具软件 > api-wg > 使用案例 >

百度地图API踩坑(一)

华振
2023-12-01

       相信各位老哥之前已经看过了百度地图的官方文档,没有的建议去看一下,写本篇文章的目的是为了让各位想要学习使用百度地图API的兄弟们可以更加清楚明白的了解它要如何使用,结合本人之前的一些项目,告诉大家我之前踩过的坑,希望各位大佬多多指导,想要入门的兄弟们可以便捷一点。

一、账号注册

       首先呢,如果你想要正常使用百度地图API的话,一定要申请开发账号,注册服务密钥,注册方法不再赘述了,官网上很详细,要注意的是同一个百度账号只能申请一次百度开发者!!!!切记!!!不要问我为什么知道(笑哭)

二、hello world

       我们以  JavaScript API GL  为例 ,说一下hello world有什么需要注意的。

       首先我们需要引入百度地图API的js文件

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

      当中 api?v=1.0 ,这个1.0是指 JavaScript API GL 的版本号,因为现在最新的就是1.0,所以这里不需要改,之后如果它继续更新,这个v= 便可以切换他调用的版本号;ak=这里面填写服务密钥,服务密钥很重要,一定要注册百度开发者,再申请密钥。

接下来,要做的是定义地图盒子,也就是承载地图的外部div,下面是官网给出的例子:

<style type="text/css"> 
html{height:100%} 
body{height:100%;margin:0px;padding:0px} 
#container{height:100%} 
</style>

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

这里呢要罗嗦一下,id为container的盒子其实就是百度地图的承载,我们调用的地图会呈现再这个盒子里,所以呢为了方便之后地图的开发,我建议大家用下面的方式定义地图容器:

<style>
   .map_box{
      width:100%;
      height:400px;
   }
   #container{
      width:100%;
      height:100%;
   }
</style>


<div class="map_box">
   <div id="container"></div>
</div>

       在上面的代码中,我把 container外部又包裹了一层div,其目的是为了之后调试的方便,因为直接在盒子容器container的div中修改css样式让我觉得是有风险的。它是容器,那我们就只把它当作容器对待,至于其他效果的实现,我们就把他交给外层的div,可以理解为我们把整个地图容器当作一个组件,为了保证他的独立性,所以把其他展示效果赋予外层的div。

然后,最重要的要来了!

我们要通过js新建地图对象来导入百度地图,具体如下。

<script type="text/javascript">
var map = new BMapGL.Map("container");
// 创建地图实例 ,container为地图容器的id

var point = new BMapGL.Point(116.404, 39.915);
// 创建点坐标 

map.centerAndZoom(point, 15);
// 初始化地图,设置中心点坐标和地图级别 

</script>

这个地方没有什么特别要注意的,需要知道的有三点:

1.如果要制作的页面中只包含一个地图,那么  var map = new BMapGL.Map("container"); 在整个js文件中只可定义一次!!!切记

2.我们需要知道在百度地图中,所有的位置最后都会通过new BMapGL.Point 新建点对象,再把该点渲染到地图中,之后如果想要在地图上做标记,也要通过该方法。

3.我们之后会发现百度地图有很多内置方法,map. ,为了然js代码更加整洁,易于读懂,我们会写很多函数来对其进行操作,这时候可能会用到map方法,但是map方法只能于var map = new BMapGL.Map("container")同级使用,我们要怎么办呢??? 没错,我们要通过参数传递,即把map当作参数传给下一级,这样便可以调用他的内置方法。

好了,这样百度地图API的hello world页面就创建成功了。在本片文章中,目前还是介绍的最基础的部分,之后还会为大家介绍其他进阶内容,比如说,标记点啊,标记点筛选啊,还有一些更牛批 的功能,之后再给大家介绍,好了本篇文章到此为止了,第二篇(二)我会尽快发出来

 类似资料: