vue 百度地图获取经纬度地址

地图安装看这个https://blog.csdn.net/Iphone886/article/details/127976856?ops_request_misc=&request_id=&biz_id=102&utm_term=vue2%E7%99%BE%E5%BA%A6%E5%9C%B0%E5%9B%BE%E4%BD%BF%E7%94%A8&utm_medium=distribute.pc_search_result.none-task-blog-2~all~sobaiduweb~default-1-127976856.142^v68^control,201^v4^add_ask,213^v2^t3_esquery_v1&spm=1018.2226.3001.4187

1，搜索任意地址

2，弹出经，纬度，地址。

3，保存后。F12，打印出经，纬度地址。

4，点击地图任意点。查出经，纬度，地址。

上代码。

index.vue

 <template><el-container>
<el-dialog width="60%" :visible.sync="mapVisible" append-to-body><baidu-map style="display:flex;flex-direction: column-reverse;" class="bm-view" @ready="mapReady"@click="getLocation" :scroll-wheel-zoom="true"><bm-navigation anchor="BMAP_ANCHOR_TOP_RIGHT"></bm-navigation><bm-marker v-if="infoWindowShow" :position="{lng: form.lng, lat: form.lat}"></bm-marker><bm-info-window :position="{lng: form.lng, lat: form.lat}" :show="infoWindowShow"@clickclose="infoWindowClose"><p>当前位置:{{form.address}}</p><p>经度:{{form.lng}}</p><p>纬度:{{form.lat}}</p></bm-info-window><div style="margin-bottom: 10px;"><bm-auto-complete v-model="form.address" :sugStyle="{zIndex: 999999}"><el-input v-model="form.address" style="width:300px;margin-right:15px" placeholder="输入地址"clearable></el-input></bm-auto-complete><el-button type="primary" @click="getBaiduMapPoint">搜索</el-button><el-button type="primary" @click="closeMap()">保存</el-button></div></baidu-map></el-dialog></el-container>
</template>
<script>
export default {data() {return {lng: "", //经度lat: "", //纬度address: "", //详细地址infoWindowShow: false, //地图详细地址显示mapVisible: false, //百度地图弹框}
</script>
methods: {//百度地图初始化mapReady({BMap,map}) {// 默认经纬度作为中心点this.point = new BMap.Point(116.393541, 39.902292);map.centerAndZoom(this.point, 15);this.BMap = BMapthis.map = map},//点击获取经纬度getLocation(e) {this.form.lng = e.point.lng //经度this.form.lat = e.point.lat //纬度console.log(e.point.lng)console.log(e.point.lat)var point = new BMap.Point(e.point.lng, e.point.lat);var gc = new BMap.Geocoder();let _this = this;gc.getLocation(point, function(rs) {//地址信息_this.form.address = rs.address;});this.infoWindowShow = true},getBaiduMapPoint() {let that = thislet myGeo = new this.BMap.Geocoder()myGeo.getPoint(this.form.address, function(point) {if (point.lng != '116.413384') {that.map.centerAndZoom(point, 15)that.form.lng = point.lng //经度that.form.lat = point.lat //纬度that.infoWindowShow = true} else {that.$message({message: "请选择正确地址！！!",type: "warning",});this.infoWindowShow = false}})},//百度地图信息窗口关闭infoWindowClose() {this.form.lng = ""; //经度this.form.lat = ""; //纬度this.form.address = ""; //详细地址this.infoWindowShow = false;},//弹出百度地图addMap() {this.infoWindowShow = false;this.mapVisible = true;},//关闭地图closeMap() {console.log(this.form.lng);console.log(this.form.lat);console.log(this.form.address);this.mapVisible = false; //关闭弹窗},
}

有问题，请留言。

或2297660550@qq.com联系我

vue 百度地图获取经纬度地址相关推荐

vue中调用百度地图获取经纬度
项目中,需要实现获取当前位置的经纬度,或者搜索某个位置并获取经纬度信息,我使用的的是vue,地图使用的是百度地图. 默认自动获取当前位置经纬度拖动小红标获取经纬度关键词查询获取经纬度前期准备 ...
根据ip获取经纬度_PHP使用百度地图获取指定地址坐标：创建AK（图文+视频）
本篇文章主要给大家介绍PHP使用百度地图获取指定地址坐标之创建AK(api key)的方法. 我们在前面的文章[PHP使用腾讯地图获取指定地址坐标:创建key][PHP使用腾讯地图获取指定地址坐标:经 ...
百度地图获取经纬度后，获取区域代码和地址
百度地图获取经纬度后,获取区域代码和地址: function getdistrct_code($location){$url ="api.map.baidu.com/geocoder/v2/ ...
根据php经纬度百度地图打点,PHP使用百度地图获取指定地址坐标：经纬度（图文+视频）...
本篇文章主要给大家介绍PHP使用百度地图获取指定地址坐标之经纬度的实现方法. 在之前的文章[PHP使用百度地图获取指定地址坐标:创建AK]中,已经给大家介绍了如何在百度地图开放平台中创建AK(api ...
全球地区资料json 含中英文经纬度_爬虫实战（三）使用百度API获取经纬度/地址...
点击上方"蓝字"关注我们百度API获取经纬度/地址Mar 28, 2020 本期介绍给定地址/经纬度,使用百度API来获取经纬度/地址. 本文约3k字,预计阅读18分钟. 本次是第 ...
JS 通过百度地图获取详细地址及经纬度
下方代码可以通过百度地图获取到经纬度和详细位置地址注意: <script type ="text / javascript"src ="http://api.ma ...
Android百度地图获取经纬度和好友定位
1.新建工程,libs目录下导入baidumapapi_v3_0_0.jar和locSDK_4.2.jar架包,so文件也需要导入. 2.关键类说明 public MapView mapView = ...
android百度地图获取经纬度
首先登陆百度网址百度地图开放平台打开这个网页找到开发文档这里有个获取经纬度, 在使用定位SDK进行具体开发工作之前,需获取密钥(AK),并对开发工程进行环境配置工作.详细介绍请参考项目创建部分的 ...
百度地图获取经纬度为4.9E-324
Android 调用百度地图SDK获取经纬度时发现获取不到数据,显示的是4.9E-324 打印错误码发现为167,于是看了下官方文档然后发现手机里的定位权限没有打开,打开后就可以获取到经纬度了位置 ...

vue 百度地图获取经纬度地址

vue 百度地图获取经纬度地址相关推荐

最新文章

热门文章