vue使用腾讯地图获取经纬度和逆解析获取详细地址
示例
必须在腾讯api中申请自己的key
打开这个webservice用来逆解析详细地址
下面是代码
1 , html创建放地图的容器
<div id="map"></div>
2,在vue的index.html下引入腾讯地图
<script charset="utf-8" src="/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: "/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./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 = '/api/js?v=2.exp&callback=init&key=' + key;script.onerror = reject;document.head.appendChild(script);});}
希望此文章能帮助到您
