这里有一个需求就是在图片上传的时候要求用地图来选择位置,所以这里写了一个Tmap 是基于腾讯地图来使用的
组件部分
//.vue
<template>
<div class="map">
<el-input v-model="addressKeyword" placeholder="请输入地址来直接查找相关位置" clearable style="margin-bottom:20px;margin-left: 40px;">
<el-button slot="append" icon="el-icon-search" @click="getAddressKeyword"></el-button>
</el-input>
<div id="container" style="width:200%; height:500px;margin-left: 10%;"></div>
</div>
</template>
<script>
import maps from "qqmap"
export default{
data(){
return{
map: null,
getAddress: null,
getAddCode: null,
addressKeyword: "",
shopInfo:{
lng:"",
lat:"",
addr:""
}
}
},
mounted() {
this.init();
},
watch: {
showModal: function(newValue) {
if (newValue) {
this.init();
}
}
},
methods: {
//初始化地图
init() {
var that = this;
maps.init("QUJBZ-ELP66-25MSI-EAAR5-7V7K7-BFBHE", () => {
var myLatlng = new qq.maps.LatLng(30.286254829894443, 120.14249324798584);
var myOptions = {
zoom: 16,
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) {
// 获取点击后的地图坐标
that.shopInfo.lng = event.latLng.getLng();
that.shopInfo.lat = event.latLng.getLat();
that.getAddressCode();
});
//调用地址显示地图位置并设置地址
that.getAddress = new qq.maps.Geocoder({
complete: function(result) {
that.map.setCenter(result.detail.location);
console.log(result.detail.location)
that.shopInfo.lng = result.detail.location.lng;
that.shopInfo.lat = result.detail.location.lat;
var marker = new qq.maps.Marker({
map: that.map,
position: result.detail.location
});
}
});
//通过坐标来显示地图地址
that.getAddCode = new qq.maps.Geocoder({
complete: function(result) {
that.addressKeyword = result.detail.address;
that.shopInfo.addr = result.detail.address
that.$emit("getPlace",that.shopInfo)
console.log(that.shopInfo)
}
});
});
},
//通过地址获得位置
getAddressKeyword() {
//通过getLocation();方法获取位置信息值
this.getAddress.getLocation(this.addressKeyword);调用自带的接口
},
// 通过坐标获得地址
getAddressCode() {
var lat = parseFloat(this.shopInfo.lat);
var lng = parseFloat(this.shopInfo.lng);
var latLng = new qq.maps.LatLng(lat, lng);
//调用获取位置方法
this.getAddCode.getAddress(latLng);
},
},
}
</script>
调用部分
<!-- 腾讯地图,用于获取经纬度和活动地点 -->
<Tmap @getPlace="getPlace"></Tmap>
getPlace(val){
this.bannerDetail.locate_name = val.addr
},