百度地图--搜索服务(Web)LocalSearch

百度api js参考网址:http://lbsyun.baidu.com/cms/jsapi/class/jsapi_reference.html#a7b0

加载 API js文件

<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=AK">script>

AK 为自己百度密钥

页面效果代码:

<div id="map_div" style="display:none;width:100%;height:100%;position:fixed;left:0;top:0;background:#fff;z-index:9999999">
    <div style="padding:10px">
        <div style="width:100%;">
            "text" onkeyup="search_place(this)" style="width:100%;padding:7px 5px 7px 30px;border:none;border-radius:15px;background:#f1f1f1">
        div>

    div>
    <div style="width:100%" id="addr_result">div>
div>

js:

//地址搜索
function search_place(a){
    var addr = $(a).val();
    show_addr(addr);
}
//显示地图搜索模板
function show_addr_rearch(){
    $("#map_div").slideDown();
}
//地图搜索
function show_addr(addr){
    var addr_res = $("#addr_result");
    addr_res.html("");
    var ls = new BMap.LocalSearch("成都市");
    ls.search(addr);
    ls.setSearchCompleteCallback(function(rs){
        if(ls.getStatus() == BMAP_STATUS_SUCCESS){

            for(var i= 0 ; i < rs.getCurrentNumPois();i++){
                var poi = rs.getPoi(i);
                var div = "
+poi.title+"','"+poi.address+"','"+poi.point.lng+"','"+poi.point.lat+"')\">"; div += "
"+poi.title+"
"
div += "
"+poi.address+"
"
div += "
"
; addr_res.append(div); } } }); }

ps:
1. 创建搜索实例

var ls = new BMap.LocalSearch("成都市");

百度地图--搜索服务(Web)LocalSearch_第1张图片

  1. 通过实例搜索
ls.search(addr);

百度地图--搜索服务(Web)LocalSearch_第2张图片

3.搜索结束回调

ls.setSearchCompleteCallback(function(rs){
        if(ls.getStatus() == BMAP_STATUS_SUCCESS){
        }
    });

这里写图片描述

ps:
用到的类:
LocalResult:
百度地图--搜索服务(Web)LocalSearch_第3张图片

LocalResultPoi: var poi = rs.getPoi(i);
百度地图--搜索服务(Web)LocalSearch_第4张图片

你可能感兴趣的:(前端,百度地图,搜索服务)