vue中使用qqmap
<script charset="utf-8" src="https://map.qq.com/api/js?v=2.exp&key=H3SBZ-RAFHS-YYUO7-67LMB-W2FF5-O6BPR"></script>
//index.html中引入12//map.vue//首先写一个地图容器
<div id="container" style="width:100%;height:300px;"></div>123//methods中写一个 方法<template>
<div>
<div>
<van-search
@focus = 'mapfocus'
@blur = 'mapblur'
shape="round"
background="#EB901F"
v-model="value"
show-action
placeholder="请输入搜索关键词"
@search="onSearch"
>
<template #action>
<div style="color: white;" @click="onSearch">搜索</div>
</template>
</van-search>
</div>
<div id="container" style="width:100%;height:300px;"></div>
<div v-if='cityoff'>
<van-cell v-for="item in cities" :key="item.resultNum" :title="item.cityName" @click='choosecity(item)'/>
</div>
<div v-if='!cityoff'>
<van-cell v-for="item in poisarr" :key="item.id" :title="item.address" @click='choosepois(item)'/>
</div>
<van-dialog @confirm='confim' v-model="mapshow" title="会议地点" show-cancel-button :showConfirmButton='true' :showCancelButton='true'>
<div style="padding-top:10px;text-align: center;padding:10px 16px">
<span style="font-size: 14px;font-family: Microsoft YaHei;">{{address}}</span>
<span style="font-size: 12px;font-family: Microsoft YaHei;color: gray;">{{'('+addressleix+')'}}</span>
</div>
<van-field
style="margin-top: 10px;"
v-model="messageval"
label="住宿信息"
rows="1"
autosize
type="textarea"
placeholder="请输入住宿信息(必填)"
/>
<van-field
style="margin-top: 10px;"
v-model="memo"
rows="1"
autosize
label="备注"
type="textarea"
placeholder="备注信息(非必填)"
/>
</van-dialog>
</div></template><script>export default{
name:'news',
data() {
return {
longitude:0,//经度
latitude:0,//纬度
value:"TBD",
map:'',
myLatlng:'',
qqMap:"",
qqMapGeocoder:"",
qqMapMarker:"",
qqMapSearch:"",
cities:'',
poisarr:"",
cityoff:false,
mapshow :false,
messageval:'',
memo:'',
address:'',
addressleix:'',
centerlog:''
}
},
methods:{
mapfocus(){
},
mapblur(){
},
onSearch(){
this.qqMapSearch.setLocation("");
this.qqMapSearch.search(this.value);
},
choosecity(item){
console.log(item.cityName)
this.qqMapSearch.setLocation(item.cityName);
this.qqMapSearch.search(this.value);
},
choosepois(item){
console.log(item)
// this.mapshow = true
this.address = item.address + item.name
this.addressleix = item.category this.longitude = item.latLng.lng this.latitude = item.latLng.lat
console.log(this.latitude)
console.log(this.longitude)
this.setAndMarkPoi(this.latitude,this.longitude)
},
//确认
confim(){
if(this.messageval===''){
this.$noneToast('请填写住宿信息')
}else{
Dialog.confirm({
title: '提示',
message: '是否确认会议地点'
}).then(() => {
// this.submap( this.address, this.long,this.lat,this.messageval,this.memo)
}).catch(() => {
this.messageval = '',
this.memo = ''
});
}
},
//搜索
searchComplete(result) {
let that = this
console.log(result)
if(result.type === "CITY_LIST"){
that.cities = result.detail.cities
that.cityoff = true
}else{
that.poisarr = result.detail.pois
that.cityoff = false
}
},
//解析器
geocoderComplete(result){
console.log(result)
this.setAndMarkPoi(result.detail.location.lat, result.detail.location.lng)
},
setAndMarkPoi(lat,lng){
let centerval = new qq.maps.LatLng(lat, lng);
console.log(centerval)
this.map.setCenter(centerval);
this.qqMapMarker.setPosition(centerval);
},
clickMap(event){
this.longitude = parseFloat(event.latLng.getLng());
this.latitude = parseFloat(event.latLng.getLat())
this.myLatlng = new qq.maps.LatLng(this.latitude, this.longitude);
// console.log(this.myLatlng)
this.qqMapGeocoder.getAddress(this.myLatlng);
},
init() {
let that = this
// 获取地图
that.map = new qq.maps.Map(document.getElementById("container"), {
center: new qq.maps.LatLng(39.91485, 116.403765),
zoom: 16,
draggable: true,
scrollwheel: true,
disableDoubleClickZoom: true
});
//创建实例
that.qqMapGeocoder = new qq.maps.Geocoder();
that.qqMapMarker = new qq.maps.Marker({ map: that.map });
that.qqMapSearch = new qq.maps.SearchService();
that.qqMapGeocoder.setComplete(this.geocoderComplete);
that.qqMapSearch.setComplete(this.searchComplete);
//地图点击事件
qq.maps.event.addListener(that.map, "click", this.clickMap);
}
},
mounted() {
this.init();
}
}</script>微信搜索小程序黑猫之家看更多资讯哦
