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中引入

//map.vue
//首先写一个地图容器
 <div id="container" style="width:100%;height:300px;"></div>

//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>