devbox
我家小花儿
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

vue调用百度地图获取定位坐标（PC端）

作者：我家小花儿 | 2024-02-18 18:42:34

赞

踩

vue调用百度地图获取定位坐标（PC端）

1.组件代码（BaiduMapWorld.vue），将该组件引入项目中。

  1. <template>
  2.   <div>
  3.     <el-dialog
  4.             title="定位设置"
  5.             :visible.sync="mapVisible"
  6.             left
  7.             :append-to-body="true"
  8.             :lock-scroll="false"
  9.             width="65%"
  10.             :show-close="false"
  11.     >
  12.       <div>
  13.         <el-select
  14.                 class="select"
  15.                 v-model="search"
  16.                 filterable
  17.                 remote
  18.                 clearable
  19.                 reserve-keyword
  20.                 @clear="clearSearch"
  21.                 placeholder="请输入地址"
  22.                 :remote-method="mapNameChange"
  23.                 @change="mapNameChange($event,'change')"
  24.                 :loading="loading"
  25.                 style="width: 100%;">
  26.           <el-option
  27.                   v-for="item in searchOption"
  28.                   :key="item.title"
  29.                   :label="item.title"
  30.                   :value="item.title">
  31.           </el-option>
  32.         </el-select>
  33.       </div>
  34.       <baidu-map  class="map" :center="center" :zoom="zoom" @ready="handler"
  35.                   :scroll-wheel-zoom="true"
  36.                   @click="clickEvent"
  37.                   ak="33B192o1jPaqOHASGGAIkoMuwi8W76j3">
  38.         <!-- 地图控件位置 -->
  39.         <bm-navigation anchor="BMAP_ANCHOR_TOP_RIGHT"></bm-navigation>
  40.         <!-- 城市列表 -->
  41.         <bm-city-list anchor="BMAP_ANCHOR_TOP_LEFT"></bm-city-list>
  42.         <!-- 定位当前位置 -->
  43.         <bm-geolocation anchor="BMAP_ANCHOR_BOTTOM_RIGHT"  :showAddressBar="true" :autoLocation="true" @locationSuccess="getLoctionSuccess" ></bm-geolocation>
  44.         <!-- 地图容器 -->
  45.         <bm-view :style="{width:'100%',height: this.clientHeight+'px',flex: 1,marginBottom:'-30px'}"></bm-view>
  46.       </baidu-map>
  47.       <div class="demo-input-suffix" >
  48.         <el-link type="info">lng：</el-link><el-input  class="lineinput"  style="width:100px" size="mini" v-model.number="locData.longitude"></el-input>
  49.         <el-link type="info">lat：</el-link><el-input  class="lineinput"  style="width:100px" size="mini" v-model.number="locData.latitude"></el-input>
  50.         <el-link type="info">地址：</el-link><el-input  class="lineinput"  style="width:250px" size="mini" v-model="locData.address"></el-input>
  51.       </div>
  52.       <div slot="footer" class="dialog-footer">
  53.         <el-button type="warning"  size="small" icon="el-icon-close" @click.native="close">取消</el-button>
  54.         <el-button type="primary" size="small" icon="el-icon-check" @click.native="findlocation">保存</el-button>
  55.       </div>
  56.  
  57.     </el-dialog>
  58.   </div>
  59. </template>
  60.  
  61. <script>
  62.   let geoc = null;
  63.   import {BaiduMap,BmNavigation,BmView,BmGeolocation,BmCityList} from 'vue-baidu-map'
  64.   export default {
  65.     name: "mapDialog",
  66.     components: {
  67.       BaiduMap,
  68.       BmNavigation,
  69.       BmView,
  70.       BmGeolocation,
  71.       BmCityList
  72.     },
  73.     props:{
  74.       mapVisible:""
  75.     },
  76.     data () {
  77.       return {
  78.         center: {lng: 117.063035, lat: 36.672767},
  79.         zoom: 12,
  80.         locData:{
  81.           longitude:'',
  82.           latitude:'',
  83.           address:'',
  84.         },
  85.         clientHeight:document.documentElement.clientHeight-450, // 屏幕高度
  86.         iconUrl:'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1505732009,4176072429&fm=26&gp=0.jpg',
  87.         search:'',
  88.         searchOption:[],
  89.         loading:false
  90.       }
  91.     },
  92.     mounted() {
  93.     },
  94.     methods: {
  95.       handler ({BMap, map}) {
  96.         let _this = this;	// 设置一个临时变量指向vue实例，因为在百度地图回调里使用this，指向的不是vue实例；
  97.         var geolocation = new BMap.Geolocation();
  98.         geolocation.getCurrentPosition(function(r){
  99.           //console.log(r);
  100.           _this.center = {lng: r.longitude, lat: r.latitude};		// 设置center属性值
  101.           _this.autoLocationPoint = {lng: r.longitude, lat: r.latitude};		// 自定义覆盖物
  102.           _this.initLocation = true;
  103.         },{enableHighAccuracy: true})
  104.  
  105.         window.map = map;
  106.       },
  107.       //点击地图监听
  108.       clickEvent(e){
  109.         map.clearOverlays();
  110.         let Icon_0 = new BMap.Icon("https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1505732009,4176072429&fm=26&gp=0.jpg", new BMap.Size(64, 64), {anchor: new BMap.Size(18, 32),imageSize: new BMap.Size(36, 36)});
  111.         var myMarker = new BMap.Marker(new BMap.Point(e.point.lng, e.point.lat),{icon: Icon_0});
  112.         map.addOverlay(myMarker);
  113.         //用所定位的经纬度查找所在地省市街道等信息
  114.         var point = new BMap.Point(e.point.lng, e.point.lat);
  115.         var gc = new BMap.Geocoder();
  116.         let _this = this;
  117.         gc.getLocation(point, function (rs) {
  118.           var addComp = rs.addressComponents;
  119.           //console.log(rs.address);//地址信息
  120.           _this.locData.address = rs.address;
  121.  
  122.         });
  123.         this.locData.longitude = e.point.lng;
  124.         this.locData.latitude = e.point.lat;
  125.       },
  126.       //定位成功回调
  127.       getLoctionSuccess(point, AddressComponent, marker){
  128.         map.clearOverlays();
  129.         let Icon_0 = new BMap.Icon("https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1505732009,4176072429&fm=26&gp=0.jpg", new BMap.Size(64, 64), {anchor: new BMap.Size(18, 32),imageSize: new BMap.Size(36, 36)});
  130.         var myMarker = new BMap.Marker(new BMap.Point(point.point.lng, point.point.lat),{icon: Icon_0});
  131.         map.addOverlay(myMarker);
  132.         this.locData.longitude = point.point.lng;
  133.         this.locData.latitude = point.point.lat;
  134.       },
  135.       mapNameChange(e,data) {
  136.         this.loading = true;
  137.         if(!e && !this.search){
  138.           return false
  139.         }
  140.         let that = this,
  141.                 point,
  142.                 marker = null;
  143.         geoc = new BMap.Geocoder();
  144.         let local = new BMap.LocalSearch(map, {
  145.           renderOptions: { map: map },
  146.           onSearchComplete: res => {
  147.             this.loading = false;
  148.             // console.log(res);
  149.             if(res){
  150.               if(data!=="change"){
  151.                 that.searchOption = res.Kr
  152.               }
  153.               if(res.Kr.length>0){
  154.                 that.$set(that.locData,'longitude',res.Kr[0].point.lng)
  155.                 that.$set(that.locData,'latitude',res.Kr[0].point.lat)
  156.               }
  157.             }
  158.             if (local.getResults() != undefined) {
  159.               map.clearOverlays(); //清除地图上所有覆盖物
  160.               if (local.getResults().getPoi(0)) {
  161.                 point = local.getResults().getPoi(0).point; //获取第一个智能搜索的结果
  162.                 map.centerAndZoom(point, 10);
  163.                 marker = new BMap.Marker(point); // 创建标注
  164.                 map.addOverlay(marker); // 将标注添加到地图中
  165.                 marker.enableDragging(); // 可拖拽
  166.                 geoc.getLocation(point, function(rs) {
  167.                   var addComp = rs.addressComponents;
  168.                   that.$set(that.locData,'address',addComp.province +  addComp.city + addComp.district + addComp.street + addComp.streetNumber)
  169.                 });
  170.               } else {
  171.                 this.$message('未匹配到地点!可拖动地图上的红色图标到精确位置');
  172.               }
  173.             } else {
  174.               this.$message("未找到搜索结果");
  175.             }
  176.           }
  177.         });
  178.         local.search(e || this.search);
  179.       },
  180.       findlocation(){
  181.         this.$emit("mapLocationSave",this.locData)
  182.       },
  183.       clearSearch(){
  184.         this.loading = false
  185.       },
  186.       close(){
  187.         this.$emit('mapLocationClose')
  188.       }
  189.     }
  190.   }
  191. </script>
  192.  
  193. <!-- Add "scoped" attribute to limit CSS to this component only -->
  194. <style>
  195.   .map{
  196.     margin-top: 5px;
  197.   }
  198.   .demo-input-suffix{
  199.     width: 100%;
  200.     margin-top: 40px;
  201.   }
  202.   .BMap_bubble_title a{  /* 隐藏搜索结果的详情按钮 */
  203.     display: none;
  204.   }
  205.   .anchorBL{display:none} /* 去除百度地图左下角的介绍文字 */
  206. </style>

