vue仅使用腾讯地图根据城市名称获取经纬度

方式一: 下载插件
1.下载

npm install qqmap --save
1
2.使用

// 2.1引入
import maps from 'qqmap'
export default {
   mounted () {
       // 方法调用
   this.getLatitude('北京', '北京市', '通州区')
   },
   methods: {
       // 2.2 获取经纬度方法
   getLatitude (province, city, countytown) {
   const _t = this
   const localName = province + ',' + city + ',' + countytown
   // 初始化 maps
   maps.init('你的key值', () => {})
   const callbacks = {
   complete: function (result) {
   // 2.4 取到城市信息
   const local = result.detail.location
   _t.formInfo.teLongitude = local.lng // 经度
   _t.formInfo.siteLatitude = local.lat // 纬度
   console.log(result, 'result')
   }
   }
   // eslint-disable-next-line no-undef
   const geocoder = new qq.maps.Geocoder(callbacks)
   // 调用方法
   // 地址解析类用于在地址和经纬度之间进行转换的服务
   geocoder.getLocation(localName)

   // 根据城市获取城市信息 (含经纬度)
   // const cs= new qq.maps.CityService(callbacksSearch)
   // cs.searchCityByName('北京市')
   }
   }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
方式二: iframe

1 index.html文件引入

template加上 iframe
<iframe
width="100%"
height="100%"
frameborder="0"
src="https://apis.map.qq.com/tools/locpicker?search=1&type=1&mapdraggable=0&total=20&key=你的key值&referer=myapp"
></iframe>
1
2
3
4
5
6
js里添加方法
// 同上添加方法不需要初始化
// 获取经纬度
getLatitude (province, city, countytown) {
const _t = this
const localName = province + ',' + city + ',' + countytown
const callbacks = {
complete: function (result) {
const local = result.detail.location
_t.formInfo.teLongitude = local.lng // 经度
_t.formInfo.siteLatitude = local.lat // 纬度
console.log(result, 'result')
}
}
// eslint-disable-next-line no-undef
const geocoder = new qq.maps.Geocoder(callbacks)
geocoder.getLocation(localName)
},
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
如果不需要显示地图还得给iframe加上样式不让它显示

腾讯api地址

https://lbs.qq.com/webApi/javascriptV2/jsGuide/jsService#3
————————————————
版权声明：本文为CSDN博主「学着学着就玩儿了的学渣」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/weixin_45323842/article/details/111031951

vue仅使用腾讯地图根据城市名称获取经纬度相关推荐

前端web用腾讯地图api根据地址获取经纬度
需求:使用腾讯地图,通过输入的地址获取经纬度 1.先引入腾讯地图,参考https://blog.csdn.net/l13620804253/article/details/117254651 2.要调 ...
基于vue 2.X和高德地图的vue-amap组件获取经纬度
今天我就讲了一下怎么通过vue和高德地图开发的vue-amap组件来获取经纬度. 这是vue-amap的官网文档:https://elemefe.github.io/vue-amap/#/ 这是我的码 ...
vue中使用腾讯地图选择地址
腾讯地图选择地址引发的一系列问题 2019/12/14更新修复了自治区/直辖市无法选择的bug(比如上海之类的城市) 采用更加友好的方式来选择地址新的文章链接:vue中使用腾讯地图选择地址(二) ...
android往天气接口里面传城市,Android使用中国天气网API数据通过城市名称获取天气情况...
项目要求在应用首页面展示本地当日天气的概况,首先想到的是google和雅虎,前者很久之前接触过,听说后来用不了了,后者由于邮箱事件的缘故个人不喜欢(虽然貌似苹果也用雅虎的天气预报),之后又想到了前段时 ...
在vue中使用腾讯地图绘制围栏功能
首先,先看效果图里面包含了自定义多边形绘制围栏.圆形绘制以及矩形等方式,以及清除围栏经纬度的方法和获取围栏经纬度的方法. 首先在项目的index.html中引入腾讯地图 <script cha ...
在vue中使用腾讯地图
1. 引入腾讯地图在 index.html 中插入 <script charset="utf-8" src="https://map.qq.com/api/glj ...
vue项目使用腾讯地图获取定位
一.注册成为腾讯地图开发者 https://lbs.qq.com/ 创建新秘钥 https://lbs.qq.com/dev/console/key/manage 根据页面提示填写相关信息复制你 ...
vue+elementUI 使用腾讯地图
效果如下 · 引入地图qqmap 刚开始我是直接用 npm install qqmap,但是好像只有v1版本的,我需要用v2版本的,所以直接使用script标签加载API服务. 文件:/public/ ...
腾讯逆地址解析php,腾讯地图逆地址解析，通过经纬度获取详细的信息数据
根据腾讯地图API,以图文的方式一步一步的来说明如何获取详细的位置信息数据.具体参考腾讯地图Webservice API的简介.腾讯地图WebService API 第一步:申请开发者密钥(key)申 ...

vue仅使用腾讯地图根据城市名称获取经纬度

vue仅使用腾讯地图根据城市名称获取经纬度相关推荐

最新文章

热门文章