vue接入高德地图点击获取经纬度及省市区

超、凢脫俗 2021-11-02 10:38 702阅读 0赞

1.  安装vue-amap

npm install --save vue-amap

1.  在main.js中引入如下

// 引入地图
    import aMap from 'vue-amap'
    
    Vue.use(aMap)
    
    aMap.initAMapApiLoader({
      key: '高德地图中申请的key',
      plugin: ['AMap.Geolocation', 'AMap.Geocoder']
    })

[在高德地图开发者中申请（https://lbs.amap.com/dev/key/app\#）][https_lbs.amap.com_dev_key_app]  
3. index.vue中

<el-row>
              <el-col :span="6">
                <el-form-item>
                  详细地址：
                  <el-input
                    v-model="address"
                    name="address"/>
                </el-form-item>
              </el-col>
            </el-row>
             
              <el-row>
              <el-col :span="4">
                <el-form-item>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item>
                  经度：
                  <el-input
                    v-model="lat"
                    name="lat"
                    type="number"/>
                </el-form-item>
              </el-col>
              <el-col :span="2">
                <el-form-item>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item>
                  纬度：
                  <el-input
                    v-model="lng"
                    name="lng"
                    type="number"/>
                </el-form-item>
              </el-col>
              </el-row>
    
              <el-row>
              <el-col :span="4">
                <el-form-item>
                </el-form-item>
              </el-col>
              <el-col :span="4">
                <el-form-item>
                  省份：
                  <el-input
                    v-model="province"
                    min="0"
                    name="price"/>
                </el-form-item>
              </el-col>
              <el-col :span="1">
                <el-form-item>
                </el-form-item>
              </el-col>
              <el-col :span="4">
                <el-form-item>
                  市：
                  <el-input
                    v-model="city"
                    min="0"
                    name="full"/>
                </el-form-item>
              </el-col>
              <el-col :span="1">
                <el-form-item>
                </el-form-item>
              </el-col>
              <el-col :span="4">
                <el-form-item>
                  区：
                  <el-input
                    v-model="district"
                    min="0"
                    name="reduction"/>
                </el-form-item>
              </el-col>
              </el-row>
    
              <el-row>
              <el-col :span="4">
                <el-form-item>
                </el-form-item>
              </el-col>
              <el-col :span="14">
              
              
              <div class="amap-page-container">
                <br/>
                <span style="color: red"> 选择位置点击一下就可以了（要是地图没有出来，刷新一下页面） </span>
                <el-amap
                  vid="amapDemo1"  
                  :center="center"
                  :zoom="zoom"  
                  class="amap-demo"
                  :events="events">
                </el-amap>
                <div class="toolbar">
                  <br/>
                </div>
              </div>
              </el-col>
              </el-row>

1.  index.vue的data中

1.  样式

.amap-demo {
      height: 400px;
    }

1.  效果  
    点击地图输入框中的数据就会跟着变  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3cxMzE2MDIyNzM3_size_16_color_FFFFFF_t_70]

[高德错误码说明点击获取][Link 1]  
[高德官网点击][Link 2]  
[vue官网][vue]

[https_lbs.amap.com_dev_key_app]: https://lbs.amap.com/dev/key/app#
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3cxMzE2MDIyNzM3_size_16_color_FFFFFF_t_70]: /images/20211101/dfc2c52375da4237851073382139445c.png
[Link 1]: https://lbs.amap.com/api/webservice/guide/tools/info/?sug_index=2
[Link 2]: https://lbs.amap.com/api/javascript-api/example/map-lifecycle/map-show
[vue]: https://elemefe.github.io/vue-amap/#/zh-cn/examples/base/amap?id=%E7%82%B9%E5%87%BB%E5%9C%B0%E5%9B%BE%E8%8E%B7%E5%8F%96%E7%BB%8F%E7%BA%AC%E5%BA%A6%E5%92%8C%E5%85%B7%E4%BD%93%E5%9C%B0%E5%9D%80