vue -cli 基本使用百度地图

第一步 在index.html中引入

  <script type="text/javascript" src="http://api.map.baidu.com/api?v=3.0&ak=GkzoZdcPeSPkftKXRhEDXzern5epmXqZ"></script>

第二步

<template>
  <el-main id="outMain"></el-main>
</template>

第三步 根据传入的经度和纬度参数 创建实例  只有起点和终点的

mapFlush(send, rece) {
      var map = new BMap.Map("outMain"); // 创建地图实例
      var point = new BMap.Point(send.longitude, send.latitude); // 创建点坐标
      // 创建圆形范围
      var circle;
      // 创建一个圆形，参数分别为：中心点、半径、选项
      map.centerAndZoom(point, 15);
      //根据起始点 以及终点的经纬度 生成 路线
      var p1 = new BMap.Point(send.longitude, send.latitude);
      var p2 = new BMap.Point(rece.longitude, rece.latitude);
      var driving = new BMap.DrivingRoute(map, {
        renderOptions: { map: map, autoViewport: true },
      });
      driving.search(p1, p2);
      map.enableScrollWheelZoom(true); //鼠标滚轮放大缩小
      var marker = new BMap.Marker(point); // 创建标记对象
      map.addOverlay(marker); // 将标记添加到地图上
      marker.addEventListener("click", function () {
        if (circle) {
          // 如果圆形存在，则移除它
          map.removeOverlay(circle);
          circle = null;
        } else {
          // 如果圆形不存在，则创建并添加它
          circle = new BMap.Circle(point, 4000, {
            strokeColor: "#ff0000",
            strokeOpacity: 0.5,
            strokeWeight: 2,
            fillColor: "#ff0000",
            fillOpacity: 0.1,
          });
          map.addOverlay(circle);
        }
      });

或者 存在途经点  

mapFlush(send, rece) {
      var map = new BMap.Map("container"); // 创建地图实例
      var point = new BMap.Point(send.longitude, send.latitude); // 创建点坐标
      map.centerAndZoom(point, 15);

      var p1 = new BMap.Point(send.longitude, send.latitude); // 起点
      var p2 = new BMap.Point(rece.longitude, rece.latitude); // 终点
      var waypoint = new BMap.Point(112.85, 41.12); // 中途点经纬度
      var driving = new BMap.DrivingRoute(map);
      driving.search(p2, p1);
      driving.search(p1, waypoint);
      driving.setSearchCompleteCallback(function () {
        var pts = driving.getResults().getPlan(0).getRoute(0).getPath(); //通过驾车实例，获得一系列点的数组

        var polyline = new BMap.Polyline(pts);
        map.addOverlay(polyline);
      });
      var m1 = new BMap.Marker(p2); //创建3个marker
      var m2 = new BMap.Marker(p1);
      var m3 = new BMap.Marker(waypoint);
      map.addOverlay(m1);
      map.addOverlay(m2);
      map.addOverlay(m3);
      var lab1 = new BMap.Label("起点", { position: p2 }); //创建3个label
      var lab2 = new BMap.Label("途径点", { position: p1 });
      var lab3 = new BMap.Label("终点", { position: waypoint });
      map.addOverlay(lab1);
      map.addOverlay(lab2);
      map.addOverlay(lab3);
    },