效果

搞了一个基于高德地图Web服务API,关键字搜索服务的东西,先来效果图:

搜索不到内容时:

实现

HTML代码

前端部分代码,样式就省略了:

城市:<input type="text" id="searchPlaceCity" placeholder="输入城市">
关键字:<input type="text" id="searchPlaceInfo" placeholder="请输入关键字进行搜索...">
<a href="javascript:searchPlace()">搜索</a>

JS代码

<script>
/* 高德地图api获取数据 */
function searchPlace()
{
    var ajaxUrl="{:U('Map/searchPlace')}";
    var keyword= $("#searchPlaceInfo").val(); //获取输入的关键字
    var city = $("#searchPlaceCity").val(); //获取输入的城市

    $.post(ajaxUrl,{'keyword':keyword,'city':city},function(data){
        $('#searchResult').html('
            <table id="searchTable" >
            <tr id="tableTitle">
            <td>名称</td>
            <td>省份/直辖市</td>
            <td>城市/区</td>
            <td>区划/县</td>
            <td>详细地址</td>
            <td>电话</td>
            <td>坐标</td>
            </tr>
            </table>
        ');

        if (jQuery.isArray(data))
        {
            if (data.length == 0){
                $('#searchTable').append('
                    <tr>
                        <td colspan="7">搜索不到内容,请尝试其它关键字!</td>
                    </tr>'
                );
            }else{
                $.each(data,function(key,value){
                    $('#searchTable').append('
                        <tr>
                        <td>'+value.name+'</td>
                        <td>'+value.pname+'</td>
                        <td>'+value.cityname+'</td>
                        <td>'+value.adname+'</td>
                        <td>'+value.address+'</td>
                        <td>'+value.tel+'</td>
                        <td>'+value.location+'</td>
                        </tr>
                    ');
                });
            }
        } else {
            $('#searchTable').append('
                <tr>
                <td colspan="7">'+data+'</td>
                </tr>
            ');
        }
    });
}
</script>

PHP代码:

后台php代码,用的Thinkphp3.2框架:

<?php 
namespace Home\Controller;

use Think\Controller; 

class MapController extends Controller
{
    public function searchPlace() {
        $keyword = $_REQUEST['keyword'];//获取keyword 
        $city = $_REQUEST['city']; //获取城市 
        $url = "http://restapi.amap.com/v3/place/text"; 
        $key = "2f18a06**********************";//高德开发者帐号给的key 
        $request = $url.'?key='.$key.'&keywords='.$keyword.'&city='.$city; 

        /* 发送请求 */
        $get = file_get_contents($request);
        $result = json_decode($get);
        $status = $result->status;//请求状态
        $message = $result->info; //请求返回信息

        if ($status == 1) { //请求成功
            $pois = $result->pois; //地理位置信息
            $this -> ajaxReturn($pois);
        } else { //请求失败
            $message = "搜索失败,请尝试其它关键字!";
            $this -> ajaxReturn($message);
        }
    }
}