vue项目实战：原生百度地图api的使用

<!--
 * @Description: 百度地图api测试
 * @Version: 2.0
 * @Autor: lhl
 * @Date: 2020-08-13 10:57:27
 * @LastEditors: lhl
 * @LastEditTime: 2020-08-19 11:42:46
-->
<!--  -->
<template>
  <div class="map-content-box">
    <h1>百度地图原生语法</h1>
    <div id="baidu-map" style="width: 100%;height: 800px;"></div>
  </div>
</template>

<script>
export default {
  name: 'baiduMapTest',
  data() {
    //这里存放数据
    return {}
  },
  created() {},
  mounted() {
    let _this = this;
    this.$nextTick(() => {
      _this.initMap();
    })
  },
  methods: {
    initMap(){
      // 创建地图实例  个性化地图遵照官网步骤
      const map = new BMap.Map("baidu-map");
      // 创建点坐标  
      const point = new BMap.Point(116.404, 39.915);
      // 初始化地图，设置中心点坐标和地图级别  
      map.centerAndZoom(point, 15);
       //开启鼠标滚轮缩放
      map.enableScrollWheelZoom(true);    
      // JSAPI商用授权挂件默认开启，关闭需要修改调用JSAPI的代码。方式有两种
      map.disableBizAuthLogo(); //关闭
      // map.enableBizAuthLogo(); //开启
      
      // 控件类型（百度地图自带的） 自定义控件遵照官网平时比较少用到
      // type: BMAP_NAVIGATION_CONTROL_SMALL 平移缩放控件的类型 const opts = {type: BMAP_NAVIGATION_CONTROL_SMALL} 
      const opts = {anchor: BMAP_ANCHOR_TOP_RIGHT, offset: new BMap.Size(100, 10)}; // 偏移量
      map.addControl(new BMap.NavigationControl({anchor: BMAP_ANCHOR_TOP_RIGHT})); // PC端默认位于地图左上方，它包含控制地图的平移和缩放的功能。移动端提供缩放控件，默认位于地图右下方    
      map.addControl(new BMap.ScaleControl()); // 默认位于地图左下方，显示地图的比例关系
      map.addControl(new BMap.OverviewMapControl()); // 默认位于地图右下方，是一个可折叠的缩略地图  
      map.addControl(new BMap.MapTypeControl({anchor: BMAP_ANCHOR_TOP_LEFT})); // 地图类型
      map.addControl(new BMap.CopyrightControl(opts)); // 默认位于地图左下方
      map.addControl(new BMap.GeolocationControl(opts)); // 定位 针对移动端开发，默认位于地图左下方
      map.setCurrentCity("北京"); // 仅当设置城市信息时，MapTypeControl的切换功能才能可用   
      
      // 标注（自定义标注图标 默认是类似尖头圆形红点---可以放置自己图片） 默认情况下标注不支持拖拽
      const marker = new BMap.Marker(point); // 创建标注    
      map.addOverlay(marker); // 将标注添加到地图中 
      marker.addEventListener("click", function(){    
        alert("您点击了点标注");    
      })
      // 支持拖拽
      marker.enableDragging();    
      marker.addEventListener("dragend", function(e){    
        alert("当前位置：" + e.point.lng + ", " + e.point.lat);    
      })  
      // 标注折线 自定义这些线段的颜色、粗细和透明度。颜色可以是十六进制数字形式（比如：#ff0000）或者是颜色关键字（比如：red）
      const polyline = new BMap.Polyline([
        new BMap.Point(116.399, 39.910),
        new BMap.Point(116.405, 39.920)
        ],
        {strokeColor:"blue", strokeWeight:6, strokeOpacity:0.5}
      );
      map.addOverlay(polyline);

      // 提供的信息窗口  自定义信息窗口类 BMapLib.InfoBox
      const winOpts = {    
        width : 200,     // 信息窗口宽度    
        height: 200,     // 信息窗口高度    
        title : "我是百度地图自带的信息窗口"  // 信息窗口标题   
      }    
      // World是信息窗口内容可以用 const htmlContent = `html模板替换掉或者动态自定义内容`
      const infoWindow = new BMap.InfoWindow("World", winOpts);  // 创建信息窗口对象    
      map.openInfoWindow(infoWindow, map.getCenter());      // 打开信息窗口
      
      // 路况图层 添加和移除图层 地图可以包含一个或多个图层，每个图层在每个级别都是由若干张图块组成的
      const ctrl = new BMapLib.TrafficControl({
            showPanel: false //是否显示路况提示面板
        });      
        map.addControl(ctrl);
      ctrl.setAnchor(BMAP_ANCHOR_BOTTOM_RIGHT); 
      
      const traffic = new BMap.TrafficLayer(); // 创建交通流量图层实例      
      map.addTileLayer(traffic);  // 将图层添加到地图上
      map.removeTileLayer(traffic); // 将图层移除
      
      // 事件 每个API对象提供了removeEventListener用来移除事件监听函数
      map.addEventListener("click", function(e){    
        alert("点击事件，你点击了一下地图");   
        console.log(e) 
      })
      map.addEventListener("dragend", function(){    
        const center = map.getCenter();    
          alert("地图中心点变更为：" + center.lng + ", " + center.lat);    
      })
      map.addEventListener("zoomend", function(){    
        alert("地图缩放至：" + this.getZoom() + "级");    
      })

      // 检索POI方法 城市检索、圆形区域检索、矩形区域检索 配置搜索请看官方文档
      const local = new BMap.LocalSearch(map, {      
        renderOptions:{map: map}      
      });      
      local.search("天安门"); // 关键字“天安门”检索POI
      // 圆形区域检索
      const local2 = new BMap.LocalSearch(map,{ renderOptions:{map: map, autoViewport: true}});      
      local2.searchNearby("小吃", "前门"); // 根据中心点、半径与检索词发起周边检索。当keyword为数组时将同时执行多关键字的检索，最多支持10个关键字
      // 矩形区域检索
      const local3 = new BMap.LocalSearch(map, { renderOptions:{map: map}});      
      local3.searchInBounds("银行", map.getBounds()); 

      // 注意：在调用Geocoder.getPoint()方法时您需要提供地址解析所在的城市（本例为“北京市”）。
      // 创建地址解析器实例 逆地址解析服务   
      // 将地址解析结果显示在地图上，并调整地图视野    
      const myGeo = new BMap.Geocoder();      
      // 将地址解析结果显示在地图上，并调整地图视野    
      myGeo.getPoint("北京市海淀区上地10街10号", function(point){      
          if (point) {      
              map.centerAndZoom(point, 16);      
              map.addOverlay(new BMap.Marker(point));      
          }      
      },"北京市")
      // 驾车路线规划 DrivingRoute 公交路线规划 TransitRoute 步行路线规划 WalkingRoute 骑行线路规划 RidingRoute
      const driving = new BMap.DrivingRoute(map, { 
        renderOptions: { 
          map: map, 
          autoViewport: true 
        } 
      })
      const start = new BMap.Point(116.310791, 40.003419);
      const end = new BMap.Point(116.486419, 39.877282);
      driving.search(start, end);

      // 全景图
      const Panorama = new BMap.PanoramaControl();  
      Panorama.setOffset(new BMap.Size(200, 20));  
      map.addControl(Panorama);
      // 自定义绘制
      const styleOptions = {
          strokeColor:"red",    //边线颜色。
          fillColor:"red",      //填充颜色。当参数为空时，圆形将没有填充效果。
          strokeWeight: 3,       //边线的宽度，以像素为单位。
          strokeOpacity: 0.8,    //边线透明度，取值范围0 - 1。
          fillOpacity: 0.6,      //填充的透明度，取值范围0 - 1。
          strokeStyle: 'solid' //边线的样式，solid或dashed。
      }
      //实例化鼠标绘制工具 画多边形时候画完双击即可停止绘画  更多参考这里：http://lbsyun.baidu.com/index.php?title=jspopular3.0/openlibrary
      const drawingManager = new BMapLib.DrawingManager(map, {
          isOpen: false, //是否开启绘制模式
          enableDrawingTool: true, //是否显示工具栏
          drawingToolOptions: {
              anchor: BMAP_ANCHOR_TOP_RIGHT, //位置
              offset: new BMap.Size(400, 20), //偏离值
          },
          circleOptions: styleOptions, //圆的样式
          polylineOptions: styleOptions, //线的样式
          polygonOptions: styleOptions, //多边形的样式
          rectangleOptions: styleOptions //矩形的样式
      })  
    }
  },
};
</script>
<style lang='scss' scoped>
//@import url(); 引入公共css类
</style>

 

