Vue的模态框中实现根据详细地址定位经纬度

最近在项目中遇到这样一个需求，在新增商品的模态框中，根据拿到的地址在地图上显示具体位置，并把经纬度给后台。

如图，选择供应商之后在2的input框中会显示详细的地址，根据后台返回的详细地址地图上定位到具体的经纬度，并且拿到经纬度。

做这个需求之前先去百度地图获取密钥，在index.html中引入百度地图api

<!--引入百度地图API--><script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=你的密钥"></script>//内网测试<!-- <script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&ak=你的密钥&s=1"></script> -->//项目上线到域名地址要改为https，并且要加&s=1

这是引入百度api的写法，下面那个是外网的，项目上线到外网的话要加https，并且在密钥后面拼接&s=1

1、首先定义显示的标签容器

<!--地图容器-->
<div><div id="allmap"></div>
</div>

2、我是在弹框显示的时候先初始化一个地图，手动设置一个经纬度

cellMap(){var th = this;// 创建Map实例var map = new BMap.Map("allmap");// 初始化地图,设置中心点坐标，var point = new BMap.Point(113.929872,22.581627); // 初始化点坐标map.centerAndZoom(point, 15);map.enableScrollWheelZoom();
},

然后选择供应商之后在供应商选择框的change事件中去回调显示的函数

getMap(address){// debuggerlet that = this;var map = new BMap.Map("allmap");var localSearch = new BMap.LocalSearch(map);map.clearOverlays();//清空原来的标注var keyword = this.managementAddress;localSearch.setSearchCompleteCallback(function (searchResult) {var poi = searchResult.getPoi(0);console.log(poi.point.lng);console.log(poi.point.lat);map.centerAndZoom(poi.point, 13);var marker = new BMap.Marker(new BMap.Point(poi.point.lng, poi.point.lat));  // 创建标注map.addOverlay(marker);that.lng = poi.point.lng;that.lat = poi.point.lat;});localSearch.search(keyword);},

个人写法，仅供参考

Vue的模态框中实现根据详细地址定位经纬度相关推荐

uniapp vue nvue 模态框遮罩
uniapp vue nvue 模态框遮罩以前纯 Vue 开发的时候:模态框遮罩就是这么写的 .popBack{position: fixed;top: 0;left: 0;z-index: ...
iview的走马灯嵌套在模态框中，宽度为0的解决方案
在项目开发中用到了iview的走马灯嵌套在模态框中这种需求,结果发现走马灯图片不显示,打开控制台审查元素发现走马灯的内部盒子width为0,自己感觉在页面初始化的时候,因为模态框初始值为false,所 ...
Vue由本地js中存放的url地址获取图片
Vue由本地js中存放的url地址获取图片对象必须放在js中(而不是json里面,json没有require).如果是在json中,需要采用其他方式去获取注意:url地址必须用这种形式,有requ ...
根据详细地址获取经纬度（通过高德API）
vue项目根据详细地址获取经纬度(通过高德API) 一.在高德控制台key的获取二.Jsonp的使用三.查看success回调返回的打印结果一.在高德控制台key的获取网上找了很多,但是多多少 ...
Java调用高德地图API根据详细地址获取经纬度
Java调用高德地图API根据详细地址获取经纬度官方API:https://lbs.amap.com/api/webservice/guide/api/georegeo * Web服务API 地理/ ...
linux脚本获取经纬度,JS实现根据详细地址获取经纬度功能示例
本文实例讲述了JS实现根据详细地址获取经纬度功能.分享给大家供大家参考,具体如下: 这个功能还是比较实用的,记录分享一下: 根据地址查询经纬度要查询的地址: 查询结果(经纬度): var map = ...
用vue实现模态框组件
基本上每个项目都需要用到模态框组件,由于在最近的项目中,alert组件和confirm是两套完全不一样的设计,所以我将他们分成了两个组件,本文主要讨论的是confirm组件的实现. 组件结构 < ...
如何用vue实现模态框组件
基本上每个项目都需要用到模态框组件,由于在最近的项目中,alert组件和confirm是两套完全不一样的设计,所以我将他们分成了两个组件,本文主要讨论的是confirm组件的实现. 组件结构 < ...
echarts点击事件调用模态框，模态框中存在echarts
首先看一下效果 <!DOCTYPE html> <html><head><meta charset="utf-8" /><ti ...

Vue的模态框中实现根据详细地址定位经纬度

Vue的模态框中实现根据详细地址定位经纬度相关推荐

最新文章

热门文章

Vue的模态框中实现 根据详细地址定位经纬度

Vue的模态框中实现 根据详细地址定位经纬度相关推荐

最新文章

热门文章

Vue的模态框中实现根据详细地址定位经纬度

Vue的模态框中实现根据详细地址定位经纬度相关推荐