引用百度地图完成基本开发及实用控件使用

最新推荐文章于 2023-10-24 12:25:23 发布

多多_duoduo

最新推荐文章于 2023-10-24 12:25:23 发布

阅读量1.0k

点赞数

文章标签：前端 javascript

本文链接：https://blog.csdn.net/weixin_40779234/article/details/106543506

版权

首先了解百度地图开放平台，官网文档包含Web开发、Android开发、iOS开发、服务接口、开发者工具，介绍全面，需要深入学习的伙伴可以仔细查阅，本文主要讲解Web开发JavaScript API。

如何快速开始地图开发：

申请百度账号和ak
点我申请
准备页面

  <!DOCTYPE html>

适应移动端页面展示

  <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />

设置容器样式

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

引用百度地图API文件

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

创建地图容器元素
地图需要一个HTML元素作为容器，这样才能展现到页面上。这里我们创建了一个div元素。

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

创建地图实例
位于BMapGL命名空间下的Map类表示地图，通过new操作符可以创建一个地图实例。其参数可以是元素id也可以是元素对象。

  var map = new BMapGL.Map("container");

注意：
1、在调用此构造函数时应确保容器元素已经添加到地图上；
2、命名空间 API GL版使用BMapGL作为命名空间，所有类均在该命名空间之下，比如：BMapGL.Map、BMapGL.Control、BMapGL.Overlay；

设置中心点坐标
这里使用BMapGL命名空间下的Point类来创建一个坐标点。Point类描述了一个地理坐标点，其中116.404表示经度，39.915表示纬度。（为帝都中心坐标）

  var point = new BMapGL.Point(116.404, 39.915);

注意：
在使用百度地图JavaScript API服务时，需使用百度BD09坐标，如使用其他坐标（WGS84、GCJ02）进行展示，需先将其他坐标转换为BD09，详细说明请参考坐标转换说明，请勿使用非官方的转换方法。

地图初始化，同时设置地图展示级别
创建地图实例后，需要对其进行初始化，BMapGL.Map.centerAndZoom()方法要求设置中心点坐标和地图级别。地图必须经过初始化才可以执行其他操作

  map.centerAndZoom(point, 15);

至此，我们就快速创建了一张以帝都中心为中心的地图：

在这里插入图片描述
接下来介绍一些百度地图实用控件：

开启鼠标滚轮缩放
地图的鼠标滚轮缩放默认是关闭的，需要配置开启。

  map.enableScrollWheelZoom(true);     //开启鼠标滚轮缩放

设置地图的旋转角度和倾斜角度
地图可以自定义旋转角度和倾斜角角度

  map.setHeading(64.5);   //设置地图旋转角度
  map.setTilt(73);       //设置地图的倾斜角度

添加比例尺控件

  var scaleCtrl = new BMapGL.ScaleControl();  // 添加比例尺控件
  map.addControl(scaleCtrl);

添加地图放大、缩小控件

  var zoomCtrl = new BMapGL.ZoomControl();  // 添加比例尺(放大、缩小)控件
  map.addControl(zoomCtrl);

控件位置偏移
除了指定停靠位置外，还可以通过偏移量来指示控件距离地图边界有多少像素。如果两个控件的停靠位置相同，那么控件可能会重叠在一起，这时就可以通过偏移值使二者分开显示。
如下示例为：将比例尺放置在地图的左下角，由于API默认会有版权信息，因此需要添加一些偏移值以防止控件重叠。

  var opts = {offset: new BMapGL.Size(495, 20)}
  map.addControl(new BMapGL.ScaleControl(opts));

文章到这里就结束了,想了解更多百度地图开发功能可以查看百度地图开放平台~

多多_duoduo

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
2
评论
引用百度地图完成基本开发及实用控件使用

引用百度地图完成基本开发及实用控件使用首先了解百度地图开放平台，官网文档包含Web开发、Android开发、iOS开发、服务接口、开发者工具，介绍全面，需要深入学习的伙伴可以仔细查阅，本文主要讲解Web开发JavaScript API。如何快速开始地图开发：申请百度账号和ak点我申请准备页面 <!DOCTYPE html>适应移动端页面展示 <meta name="viewport" content="initial-scale=1.0, user-scala
复制链接

扫一扫