Vue运用百度地图，添加位置信息(向数据库添加选中位置信息+选择位置的经纬度)--DOM操作方式

运用百度地图，添加位置信息---DOM操作方式

样式效果--完成实现：

 

一、在百度地图申请一个属于自己的秘钥

　　https://jingyan.baidu.com/article/363872eccda8286e4aa16f4e.html 获取百度地图秘钥

    //如果找不到百度地图api 也可以直接访问 https://lbsyun.baidu.com/  打开后进入下方---添加自己的秘钥

 

二、引入百度js在 /index.html引入

 

<!--百度api-->
     <script type="text/javascript" src="https://api.map.baidu.com/api?v=3.0&ak=m6yzyjfTCOdDDh2w8aTgdAaY8bVbolW2"></script>

 

三、完成地图显示的各项配置　　

   对地图的编辑--下面的所有代码、获取坐标……可以参考https://lbsyun.baidu.com/jsdemo3.0.htm#js3_2  --》进入该网可以对地图显示的一个配置

1、参考网页：

 

2、代码实现    --代码中参考为项目中代码--在Dialog组件中实现的

2-1 : 声明一个放置显示信息的位置(包括要显示的选择的位置、选择位置的经纬度、和百度地图的可供选择的框)　

<!-- 设置起始位置弹出框 -->
    <!-- @opened是Dialog 打开动画结束时的回调 否则报ck错-->
    <!-- :close-on-click-modal="false"  只能点叉号关闭dialog -->
    <el-dialog
      title="起始地址"
      :visible.sync="Startdialog"
      width="80%"
      heignt="80%"
      @opened="iniOpenBaiDuMap(ruleForm)"
      :close-on-click-modal="false"
    >
      <el-form
        :model="ruleForm"
        :rules="rules"
        ref="ruleForm"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-row>
          <el-col :span="8">
            <el-form-item label="起始位置" prop="RName">
              <el-input
                v-model="ruleForm.StartAddress"
                placeholder="线路起始位置"
                :disabled="true"
              ></el-input></el-form-item
          ></el-col>
          <el-col :span="8">
            <el-form-item label="经度" prop="RName">
              <el-input
                v-model="ruleForm.StartLongitude"
                placeholder="线路起始地址经度"
                :disabled="true"
              ></el-input></el-form-item
          ></el-col>
          <el-col :span="8">
            <el-form-item label="纬度" prop="RName">
              <el-input
                v-model="ruleForm.StartLatitude"
                placeholder="线路起始地址纬度"
                :disabled="true"
              ></el-input></el-form-item
          ></el-col>
          <el-col
            ><!--获取开始地址容器  这里放置地图-->
            <div id="getStartLatAndLng" class="baiduContner"></div>
          </el-col>
        </el-row>
      </el-form>
    </el-dialog>

 

声明放置地图信息的DIV容器需要设置容器大小--否则不显示

 

 

2-2    vue-methods中实现地图的创建-值返填显示

　　

   //#region   百度地图配置

    //1、起始位置添加按钮触发diaLog
    StartAddressAdd() {
      this.Startdialog = true;
    },
    //1、终点位置添加按钮触发diaLog
    EndAddressAdd() {
      this.Enddialog = true;
    },

    // 2、Dialog 打开动画结束时的回调
    iniOpenBaiDuMap(editModel) {
      //editModel是返回的数据，1或2是用来区分当前是编写的起点的还是终点位置
      if (this.Startdialog) {
        this.showBaiDuMap(editModel, 1);
      }
      if (this.Enddialog) {
        this.showBaiDuMap(editModel, 2);
      }
    },

    //3、https://jingyan.baidu.com/article/363872eccda8286e4aa16f4e.html 获取百度地图秘钥
    //如果找不到百度地图api 也可以直接访问 https://lbsyun.baidu.com/  然后添加自己的秘钥

    //4、引入百度js在 /index.html引入
    //5、对地图的编辑--下面的所有代码、获取坐标……可以参考https://lbsyun.baidu.com/jsdemo3.0.htm#js3_2

    //6、开始显示地图图片那个
    showBaiDuMap(dataInfo, i) {
      //获取地图经度纬度
      //如果i是2表示当前是做的是终点的事情
      var id = "getStartLatAndLng"; //获取放设置起点的地图位置在哪
      if (i == 2) {
        var id = "getEndLatAndLng"; //获取放设置起点的地图位置在哪
      }
      //使用容器 初始化地图
      var map = new BMap.Map(id);
      //给初始地址和地图比例大小设置 --默认下面的值在北京
      map.centerAndZoom(new BMap.Point(116.404, 39.915), 11);
      //设置鼠标滚动缩放百度地图
      map.enableScrollWheelZoom(true);
      //地址解析,即Geocoder类，是根据一个地址得到对应的经纬度point。注：地址需要详细到街道，例如“北京市海淀区中关村南大街”。
      var geocoder = new BMap.Geocoder();
      //点击地图事件回调方法
      map.addEventListener("click", function (e) {
        if (i == 1) {
          //要设置的是起点
          dataInfo.StartLongitude = e.point.lng; //起点经度
          dataInfo.StartLatitude = e.point.lng; //起点纬度
        }
        if (i == 2) {
          //要设置的是终点
          dataInfo.EndLongitude = e.point.lng; //终点经度
          dataInfo.EndLatitude = e.point.lng; //终点纬度
        }
        //获取中文的详细地址
        geocoder.getLocation(e.point, function (rs) {
          var addComp = rs.addressComponents;
          var address =
            addComp.province +
            addComp.city +
            addComp.district +
            addComp.street +
            addComp.streetNumber;
          if (i == 1) {
            dataInfo.StartAddress = address;
          }
          if (i == 2) {
            dataInfo.EndAddress = address;
          }
        });
      });
    },

    //#endregion

 

2-3  完成实现效果样式--

 

注意：

　　--存经纬度数据时   --数据库中为float类型   core中为double类型   --双精度