当前位置:   article > 正文

vue中使用baidu-map获取当前坐标。

vue项目获取百度地图所选位置的坐标
1.安装iview

  $npm install iview --save

  在main.js中引入

  

  这样就算安装完成了!

2.安装baidu-map插件

  $ npm install baudu-map --save

  安装成功之后就可以再页面上显示了,我做的是效果是这样的,一边移动一边获取点的坐标,点击也可以,给大家看看效果图:

   

  最后贴上代码, 

    <template>
      <div>
        <div class="baiduMap">
          <i-form :model="centerStr" :label-width="100">
            <Form-item label="经度">
              <i-input :value.sync="centerStr.lng"></i-input>
            </Form-item>
            <Form-item label="纬度">
              <i-input :value.sync="centerStr.lat"></i-input>
            </Form-item>
            <i-button type="primary">提交</i-button>
          </i-form>

          <baidu-map
            class="bm-view"
            ak="你的百度地图ak"
            center="广州市"
            :zoom="12"
            :scroll-wheel-zoom="true"
            @click="getClickInfo"
            @moving="syncCenterAndZoom"
            @moveend="syncCenterAndZoom"
            @zoomend="syncCenterAndZoom">
              <bm-view style="width: 100%; height:500px;"></bm-view>
              <bm-marker
                :position="{ lng: centerStr.lng, lat: centerStr.lat }"
                :dragging="true"
                animation="BMAP_ANIMATION_BOUNCE">
              </bm-marker>
              <bm-control :offset="{ width: '10px', height: '10px' }">
                <bm-auto-complete v-model="keyword" :sugStyle="{ zIndex: 999999 }">
                  <input
                    type="text"
                    placeholder="请输入搜索关键字"
                    class="serachinput"/>
                </bm-auto-complete>
              </bm-control>
              <bm-local-search
               :keyword="keyword"
               :auto-viewport="true"
               style="width:0px;height:0px;overflow: hidden;"
              ></bm-local-search>
          </baidu-map>
        </div>
      </div>
    </template>
 
    
    <script>
      //地图组件---按需引入
      import {
        BaiduMap,
        BmControl,
        BmView,
        BmAutoComplete,
        BmLocalSearch,
        BmMarker
      } from "vue-baidu-map";
 
      export default {
        components: {
          BaiduMap,
          BmControl,
          BmView,
          BmAutoComplete,
          BmLocalSearch,
          BmMarker
        },
        data: function() {
          return {
            showMapComponent: this.value,
            keyword: "",
            mapStyle: {
              width: "100%",
              height: this.mapHeight + "px"
            },
            centerStr: {
              lng: "",
              lat: ""
            }
          };
        },
        watch: {
          value: function(currentValue) {
            this.showMapComponent = currentValue;
            if (currentValue) {
              this.keyword = "";
            }
          }
        },
        methods: {
          getClickInfo(e) {
          this.centerStr.lng = e.point.lng;
          this.centerStr.lat = e.point.lat;
        },
        syncCenterAndZoom(e) {
          const { lng, lat } = e.target.getCenter();
          this.centerStr.lng = lng;
          this.centerStr.lat = lat;
          this.zoom = e.target.getZoom();
        }
      }
    };
  </script>
 
  <style scoped>
    .head {
      margin-left: 200px;
      width: 100px;
    }
    .baiduMap {
      width: 80%;
      height: 800px;
      margin: 0 auto;
      overflow: hidden;
    }
    .ivu-form-item {
      display: inline-block;
      width: 40%;
    }
    .bm-view > div {
      width: 100%;
      height: 700px !important;
    }
    .serachinput {
      width: 300px;
      box-sizing: border-box;
      padding: 9px;
      border: 1px solid #dddee1;
      line-height: 20px;
      font-size: 16px;
      height: 38px;
      color: #333;
      position: relative;
      border-radius: 4px;
      -webkit-box-shadow: #666 0px 0px 10px;
      -moz-box-shadow: #666 0px 0px 10px;
      box-shadow: #666 0px 0px 10px;
    }
  </style>
  
  写的不足的地方,望大佬指教!

  

转载于:https://www.cnblogs.com/0314dxj/p/11139146.html

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/很楠不爱3/article/detail/109871
推荐阅读
相关标签
  

闽ICP备14008679号