百度地图POI兴趣点查询

比较简单，直接调用百度地图API

创建一个查询POI的方法：

        searchPOI(){
            //搜索框
            var local = new BMapGL.LocalSearch(map, {
                renderOptions:{map: map}
            });
            local.search(this.$refs.place.value);
        },

创建一个清除POI点的方法：

        clearMarker(){
            map.clearOverlays();
            this.$refs.place.value="";
        },

添加一个div：

    </div>
        <div class="info" id="r-result">景点查询:<input type="text" id="suggestId" size="20" value="景点" ref="place" style="width:150px;" /><button @click="searchPOI">查询</button><button @click="clearMarker">清除标记</button></div>
    </div>

css

#result{
        padding: 7px 10px;
        position: fixed;
        top: 15rem;
        left: 20px;
        width: 450px;
        background: #fff;
        box-shadow: 0 2px 6px 0 rgba(27, 142, 236, 0.5);
        border-radius: 7px;
        z-index: 99;
    }
    #result input{
        width:130px;
        margin-right:10px;
        height:25px;
        border: 1px solid rgba(27, 142, 236, 0.5);
        border-radius: 5px;
    }
    #result button{
        border: 1px solid rgba(27, 142, 236, 0.5);
        border-radius: 5px;
        background: rgba(27, 142, 236, 0.5);
        color: #fff
    }
    .info {
        z-index: 999;
        width: auto;
        min-width: 22rem;
        padding: .75rem 1.25rem;
        margin-left: 1.25rem;
        position: fixed;
        top: 10rem;
        background-color: #fff;
        border-radius: .25rem;
        font-size: 14px;
        color: #666;
        box-shadow: 0 2px 6px 0 rgba(27, 142, 236, 0.5);
    }
    #r-result button{
        border: 1px solid rgba(27, 142, 236, 0.5);
        border-radius: 5px;
        background: rgba(27, 142, 236, 0.5);
        color: #fff
    }

效果