高德地图输入具体地址获取经纬度

最新推荐文章于 2024-08-05 20:04:15 发布

孟夏廿四

最新推荐文章于 2024-08-05 20:04:15 发布

阅读量641

点赞数 1

分类专栏：高德地图文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/white_777/article/details/131322071

版权

高德地图专栏收录该内容

5 篇文章 0 订阅

订阅专栏

html代码

        <el-col :span="24">
          <el-form-item label="所在地址" prop="address">
            <el-input
              :disabled="!editValidate"
              v-model="form.address"
            ></el-input>
            <el-button
              type="primary"
              icon="el-icon-search"
              size="mini"
              @click="search()"
            >搜索</el-button
            >
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="经度" >
            <el-input readonly v-model="lng"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="纬度" >
            <el-input readonly v-model="lat"></el-input>
          </el-form-item>
        </el-col>
       <!-- 将地图隐藏-->
        <el-col>
          <div id="mapView" style="overflow: fragments">

          </div>
        </el-col>

js代码

     //在打开dialog 的时候创建地图
this.$nextTick(() => {
        this.initMap()
      })

     initMap() {
      this.map = new window.AMap.Map('mapView', {
        resizeEnable: true
      });

    },



//给按钮绑定的搜索事件
search () {
      let that = this;
      window.AMap.plugin('AMap.PlaceSearch', function () {
        var autoOptions = {
          city: '全国',
          map: that.map, 
          pageSize: 1, 
          pageIndex: 1,
          autoFitView: false 
        };
        var placeSearch = new window.AMap.PlaceSearch(autoOptions);
        placeSearch.search(that.form.address, function (status, result) {
          if (status == 'complete') {
            if (result.poiList.pois.length > 0) {
              let lng = result.poiList.pois[0].location.lng;
              let lat = result.poiList.pois[0].location.lat;
              console.log(lng,lat)
              that.$nextTick(() => {
                that.lng=lng
                that.lat=lat
                // that.$set(that.form,'lng',lng)
                // that.$set(that.form,'lat',lat)
              })
            }
          } 
        });
      });
    },