三分钟快速上手-百度地图api

最新推荐文章于 2024-05-09 08:57:58 发布

秃头老石

最新推荐文章于 2024-05-09 08:57:58 发布

阅读量430

点赞数 1

文章标签： vue.js 前端开发语言

本文链接：https://blog.csdn.net/sobject/article/details/123909953

版权

一、百度地图的注册？

首先，如果想调用百度地图api，你需要获取一个百度地图api的密钥。

申请密钥很简单，在百度地图api的首页就有相关链接，填写相关信息百度就会给你一个密钥了。

二、使用步骤

引入百度地图的api

<script type="text/javascript" src="http://api.map.baidu.com/api?ak=你的密匙&v=2.0&services=false"></script>

接下来我们就可以创建一个地图试试看了。

地图容器


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

var map = new BMap.Map("container");          // 创建地图实例
var point = new BMapGL.Point(116.404, 39.915);  // 创建点坐标
map.centerAndZoom(point, 15);
//map.centerAndZoom("北京", 15);
//map.centerAndZoom("Hongkong", 15);

这里需要说明三点:

1.map.centerAndZoom方法创建地图，第一个参数可以是根据之前创建好的一个点为中心，创建出地图，也可以根据城市地区的中文名称创建地图。（如果拼写正确，可以根据城市的英文名称来创建）
2.map.centerAndZoom第二个参数是地图缩放级别，最大为19，最小为0。
BMap.Map方法创建地图时候需要一个容器(地图会根据容器的大小自动进行调整。)，填写相关容器的id。

三、控件的使用

百度地图提供了非常丰富的功能空间共我们使用。

1.Control：控件的抽象基类，所有控件均继承此类的方法、属性。通过此类您可实现自定义控件。
2.NavigationControl：地图平移缩放控件，PC端默认位于地图左上方，它包含控制地图的平移和缩放的功能。移动端提供缩放控件，默认位于地图右下方。
3.OverviewMapControl：缩略地图控件，默认位于地图右下方，是一个可折叠的缩略地图。
4.ScaleControl：比例尺控件，默认位于地图左下方，显示地图的比例关系。
5.MapTypeControl：地图类型控件，默认位于地图右上方(地图，卫星，三维)。
6.CopyrightControl：版权控件，默认位于地图左下方。
7.GeolocationControl：定位控件，针对移动端开发，默认位于地图左下方。

map.addControl(new BMap.NavigationControl());//缩放平移控件
map.addControl(new BMap.ScaleControl());    //比例尺
map.addControl(new BMap.OverviewMapControl());//缩略图
map.addControl(new BMap.MapTypeControl()); //地图类型