vue 百度地图获取经纬度地址

地图安装看这个https://blog.csdn.net/Iphone886/article/details/127976856?ops_request_misc=&request_id=&biz_id=102&utm_term=vue2%E7%99%BE%E5%BA%A6%E5%9C%B0%E5%9B%BE%E4%BD%BF%E7%94%A8&utm_medium=distribute.pc_search_result.none-task-blog-2~all~sobaiduweb~default-1-127976856.142^v68^control,201^v4^add_ask,213^v2^t3_esquery_v1&spm=1018.2226.3001.4187

1，搜索任意地址

2，弹出经，纬度，地址。

 3，保存后。F12，打印出经，纬度地址。

 

 4，点击地图任意点。查出经，纬度，地址。

上代码。

index.vue

 <template>
  <el-container>
<el-dialog width="60%" :visible.sync="mapVisible" append-to-body>
                  <baidu-map style="display:flex;flex-direction: column-reverse;" class="bm-view" @ready="mapReady"
                    @click="getLocation" :scroll-wheel-zoom="true">
                    <bm-navigation anchor="BMAP_ANCHOR_TOP_RIGHT"></bm-navigation>
                    <bm-marker v-if="infoWindowShow" :position="{lng: form.lng, lat: form.lat}">
                    </bm-marker>
                    <bm-info-window :position="{lng: form.lng, lat: form.lat}" :show="infoWindowShow"
                      @clickclose="infoWindowClose">
                      <p>当前位置:{{form.address}}</p>
                      <p>经度:{{form.lng}}</p>
                      <p>纬度:{{form.lat}}</p>
                    </bm-info-window>
                    <div style="margin-bottom: 10px;">
                      <bm-auto-complete v-model="form.address" :sugStyle="{zIndex: 999999}">
                        <el-input v-model="form.address" style="width:300px;margin-right:15px" placeholder="输入地址"
                          clearable></el-input>
                      </bm-auto-complete>
                      <el-button type="primary" @click="getBaiduMapPoint">搜索</el-button>
                      <el-button type="primary" @click="closeMap()">保存</el-button>
                    </div>
                  </baidu-map>
                </el-dialog>

  </el-container>
</template>
<script>
export default {
    data() {
      return {
          lng: "", //经度
          lat: "", //纬度
          address: "", //详细地址
          infoWindowShow: false, //地图详细地址显示
          mapVisible: false, //百度地图弹框
    }
</script>
methods: {
     //百度地图初始化
      mapReady({
        BMap,
        map
      }) {
        // 默认经纬度作为中心点
        this.point = new BMap.Point(116.393541, 39.902292);
        map.centerAndZoom(this.point, 15);
        this.BMap = BMap
        this.map = map
      },
      //点击获取经纬度
      getLocation(e) {
        this.form.lng = e.point.lng //经度
        this.form.lat = e.point.lat //纬度
        console.log(e.point.lng)
        console.log(e.point.lat)
        var point = new BMap.Point(e.point.lng, e.point.lat);
        var gc = new BMap.Geocoder();
        let _this = this;
        gc.getLocation(point, function(rs) {
          //地址信息
          _this.form.address = rs.address;
        });
        this.infoWindowShow = true
      },
      getBaiduMapPoint() {
        let that = this
        let myGeo = new this.BMap.Geocoder()
        myGeo.getPoint(this.form.address, function(point) {
          if (point.lng != '116.413384') {
            that.map.centerAndZoom(point, 15)
            that.form.lng = point.lng //经度
            that.form.lat = point.lat //纬度
            that.infoWindowShow = true

          } else {
            that.$message({
              message: "请选择正确地址！！!",
              type: "warning",
            });
            this.infoWindowShow = false
          }

        })
      },
      //百度地图信息窗口关闭
      infoWindowClose() {
        this.form.lng = ""; //经度
        this.form.lat = ""; //纬度
        this.form.address = ""; //详细地址
        this.infoWindowShow = false;
      },
      //弹出百度地图
      addMap() {
        this.infoWindowShow = false;
        this.mapVisible = true;
      },
      //关闭地图
      closeMap() {
        console.log(this.form.lng);
        console.log(this.form.lat);
        console.log(this.form.address);
        this.mapVisible = false; //关闭弹窗
      },
}

有问题，请留言。

或2297660550@qq.com联系我