2.自己本地编辑页面调用（可根据自己需求修改样式，或抽成公共样式等，这里的样式随便弄的）

  1. <template>
  2.   <div>
  3.     <el-dialog :title="title" :visible.sync="dialogFormVisible" :close-on-click-modal="false" width="1200px" top="8vh">
  4.  
  5.       <el-form className="xy-form" :model="form" ref="form" :disabled="isDisabled" labelWidth="155px">
  6.           <!--地图定位-->
  7.           <el-form-item label="工程坐标" :span="12">
  8.               <el-col :span="7" style="padding-left: 0px;padding-right: 0px;">
  9.                   <el-input v-model="form.gpsX" :title="form.gpsX" :disabled="true"></el-input>
  10.               </el-col>
  11.               <el-col :span="3" style="padding-left: 0px;padding-right: 0px;text-align: center;">经度</el-col>
  12.               <el-col :span="7" style="padding-left: 0px;padding-right: 0px;">
  13.                   <el-input v-model="form.gpsY" :title="form.gpsY" :disabled="true"></el-input>
  14.               </el-col>
  15.               <el-col :span="3" style="padding-left: 0px;padding-right: 0px;text-align: center;">纬度</el-col>
  16.               <el-col :span="2" class="location"
  17.                       @click.native="selectPosition()">
  18.                   <img src="../img/location.png" alt="" />
  19.               </el-col>
  20.           </el-form-item>
  21.  
  22.         <el-form-item label="工程地址" prop="address" :span="12">
  23.           <el-input v-model="form.address"></el-input>
  24.         </el-form-item>
  25.  
  26.       </el-form>
  27.  
  28.       <div slot="footer" class="dialog-footer">
  29.         <el-button @click="dialogFormVisible = false">关 闭</el-button>
  30.       </div>
  31.  
  32.         <BaiduMapWorld
  33.                 :mapVisible="mapVisible"
  34.                 v-on:mapLocationClose="mapLocationClose"
  35.                 v-on:mapLocationSave="mapLocationSave"
  36.         ></BaiduMapWorld>
  37.  
  38.     </el-dialog>
  39.   </div>
  40. </template>
  41. <script>
  42. import BaiduMapWorld from "@/views/project/managerSection/components/BaiduMapWorld"
  43. export default {
  44.   components: {
  45.     BaiduMapWorld
  46.   },
  47.   data() {
  48.     return {
  49.         mapVisible: false,
  50.       isDisabled :'',
  51.       form: {
  52.         id : '',
  53.         gpsX : '',
  54.         gpsY : '',
  55.         address : '',
  56.       },
  57.  
  58.     }
  59.   },
  60.   methods: {
  61.       //获取百度地图定位坐标
  62.       selectPosition() {
  63.           this.mapVisible = true;
  64.       },
  65.       mapLocationClose() {
  66.           this.mapVisible = false;
  67.       },
  68.       mapLocationSave(param) {
  69.           this.mapVisible = false;
  70.           this.form.gpsX = param.longitude;
  71.           this.form.gpsY = param.latitude;
  72.           this.form.address = param.address;
  73.       },
  74.   }
  75. }
  76. </script>

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

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号