vue+elementUi實現(xiàn)點擊地圖自動填充經(jīng)緯度以及地點

更新時間：2022年07月06日 09:24:30 作者：LBJsagiri

這篇文章主要為大家詳細介紹了vue+elementUi實現(xiàn)點擊地圖自動填充經(jīng)緯度以及地點，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了vue+elementUi實現(xiàn)點擊地圖自動填充經(jīng)緯度以及地點的具體代碼，供大家參考，具體內(nèi)容如下

實現(xiàn)代碼

1.安裝組件
終端運行：

npm install vue-baidu-map --save

2.HTML代碼塊

<el-form-item label="經(jīng)度" :label-width="formLabelWidth" prop="longitude">
?? ?<el-input ?class="lineinput" placeholder="點擊地圖輸入經(jīng)度" ?style="width: 80%;" size="samll" v-model.number="form.longitude"></el-input>
</el-form-item>
<el-form-item label="維度" :label-width="formLabelWidth" prop="latitude">
? ? <el-input ?class="lineinput" placeholder="點擊地圖輸入維度" style="width: 80%;" size="samll" v-model.number="form.latitude"></el-input>
</el-form-item>
<el-form-item label="廠區(qū)地址" :label-width="formLabelWidth" prop="location">
? ? <el-input ?class="lineinput" placeholder="點擊地圖輸入廠區(qū)地址" style="width: 80%;" size="small" v-model="form.location"></el-input>
</el-form-item>
<el-form-item :label-width="formLabelWidth">
? ? <baidu-map ?class="map" :center="center" :zoom="zoom" @ready="handler"
? ? :scroll-wheel-zoom="true"
? ? @click="clickEvent"
? ? ak="33B192o1jPaqOHASGGAIkoMuwi8W76j3">
? ? ?? ?<!-- 地圖控件位置 -->
? ? ? ? <bm-navigation anchor="BMAP_ANCHOR_TOP_RIGHT"></bm-navigation>
? ? ? ? <!-- 獲取城市列表 -->
? ? ? ? <bm-city-list anchor="BMAP_ANCHOR_TOP_LEFT"></bm-city-list>
? ? ? ? <!-- 定位當(dāng)前位置 -->
? ? ? ? <bm-geolocation anchor="BMAP_ANCHOR_BOTTOM_RIGHT" ?:showAddressBar="true" :autoLocation="true" @locationSuccess="getLoctionSuccess" ></bm-geolocation>
? ? ? ? <!-- 地圖容器 -->
? ? ? ? <bm-view :style="{width:'75%',height: '500px'}"></bm-view>
? ? ?</baidu-map>
</el-form-item>

3.導(dǎo)入依賴

import {BaiduMap,BmNavigation,BmView,BmGeolocation,BmCityList} from 'vue-baidu-map'

4.js代碼塊

export default {
? name: "mapDialog",
?? ?components: {
? ? ? ? ? ? BaiduMap,
? ? ? ? ? ? BmNavigation,
? ? ? ? ? ? BmView,
? ? ? ? ? ? BmGeolocation,
? ? ? ? ? ? BmCityList,
? ? ? ? ? ? ElImageViewer
? ? ? ? },
?? ?data() {
? ? ? ? return {
??? ??? ??? ?center: {lng: 121.833138, lat: 39.081725},
? ? ? ? ? ? ? ? zoom: 12,
? ? ? ? ? ? ? ? mapVisible:false,
? ? ? ? ? ? ? ? form:{
? ? ? ? ? ? ? ? ? ? longitude:'',
? ? ? ? ? ? ? ? ? ? latitude:'',
? ? ? ? ? ? ? ? ? ? location:'',
? ? ? ? ? ? ? ? },
? ? ? ? ? ? ? ? clientHeight:document.documentElement.clientHeight-90, // 設(shè)置屏幕高度
? ? ? ? ? ? ? ? iconUrl:'static/zuobiao.gif',//點擊坐標(biāo)標(biāo)記
? ? ? ? }
??? ?}
?? ?methods：{
? ? ? ? handler ({BMap, map}) {
? ? ? ? ? let _this = this;?? ?// 設(shè)置一個臨時變量指向vue實例；
? ? ? ? ? var geolocation = new BMap.Geolocation();
? ? ? ? ? geolocation.getCurrentPosition(function(r){
? ? ? ? ? ? console.log(r);
? ? ? ? ? ? _this.center = {lng: r.longitude, lat: r.latitude};?? ??? ?// 設(shè)置center屬性值
? ? ? ? ? ? _this.autoLocationPoint = {lng: r.longitude, lat: r.latitude};?? ??? ?// 自定義覆蓋物
? ? ? ? ? ? _this.initLocation = true;
? ? ? ? ? },{enableHighAccuracy: true})
? ? ? ? ? ? window.map = map;
? ? ? ? },
? ? ? ? //點擊地圖監(jiān)聽
? ? ? ? clickEvent(e){
? ? ? ? ? map.clearOverlays();
? ? ? ? ? let Icon_0 = new BMap.Icon("static/zuobiao.gif", new BMap.Size(64, 64), {anchor: new BMap.Size(18, 32),imageSize: new BMap.Size(36, 36)});
? ? ? ? ? var myMarker = new BMap.Marker(new BMap.Point(e.point.lng, e.point.lat),{icon: Icon_0});
? ? ? ? ? map.addOverlay(myMarker);
? ? ? ? ? //用所定位的經(jīng)緯度查找所在地省市街道等信息
? ? ? ? ? var point = new BMap.Point(e.point.lng, e.point.lat);
? ? ? ? ? var gc = new BMap.Geocoder();
? ? ? ? ? let _this = this;
? ? ? ? ? gc.getLocation(point, function (rs) {
? ? ? ? ? ? var addComp = rs.addressComponents;
? ? ? ? ? ? //console.log(rs.address);//地址信息
? ? ? ? ? ? _this.form.location = rs.address;
? ? ? ? ? });
? ? ? ? ? ? this.form.longitude = e.point.lng;
? ? ? ? ? ? this.form.latitude = e.point.lat;
? ? ? ? },
? ? ? ? //定位成功回調(diào)
? ? ? ? getLoctionSuccess(point, AddressComponent, marker){
? ? ? ? ? map.clearOverlays();
? ? ? ? ? let Icon_0 = new BMap.Icon("static/zuobiao.gif", new BMap.Size(64, 64), {anchor: new BMap.Size(18, 32),imageSize: new BMap.Size(36, 36)});
? ? ? ? ? var myMarker = new BMap.Marker(new BMap.Point(point.point.lng, point.point.lat),{icon: Icon_0});
? ? ? ? ? map.addOverlay(myMarker);
? ? ? ? ? this.form.longitude = point.point.lng;
? ? ? ? ? this.form.latitude = point.point.lat;
? ? ? ? },
? ? ? ? findlocation(){
? ? ? ? ? this.$emit("findlocdata",this.form)
? ? ? ? ? this.mapVisible = false
? ? ? ? },
? ? ? ? mapShow(){
? ? ? ? ? this.mapVisible = true
? ? ? ? },
? ?}

結(jié)果展示