首页 > 网络编程 > JavaScript > uniapp使用百度地图的保姆式教学(适合初学者!)

uniapp使用百度地图的保姆式教学(适合初学者!)

福牛 3月 27, 2023 43 0

前言

最近在写一个移动端的地图项目，也是首次完整的去了解百度地图api，这篇博客会手把手的教你如何使用百度地图api和一些常见问题，后续我也会继续更新完善此博客

1、百度地图api，获取密钥

为什么选择这个呢，作为顶级大厂，百度地图开放平台功能非常完善而且简单明了

-1

这篇博客主要是以JavascriptAPI为主

首先登入控制台左侧应用管理→我的应用→创建应用

-2

-3

完成这些后可以看到我的应用中多了个刚才创建的，里面的访问应用（AK）就是我们需要的AK。

2、uniapp中使用百度地图api

看了很多博客，有的博客说npm下载对应的然后全局挂载之类的，这里我按照官网所说的来写。

2.1web-view(第一个小重点!)

百度地图api与我们之前使用的过的其他组件不同，初学者看官网中写的是在html页面中使用，然后uniapp项目里我们的页面却是.vue的文件，所以很懵逼。所以在这里呢，我们用到了uniapp中一个组件，名字叫web-view

-4

官网这句话什么意思呢，简单的来说就是类似一个iframe标签，也就是我们常说的在一个页面中嵌套另一个页面,并且我们嵌套的这个页面呢会自动铺满整个页面(除非我们给它设置宽高)

也就是说我们在要显示的.vue文件里加上标签来引入我们的.html文件，从而实现在页面中使用百度地图

2.2实例(h5端测试)

首先我们创一个map.html的文件(这里建议把文件放在static目录下，不然在vue中引入的时候会发现没反应)

-5

层级目录这个有几个都无所谓，反正根目录得在static下,然后我们编辑下map.html文件

  1. //这个文件里面就是我们对百度地图进行一系列操作和更改的地方
  2. <!DOCTYPE html>
  3. <html lang=“zh”>
  4.      <head>
  5.          <meta charset=“UTF-8”>
  6.          <meta name=“viewport” content=“width=device-width, initial-scale=1.0”>
  7.          <meta http–equiv=“X-UA-Compatible” content=“ie=edge”>
  8.          <title>百度地图</title>
  9.          <style type=“text/css“>
  10.              html {
  11.                  height: 100%
  12.              }
  14.              body {
  15.                  height: 100%;
  16.                  margin: 0px;
  17.                  padding: 0px
  18.              }
  20.              #mapPage {
  21.                  height: 100%;
  22.                  position: relative;
  23.              }
  25.              #container {
  26.                  height: 100%
  27.              }
  28.          </style>
  29.      </head>
  30.      <body>
  31.          <div id=‘mapPage’>
  32.              <div id=‘container’></div>
  33.          </div>
  34.      </body>
  35.      <!– 微信 js–SDK 如果不需要兼容小程序，则无需引用此 JS 文件 –>
  36.      <script type=“text/javascript“ src=“https://res.wx.qq.com/open/js/jweixin-1.4.0.js”></script>
  38.      <!– uni 的 SDK –>
  39.      <script type=“text/javascript” src=“https://js.cdn.aliyun.dcloud.net.cn/dev/uni-app/uni.webview.1.5.2.js”>
  40.      </script>
  42.      <!– 百度地图 –>
  43.      <script type=“text/javascript”
  44.          src=“https://api.map.baidu.com/api?v=3.0&&type=webgl&ak=这里填刚才我们在百度地图控制台中得到的AK”></script>
  47.      <script type=“text/javascript”>
  48.          document.addEventListener(‘UniAppJSBridgeReady’, function() {
  49.              // ———————————— 配置百度地图 ——————————————————————————–
  50.      var map = new BMapGL.Map(“container”); // 创建地图实例
  51.              var point = new BMapGL.Point(116.404, 39.915); // 创建点坐标
  52.              map.centerAndzoom(point, 15); // 初始化地图，设置中心点坐标和地图级别
  53.              map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放
  54.              map.setHeading(64.5); //设置地图旋转角度
  55.              map.setTilt(73); //设置地图的倾斜角度
  56.          });
  57.      </script>
  58. </html>

然后我们打开我们要用地图的那个vue文件

  1. <template>
  2.      <view class=“map”>
  3.          //在web-view标签中引入我们map.html文件的地址，如果没显示出来，按照上面说的把map.html文件放到static目录下
  4.          //不设置宽高的话地图就会默认的铺满整个页面
  5.          <web-view src=“/static/html/map.html” style=“width: 100%;height: 500px;“></web-view>
  7.      </view>
  9. </template>
  10.  
  11. <script>
  12.      export default {
  13.          data() {
  14.              return {
  15.  
  16.              }
  17.          },
  18.          mounted() {
  19.  
  20.          }
  22.      }
  23. </script>
  24.  
  25. <style lang=“scss” scoped>
  26.      .map {
  27.          width: 100%;
  28.          height: 300px;
  29.      }
  30. </style>

最后让我们运行一下项目

-6

可以看到地图已经加载出来了

3、百度地图api基本参数和使用介绍

基本使用讲解

  1. var map = new BMapGL.Map(“container”);//创建地图实例，与id匹配
  2. var point = new BMapGL.Point(116.404, 39.915);//创建中心点的坐标(经纬度)，百度地图在坐标上有个转换，百度对外接口用的是BD09坐标系，这个下一个博客会细说
  3. map.centerAndZoom(point, 15); // 初始化地图，设置中心点坐标和地图级别
  4. map.setHeading(64.5); //设置地图旋转角度
  5. map.setTilt(73); //设置地图的倾斜角度

部分参数

  1. map.setMapType(BMAP_EARTH_MAP); // 设置地图类型为地球模式
  2. var scaleCtrl = new BMapGL.ScaleControl(); // 添加比例尺控件,地图左下方
  3. map.addControl(scaleCtrl);
  4. var zoomCtrl = new BMapGL.ZoomControl(); // 添加缩放控件,地图右下方
  5. map.addControl(zoomCtrl);
  6. var cityCtrl = new BMapGL.CityListControl(); // 添加城市列表控件,左上方
  7. map.addControl(cityCtrl);
  8. var copyrightctrl = new BMapGL.CopyrightControl(); // 添加版权控件,左下方
  9. map.addControl(copyrightCtrl);

切换成2d地图

  1. map.setHeading(0);
  2. map.setTilt(0);
  3. //上面这两个值不要或者像我一样设置成0,然后添加地图类型为默认
  4. map.addControl(new BMap.MapTypeControl({
  5. mapTypes:[
  6. BMAP_NORMAL_MAP,
  7.  
  8. ]}));

关于地图交互功能和坐标转换功能在下一篇博客里

总结

到此这篇关于uniapp使用百度地图的保姆式教学的文章就介绍到这了,更多相关uniapp使用百度地图内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

标签

相关推荐

发表评论