<template>
<div>
<div class="mapfont" style="width: 100%" id="mapcon">
<!-- <el-input
v-model="addressKeyword"
placeholder="请输入地址来直接查找相关位置"
clearable
> -->
<el-autocomplete
class="inline-input"
v-model="addressKeyword"
:fetch-suggestions="querySearch"
placeholder="请输入地址匹配相关位置"
@select="onSelect"
clearable
size="medium"
style="width:500px"
></el-autocomplete>
<el-button
slot="append"
icon="el-icon-search"
@click="getAddressKeyword"
/>
</el-input>
<div id="container" style="width: 100%; height: 400px" />
<div class="ybut">
<!-- <el-button @click="nobut"> 取消 </el-button> -->
<el-button type="primary" @click="mapbut"> 提交 </el-button>
</div>
</div>
</div>
</template>
<script>
import $ from "jquery";
import maps from "qqmap";
export default {
data() {
return {
//腾讯地图
map: null,
getAddress: null,
getAddCode: null,
addressKeyword: "",
latitude: 0, //经度
longitude: 0, //纬度
Latitudeandlongitude: "", //经纬度
address: "", //地址
addressList: [],
};
},
mounted() {
// this.initLocal();
this.inits();
},
methods: {
querySearch(queryString, cb) {
// 调用 callback 返回建议列表的数据
let that = this;
if (queryString.length <= 0) {
//用于接收地址列表的数组,在data声明
that.addressList = [];
return;
}
this.$axios({
//this代表vue对象,之前在入口文件中把axios挂载到了vue中,所以这里直接用this.$axios调用axios对象
method: "get",
dataType: "json",
async: false, //关闭异步
url: "/qqmap/ws/place/v1/suggestion",
params: {
key: "your key",
keyword: queryString,
},
})
.then(function (res) {
console.log(res);
let list = res.data.data;
for (let i = 0; i < list.length; i++) {
let obj = {};
obj.value = list[i].title;
obj.address = list[i].address;
that.addressList.push(obj);
}
console.log(that.addressList);
cb(that.addressList);
})
.catch(function (err) {
console.log(err);
cb(that.addressList);
});
//在执行这一步之前要配置跨域,不然会报错
},
onSelect() {
console.log("111");
this.$axios({
methods: "get",
url: "https://apis.map.qq.com/ws/place/v1/suggestion",
data: {
keyword: this.addressKeyword,
region: this.select,
refere: "your key",
},
}).then((res) => {
console.log(res.data);
});
},
//地图
mapoff() {},
nobut() {
this.address = "";
},
mapbut() {
// if(this.addressKeyword==""){
// this.$message({
// message: '您还没有选择位置,请选择位置!!!',
// type: 'warning'
// });
// }else{
// var i =
// "经度:" +
// this.longitude +
// ",纬度:" +
// this.latitude +
// ",地址:" +
// this.address;
// alert(i + "地址:" + this.addressKeyword);
// // }
this.$emit("savelocalton", this.longitude, this.latitude);
},
//初始化获取当前位置信息
initLocal() {
let that = this;
var geolocation = new qq.maps.Geolocation(
"your key",
"container"
);
// 定位成功之后调用的方法
function showPosition(position) {
that.latitude = position.lat;
that.longitude = position.lng;
console.log(that.latitude);
console.log(that.longitude);
that.inits();
}
function showErr() {
console.log("定位失败");
that.inits();
}
geolocation.getLocation(showPosition, showErr);
},
//初始化地图
inits() {
var that = this;
//使用自己的腾讯地图key
maps.init("your key", () => {
var myLatlng = new qq.maps.LatLng(that.latitude, that.longitude);
var myOptions = {
zoom: 15,
center: myLatlng,
mapTypeId: qq.maps.MapTypeId.ROADMAP,
};
that.map = new qq.maps.Map(
document.getElementById("container"),
myOptions
);
// 获取点击后的地址
qq.maps.event.addListener(that.map, "click", function (event) {
var marker = new qq.maps.Marker({
position: event.latLng,
map: that.map,
});
// 获取点击后的地图坐标
that.longitude = event.latLng.lng; //经度
that.latitude = event.latLng.lat; //纬度
// console.log("获取位置")
that.getAddressCode();
qq.maps.event.addListener(that.map, "click", function (event) {
marker.setMap(null);
});
});
//调用地名显示地图位置并设置地址
that.getAddress = new qq.maps.Geocoder({
complete: function (result) {
that.map.setCenter(result.detail.location);
that.map.setZoom(15);
//输入调用地图经纬度和地址
that.longitude = result.detail.location.lat; //经度
that.latitude = result.detail.location.lng; //纬度
that.Latitudeandlongitude = that.longitude + "," + that.latitude; //经纬度
//获取地理位置
var data = {
location: that.Latitudeandlongitude,
/*换成自己申请的key*/
key: "your key",
get_poi: 0,
};
var url = "https://apis.map.qq.com/ws/geocoder/v1/?";
data.output = "jsonp";
$.ajax({
type: "get",
dataType: "jsonp",
data: data,
jsonp: "callback",
jsonpCallback: "QQmap",
url: url,
success: function (json) {
var toStr = JSON.stringify(json);
// alert(that.Latitudeandlongitude);
that.markerPoint(that.longitude, that.latitude, that.map);
// if (json.status == 190) {
// alert(that.Latitudeandlongitude);
// var marker = new qq.maps.Marker({
// //设置Marker的位置坐标
// position: that.Latitudeandlongitude,
// //设置显示Marker的地图
// map: that.map,
// });
// } else {
// that.address =
// toStr.result.address +
// toStr.result.formatted_addresses.recommend;
// alert(that.Latitudeandlongitude);
// }
// console.log("地名调用")
},
error: function (err) {
// alert("服务端错误,请刷新浏览器后重试");
},
});
},
});
//通过坐标来显示地图地址
that.getAddCode = new qq.maps.Geocoder({
complete: function (result) {
that.addressKeyword = result.detail.address;
},
});
});
},
markerPoint(lon, lat, map) {
let that = this;
var marker = new qq.maps.Marker({
position: new qq.maps.LatLng(lon, lat),
map: map,
});
// 获取点击后的地图坐标
that.longitude = lat; //经度
that.latitude = lon; //纬度
// console.log("获取位置")
that.getAddressCode();
qq.maps.event.addListener(map, "click", function (event) {
marker.setMap(null);
});
// var center = new qq.maps.LatLng(lon, lat);
// // var map = new qq.maps.Map(document.getElementById("container"), {
// // center: center,
// // zoom: 16,
// // });
// //创建一个Marker
// var marker = new qq.maps.Marker({
// //设置Marker的位置坐标
// position: center,
// //设置显示Marker的地图
// map: map,
// });
// //设置Marker的可见性,为true时可见,false时不可见,默认属性为true
// marker.setVisible(true);
// //设置Marker的动画属性为从落下
// marker.setAnimation(qq.maps.MarkerAnimation.DOWN);
// //设置Marker是否可以被拖拽,为true时可拖拽,false时不可拖拽,默认属性为false
// marker.setDraggable(true);
// 设置Marker自定义图标的属性,size是图标尺寸,该尺寸为显示图标的实际尺寸,origin是切图坐标,该坐标是相对于图片左上角默认为(0,0)的相对像素坐标,anchor是锚点坐标,描述经纬度点对应图标中的位置
// var anchor = new qq.maps.Point(0, 39),
// size = new qq.maps.Size(42, 68),
// origin = new qq.maps.Point(0, 0),
// icon = new qq.maps.MarkerImage(
// "https://lbs.qq.com/doc/img/nilt.png",
// size,
// origin,
// anchor
// );
// marker.setIcon(icon);
// //设置Marker阴影图片属性,size是图标尺寸,该尺寸为显示图标的实际尺寸,origin是切图坐标,该坐标是相对于图片左上角默认为(0,0)的相对像素坐标,anchor是锚点坐标,描述经纬度点对应图标中的位置
// // var anchorb = new qq.maps.Point(3, -30),
// // sizeb = new qq.maps.Size(42, 11),
// // origin = new qq.maps.Point(0, 0),
// // iconb = new qq.maps.MarkerImage(
// // "https://lbs.qq.com/doc/img/nilb.png",
// // sizeb,
// // origin,
// // anchorb
// // );
// // marker.setShadow(iconb);
// //设置标注的名称,当鼠标划过Marker时显示
// marker.setTitle("测试");
// //添加信息窗口
// var info = new qq.maps.InfoWindow({
// map: map,
// });
// //获取标记的可拖动属性
// info.open();
// info.setContent("标记的可拖动属性为:" + marker.getDraggable());
// info.setPosition(marker.getPosition());
// //标记Marker点击事件
// qq.maps.event.addListener(marker, "click", function () {
// info.open();
// info.setContent(
// '<div style="text-align:center;white-space:nowrap;' +
// 'margin:10px;">单击标记</div>'
// );
// info.setPosition(marker.getPosition());
// });
// //设置Marker停止拖动事件
// qq.maps.event.addListener(marker, "dragend", function () {
// info.open();
// info.setContent(
// '<div style="text-align:center;white-space:nowrap;' +
// 'margin:10px;">拖动标记</div>'
// );
// //getPosition() 返回Marker的位置
// info.setPosition(marker.getPosition());
// });
},
//通过地址获得位置!!!!!!!!
getAddressKeyword() {
//通过getLocation();方法获取位置信息值
this.getAddress.getLocation(this.addressKeyword); //调用自带的接口
},
// 通过坐标获得地址
getAddressCode() {
var that = this;
var lat = parseFloat(that.latitude);
var lng = parseFloat(that.longitude);
var latLng = new qq.maps.LatLng(lat, lng);
that.Latitudeandlongitude = lat + "," + lng;
//获取地理位置
var data = {
location: that.Latitudeandlongitude,
/*换成自己申请的key*/
key: "your key",
get_poi: 0,
};
var url = "https://apis.map.qq.com/ws/geocoder/v1/?";
data.output = "jsonp";
$.ajax({
type: "get",
dataType: "jsonp",
data: data,
jsonp: "callback",
jsonpCallback: "QQmap",
url: url,
success: function (json) {
var toStr = JSON.stringify(json);
// that.address = json.result.formatted_addresses.recommend;
// that.form.classField = that.address;
// alert(that.Latitudeandlongitude + ";" + that.address);
that.getAddCode.getAddress(latLng);
},
error: function (err) {
// alert("服务端错误,请刷新浏览器后重试");
},
});
},
},
};
</script>
<style>
.mapfont div:nth-child(2) a:nth-child(1) {
display: none !important;
}
.mapfont div:nth-child(3) div:nth-child(2) span:nth-child(1) {
display: none !important;
}
</style>
vue引入腾讯地图demo
最新推荐文章于 2024-08-16 14:50:55 发布