vue使用腾讯地图获取经纬度和逆解析获取详细地址
示例
必须在腾讯api中申请自己的key
打开这个webservice用来逆解析详细地址
下面是代码
1 , html创建放地图的容器
<div id="map"></div>
2,在vue的index.html下引入腾讯地图
<script charset="utf-8" src="https://map.qq.com/api/gljs?v=1.exp&libraries=service&key=这里填你的key"></script>
3,js
// 初始化地图
import {
CMap } from "./CMap";
data:(){
return {
map:null
}
},
//点击弹窗
async addHandle() {
await nextTick();
this.map && this.map.destroy();
this.getLatLng();
},
initMap(lat, lng) {
let that = this;
//center 根据经纬度获取地图中心点
const center = new TMap.LatLng(lat, lng);
that.map = new TMap.Map(document.getElementById("map"), {
center: center,
zoom: 17, //缩放
});
//地图点击事件
that.map.on("click", this.clickHandler);
//定位点的图标位置和大小
that.markerLayer = new TMap.MultiMarker({
id: "marker-layer",
map: that.map,
styles: {
marker: new TMap.MarkerStyle({
width: 25,
height: 35,
anchor: {
x: 16, y: 32 },
src: "https://mapapi.qq.com/web/lbs/javascriptGL/demo/img/marker-pink.png",
//src 定位点的图片箭头
}),
},
geometries: [
{
id: "demo",
styleId: "marker",
position: new TMap.LatLng(lat, lng),
properties: {
title: "marker",
},
},
],
});
},
// 获取当前经纬度
getLatLng() {
//这里的CMap是我引入的一个js在下面有写代码
CMap("你的key").then((qq) => {
var geolocation = new qq.maps.Geolocation(
"你的key",
"地图"
);
geolocation.getLocation(
(res) => {
let {
lat, lng, addr } = res;
//这里就是位置信息 可以打印出来看你需要什么;
//调用初始化地图获取当前地址;传入经纬度
this.initMap(lat, lng);
},
(err) => {
console.log(err);
}
);
});
},
//地址逆解析获取详细地址
getAreaCode() {
//这里可以直接this.$jsonp地址传入你的经纬度;
this.$jsonp("https://apis.map.qq.com/ws/geocoder/v1/?", {
location: `${
this.addFormField.lat},${
this.addFormField.lng}`, // 经纬度
key: "你的key", //这里就是要开启那个service不然会报错让你开启
output: "jsonp", // output必须jsonp 不然会超时
}).then((res) => {
//获取到的res 就是继续的地址的所有信息;
this.addFormField.take_site_address = res.result.address;
});
},
// 地图点击事件
clickHandler(evt) {
let lat = evt.latLng.getLat().toFixed(6);
let lng = evt.latLng.getLng().toFixed(6);
this.addFormField.lng = lng;
this.addFormField.lat = lat;
//这里的evt有模糊的坐标可以打印看看但是没有街道所以我这做了判断
//如果有大的目标就取大的目标否则就取街道;
if (evt.poi) {
this.addFormField.take_site_address = evt.poi.name;
} else {
//调用详细地址函数
this.getAreaCode();
}
//修改id为4的点标记的位置
this.markerLayer.updateGeometries([
{
styleId: "marker",
id: "demo",
position: new TMap.LatLng(lat, lng),
},
]);
},
//点击生成详细地址
async setLaLo() {
if (!this.addFormField.take_site_address)
return Message.warning("请填写地址");
var geocoder = new TMap.service.Geocoder();
geocoder
//这里是你输入的地址**必须详细省市区+详细地址
.getLocation({
address: `${
this.addFormField.take_site_address}` })
.then((res) => {
let {
lat, lng } = res.result.location;
this.addFormField.lng = lng;
this.addFormField.lat = lat;
//然后重新绘制
this.map.setCenter(new TMap.LatLng(lat, lng));
//修改id为4的点标记的位置
this.markerLayer.updateGeometries([
{
styleId: "marker",
id: "demo",
position: new TMap.LatLng(lat, lng),
},
]);
});
},
Cmap的js
export function CMap(key) {
return new Promise(function(resolve, reject) {
window.init = function() {
resolve(qq); //注意这里
};
var script = document.createElement('script');
script.type = 'text/javascript';
script.src = 'http://map.qq.com/api/js?v=2.exp&callback=init&key=' + key;
script.onerror = reject;
document.head.appendChild(script);
});
}
希望此文章能帮助到您