vue + 天地图搜索api+样式

最终实现的效果图

html部分

理论上应该用天地图js4.0api，但我用的时候总是报MIME错误，所以我就用的3.0

<script src="http://api.tianditu.gov.cn/api?v=3.0&tk=天地图的key" type="text/javascript"></script>
<div class="u-width-61 siteItem">
    <div id="map"></div>
    <div class="select_class">
        <el-input clearable v-model="keyword" placeholder="请输入关键词" @keyup.enter.native="searchR" @clear="searchR">
            <el-button slot="append" icon="el-icon-search" @click="searchR"></el-button>
        </el-input>
        <div class="my-dropdown1" v-show="visible">
            <div class="list-item1" v-for="item in cityOptions" :key="item.value" @click="searchR(item)">
                <span style="color: #409EFF;margin-right: 10px;">{{ item.label }}</span>
                <span>({{ item.count }})</span>
            </div>
            <div class="list-item2" v-for="item in addressOptions" :key="item.value" @click="searchR(item)">
                <i class="el-icon-map-location"></i>
                <div>
                    <span>{{ item.label }}</span>
                    <p>{{ item.address }}</p>
                </div>
            </div>
        </div>
    </div>
</div>

css部分

.siteItem{
	height:600px;
    border: 1px solid #ebeef5;
    border-radius: 6px;
    position: relative;
    #map{
        width: 100%;
        height: 100%;
    }
}
.select_class{
    position: absolute;
    top: 6px;
    left: 6px;
    z-index: 400;
    .my-dropdown1 {
        max-height: 400px;
        overflow: auto;
        border-radius: 4px;
        border: 1px solid #dcdfe6;
        background-color: #fff;
    }
    .list-item1{
        cursor: pointer;
        margin-bottom: 4px;
        padding: 10px 15px;
    }
    .list-item2{
        display: flex;
        border-bottom:1px solid #eaeaea;
        padding: 15px;
        margin-bottom: 15px;
        p{margin: 6px 0 0;color: #909399;font-size: 12px;}
        i{font-size: 24px;color: #409EFF;margin-right: 6px;}
        background-color:#fff;
        transition: background-color .3s;
        cursor: pointer;
        &:hover{
            i{color: #f00;}
            background-color:#fbfbfb;
        }
    }
}

js部分

searchR(item){
    if(!this.keyword){
        this.cityOptions = [];
        this.addressOptions = [];
        return;
    }
    let params = {
keyWord:this.keyword,"level":3,"mapBound":"47.95898437500239,7.759699085623154,162.04101562500443,56.875842480765385","queryType":1,"start":0,"count":10
    };
    if(item.value) params['specify'] = item.value;
    HttpR('https://api.tianditu.gov.cn/v2/search?postStr='+JSON.stringify(params)+'&type=query&tk='+tdtMapKey).then(r => {
        let data = r.data;
        this.cityOptions = [];
        this.addressOptions = [];
        this.visible = true;
        if(data.resultType == 2){
            this.addressOptions = [];
            this.cityOptions = data.statistics.allAdmins.map(v => ({ label:v.adminName,value:v.adminCode,count:v.count,lonlat:v.lonlat,type:2,isleaf:v.isleaf }));
        }else if(data.resultType == 1){
            this.cityOptions = [];
            this.addressOptions = data.pois.map(v => ({ label:v.name,value:v.nid,address:v.address,lonlat:v.lonlat,type:1 }));
        }else if(data.resultType == 3){
            let [ lng, lat ] = data.area.lonlat.split(',');
            this.map.setView([ lat, lng ],10)
        }else{
            this.visible = false;
        }
    })
},