<!--
 * @Description: index.html
 * @Version: 2.0
 * @Autor: lhl
 * @Date: 2020-06-10 15:53:32
 * @LastEditors: lhl
 * @LastEditTime: 2020-08-21 11:28:34
-->
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <!-- 强制360浏览器使用极速模式进行解析页面 -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="renderer" content="webkit" />
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>vue-elementui</title>
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=4zEwemFoHjRbCVmZofeBnuHRGPtC7iVz"></script>
    <!-- 路况图层 -->
    <link href="//api.map.baidu.com/library/TrafficControl/1.4/src/TrafficControl_min.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript" src="//api.map.baidu.com/library/TrafficControl/1.4/src/TrafficControl_min.js"></script>
    <!-- 在页面的头部应用鼠标绘制工具开源库的文件 百度地图绘制图形 -->
    <script type="text/javascript" src="http://api.map.baidu.com/library/DrawingManager/1.4/src/DrawingManager_min.js"></script>
    <link rel="stylesheet" href="http://api.map.baidu.com/library/DrawingManager/1.4/src/DrawingManager_min.css" />
  </head>
  <body>
    <div id="app">

    </div>
    <!-- built files will be auto injected -->
  </body>
  <!-- 如果你调用百度地图api时，报错可以借鉴： Bmap is not defined ，那么就配置 webpack 配置文件**（webpack.base.conf.js）的module.exports中加个externals：** -->
  <!-- HTTPS中调用百度地图API - BMap is not defined 在调用百度地图API的URL中加 &s=1 -->
  <!-- 一定要给实例高度不然看不到地图  正常使用都是不会报错的-->

  <!-- rem引入问题 -->
  <!-- 引入rem之后存在个问题，会导致后期引入的ui库样式变小
  安装postcss-px2rem-exclude
  npm install postcss-px2rem-exclude --save
  因为 postcss-plugin-px2rem 这个插件  配置选项上有  exclude 属性，它可以配置 是否对 某个文件夹下的所有css文件不进行从px到rem的转换。
  　　所以我们可以利用这个特性，把项目中的  node_module 文件夹里面安装的ui框架排除掉。这样如果我们项目中是用了前端UI框架的话，就不会吧UI框（Vant,Element等）中的 px单位转换成rem了
  配置exclude选项，需要注意的是这个配置在vue.config.js中式不起作用的，如图。
  正确的配置位置是项目根目录下的postcss.config.js文件，如果你的项目没有生成这个独立文件，就需要在你的package.js里设置。
  postcss.config.js
  module.exports = {
      plugins: {
      autoprefixer: {},
      "postcss-px2rem-exclude": {
      remUnit: 75,
      exclude: /node_modules|folder_name/i
      }
    }
  };
  
  package.json
  "postcss": {
      "plugins": {
      "autoprefixer": {},
      "postcss-px2rem-exclude":{
      "remUnit": 75,
      "exclude":"/node_modules|floder_name/i"
      }
    }
  }, -->

<!-- 
this.$route.params 刷新时值丢失
解决：路由路径中加上 /:参数名（非必传参数后加‘?’, eg: /:id?） -->
</html>

  以上代码本人项目实测！！！真实可靠，请勿随意转载~转载请注明出处~~~谢谢合作！

__EOF__

本文作者：蓝色帅-橙子哥
本文链接：https://www.cnblogs.com/lhl66/p/13536385.html
关于博主：评论和私信会在第一时间回复。或者直接私信我。
版权声明：本博客所有文章除特别声明外，均采用 BY-NC-SA 许可协议。转载请注明出处！
声援博主：如果您觉得文章对您有帮助，可以点击文章右下角【推荐】一下。您的鼓励是博主的最大动力！