方式一: 下载插件
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文件引入
<script type="text/javascript" src="/api/js?v=2.exp&key=你的key值"></script>
1
2 组件内部
template加上 iframe
<iframe
width="100%"
height="100%"
frameborder="0"
src="https://apis./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地址
/webApi/javascriptV2/jsGuide/jsService#3
————————————————
版权声明：本文为CSDN博主「学着学着就玩儿了的学渣」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：/weixin_45323842/article/details/111031951
