vue中使用qqmap

和黑猫之家聊聊?

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>
更多精彩内容,请关注黑猫之家

来黑猫之家看看呗

发表评论:

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。

Copyright © 2015-2019 | 黑猫吧(www.heimaoba.cn) | 赣ICP备18005425号-1 |