百度地图+vue+element搜索定位经纬度坐标

1、第一步安装vue-baidu-map

 npm install vue-baidu-map --save

2、第二步在父组件

<template><div id="app"><el-button @click="mapVisible=!mapVisible"> 打开 </el-button><HelloWorld :mapVisible="mapVisible" v-on:mapLocationClose="mapLocationClose" v-on:mapLocationSave="mapLocationSave"></HelloWorld></div>
</template><script>
import HelloWorld from './components/HelloWorld.vue'export default {name: 'app',components: {HelloWorld},data () {return {mapVisible:false}},methods:{mapLocationClose(){this.mapVisible = false},mapLocationSave(e){console.log(e)this.mapVisible = false}}
}
</script>

**3、第三步 components文件夹下新建HelloWorld.vue **

<template><div><el-dialog title="定位设置" :visible.sync="mapVisible" :before-close="close"   id="mapDialog" width="65%" top="8vh" :close-on-click-modal="false"><div><el-selectclass="select"v-model="search"filterableremoteclearablereserve-keywordclearable @clear="clearSearch"placeholder="请输入地址":remote-method="mapNameChange"@change="mapNameChange($event,'change')":loading="loading"style="width: 100%;"><el-optionv-for="item in searchOption":key="item.title":label="item.title":value="item.title"></el-option></el-select></div><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><!-- 定位当前位置 --><bm-geolocation anchor="BMAP_ANCHOR_BOTTOM_RIGHT"  :showAddressBar="true" :autoLocation="true" @locationSuccess="getLoctionSuccess" ></bm-geolocation><!-- 地图容器 --><bm-view :style="{width:'100%',height: this.clientHeight+'px',flex: 1,marginBottom:'-30px'}"></bm-view></baidu-map><div class="demo-input-suffix" ><el-link type="info">lng：</el-link><el-input  class="lineinput"  style="width:100px" size="mini" v-model.number="locData.longitude"></el-input><el-link type="info">lat：</el-link><el-input  class="lineinput"  style="width:100px" size="mini" v-model.number="locData.latitude"></el-input><el-link type="info">地址：</el-link><el-input  class="lineinput"  style="width:250px" size="mini" v-model="locData.address"></el-input></div><div slot="footer" class="dialog-footer"><el-button type="warning"  size="small" icon="el-icon-close" @click.native="close">取消</el-button><el-button type="primary" size="small" icon="el-icon-check" @click.native="findlocation">保存</el-button></div></el-dialog></div>
</template><script>
let geoc = null;
import {BaiduMap,BmNavigation,BmView,BmGeolocation,BmCityList} from 'vue-baidu-map'export default {name: "mapDialog",components: {BaiduMap,BmNavigation,BmView,BmGeolocation,BmCityList},props:{mapVisible:""},data () {return {center: {lng: 117.063035, lat: 36.672767},zoom: 12,locData:{longitude:'',latitude:'',address:'',},clientHeight:document.documentElement.clientHeight-450, // 屏幕高度iconUrl:'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1505732009,4176072429&fm=26&gp=0.jpg',search:'',searchOption:[],loading:false}},mounted() {},methods: {handler ({BMap, map}) {let _this = this; // 设置一个临时变量指向vue实例，因为在百度地图回调里使用this，指向的不是vue实例；var geolocation = new BMap.Geolocation();geolocation.getCurrentPosition(function(r){//console.log(r);_this.center = {lng: r.longitude, lat: r.latitude};      // 设置center属性值_this.autoLocationPoint = {lng: r.longitude, lat: r.latitude};       // 自定义覆盖物_this.initLocation = true;},{enableHighAccuracy: true})window.map = map;},//点击地图监听clickEvent(e){map.clearOverlays();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)});var myMarker = new BMap.Marker(new BMap.Point(e.point.lng, e.point.lat),{icon: Icon_0});map.addOverlay(myMarker);//用所定位的经纬度查找所在地省市街道等信息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.locData.address = rs.address;});this.locData.longitude = e.point.lng;this.locData.latitude = e.point.lat;},//定位成功回调getLoctionSuccess(point, AddressComponent, marker){map.clearOverlays();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)});var myMarker = new BMap.Marker(new BMap.Point(point.point.lng, point.point.lat),{icon: Icon_0});map.addOverlay(myMarker);this.locData.longitude = point.point.lng;this.locData.latitude = point.point.lat;},mapNameChange(e,data) {this.loading = true;if(!e && !this.search){return false}let that = this,point,marker = null;geoc = new BMap.Geocoder();let local = new BMap.LocalSearch(map, {renderOptions: { map: map },onSearchComplete: res => {this.loading = false;//console.log(res);if(res){if(data!=="change"){that.searchOption = res.Hr}if(res.Hr.length>0){that.$set(that.locData,'longitude',res.Hr[0].point.lng)that.$set(that.locData,'latitude',res.Hr[0].point.lat)}}if (local.getResults() != undefined) {map.clearOverlays(); //清除地图上所有覆盖物if (local.getResults().getPoi(0)) {point = local.getResults().getPoi(0).point; //获取第一个智能搜索的结果map.centerAndZoom(point, 10);marker = new BMap.Marker(point); // 创建标注map.addOverlay(marker); // 将标注添加到地图中marker.enableDragging(); // 可拖拽geoc.getLocation(point, function(rs) {var addComp = rs.addressComponents;that.$set(that.locData,'address',addComp.province +  addComp.city + addComp.district + addComp.street + addComp.streetNumber)});} else {this.$message('未匹配到地点!可拖动地图上的红色图标到精确位置');}} else {this.$message("未找到搜索结果");}}});local.search(e || this.search);},findlocation(){this.$emit("mapLocationSave",this.locData)},clearSearch(){this.loading = false},close(){this.$emit('mapLocationClose')}}}
</script><!-- Add "scoped" attribute to limit CSS to this component only -->
<style>.map{margin-top: 5px;}
.demo-input-suffix{width: 100%;margin-top: 40px;
}
.BMap_bubble_title a{  /* 隐藏搜索结果的详情按钮 */display: none;
}
.anchorBL{display:none} /* 去除百度地图左下角的介绍文字 */
</style>

第四步完成
欢迎指出问题

百度地图+vue+element搜索定位经纬度坐标相关推荐

Vue项目引用百度地图并实现搜索定位等功能
Tip:本篇文章为案例分析,技术点较多,所以篇幅较长,认真阅览的你一定会学到很多知识. 前言:百度地图开放平台给开发者们提供了丰富的地图功能与服务,使我们的项目中可以轻松地实现地图定位.地址搜索.路 ...
【具体实现过程】百度地图POI区域的边界经纬度坐标数据采集
最近有个项目需要拿到百度地图中XXX市中所有学校的边界坐标.经过一下午的努力,终于成功拿到了坐标,对坐标数据还原和验证.特此记录一下具体实现过程和爬取思路. 前言:什么是POI? Point of i ...
如何引入百度地图和获取精准获取经纬度坐标
引入百度地图百度地图官网开发手册百度地图官网注册用户 -> 控制台 -> 认证用户 -> 创建项目 -> 获取ak密钥 -> 替换js中ak秘钥 < ...
百度地图网站获取指定地点经纬度坐标方法
有时候我们要查询某个位置的经纬度坐标,但是手机上的百度地图应用不能得到这个信息. 百度地图网页版就可以根据输入的地址查询经纬度,还可以把经纬度复制出来. 方法如下. 还可以根据坐标查询地址. 内容提要 ...
百度地图API:根据起始点经纬度坐标确认最佳路线规划
css样式 body, html {width: 100%;height: 100%;overflow: hidden;margin: 0;font-family: "微软雅黑"; ...
百度地图之地图显示和定位，获取定位的经纬度
在百度地图api开放平台,把demo下载把第三方的包粘贴到自己项目的libs包下(android-support-v4.jar这个包不要粘) 在百度开发平台创建项目,输入项目名, 从cmd中获取sh ...
百度地图实现普通地图、定位、周边搜索功能
//--------------一下是普通地图的实现----------------------------------- 1:打开百度地图APi进去,如果没有注册过的需要注册,注册过的登录进入 2: ...
php调用百度地图定位,php用百度地图API进行IP定位和GPS定位
/** * 根据地理坐标获取国家.省份.城市,及周边数据类(利用百度Geocoding API实现) * 百度密钥获取方法:http://lbsyun.baidu.com/apiconsole/key ...
使用百度地图api模拟实时定位页面完整示例
使用百度地图api模拟实时定位页面完整示例效果:使用百度地图api在页面上显示车辆的实时位置,并有自动刷新和手动刷新两种方式可以选择.每次刷新后,都会在地图上显示车辆的最新位置. 示例运行效果截图 ...
在web页面嵌入百度地图（含定点定位）
在web页面嵌入百度地图(含定点定位) 一.操作步骤二.可能遇到的问题 1.标记图标没有正常显示出来 2.使用到项目中可能遇到的问题 (1)地图内容显示不正常 (2)标注名称的边框显示不正常三.参 ...

百度地图+vue+element搜索定位经纬度坐标

百度地图+vue+element搜索定位经纬度坐标

百度地图+vue+element搜索定位经纬度坐标相关推荐

最新文章

热门文章