1. 程式人生 > >《TP5.0學習筆記---百度地圖封裝》

《TP5.0學習筆記---百度地圖封裝》

我們常常需要根據地址來獲取經緯度,根據經緯度來調取百度地圖等。
一、 根據地址獲取經緯度類的封裝
1, 獲取第三方介面
2, 編寫map類
3, 測試
1, 獲取第三方介面
(1)進入http://lbsyun.baidu.com -> api控制檯 ->設定AK
(2)找到geocoding api
進入之後需要註冊使用者,首先註冊,然後找到api控制檯
這裡寫圖片描述
進api控制檯之後,點選“建立應用” 會看家下邊這個頁面
這裡寫圖片描述
然後填寫“應用名稱” 啟用的服務,全部啟用 ip白名單填寫你本機的ip,然後點選“提交”就OK了,它會跳轉到你的應用列表
下邊就是找根據地址獲取經緯度的介面,在“開發”=>”Web服務API”
這裡寫圖片描述


點選進去之後,在左邊有一個“geocoding API,點選一下
這裡寫圖片描述
2, 封裝map類庫”
那麼下邊我們就開始封裝我們的根據地址獲取經緯度的類庫
建議將這個類庫檔案放在你的TP5框架的extend目錄下,因為它是一個擴充套件目錄。我這裡就叫Map.php

Map.php程式碼

/**
*百度地圖相關業務封裝
*/

class Map{
 /*
 * 根據地址獲取經緯度
 */
    public static function getLngLat($address){
        //去剛才那個geocoding API頁面將第三方介面的連結複製過來
//http://api.map.baidu.com/geocoder/v2/?
//callback=renderOption&output=json&address=北京市海淀區上地10街10號&city=北京市&ak=您的ak //下邊我們就開始拼裝介面後邊的那些引數 /* 這裡可以做一個優化,我們可以把這些配置,直接放到配置檔案當中去,而TP5給我們提供的方式是,在application 下邊有一個config.php,可以在這裡寫我們的相關配置,但是在這裡寫會比較繁瑣,它不利於我們去做擴充套件以及維護 ,所以就像將其抽離出來,比如說,跟地圖相關的配置,我就放在地圖相關的配置檔案當中去。TP5中又為我們提供 了一個小技巧,就是可以在application目錄下建立一個extra目錄,然後在裡邊建立一個map.php(存地圖相關配置) 那麼下面我們獲取AK的方式就變成config('map.ak')(config是獲取配置的函式,map是檔名,ak是陣列索引名) */
if(!$address){ return '';//如果沒有傳遞引數,返回為空 } $data = [ 'address' => $address, 'ak' => config('map.ak'),//這就是剛剛申請的AK 'output' => 'json', ]; //上邊我們是將引數先都轉換成了陣列的形式,下邊就是將其轉換成上邊連結的那種形式 $s = http_build_query($data);//這就可以將其轉換成:callback=renderOption&output=json&address=北京市海淀區上地10街10號&city=北京市&ak=您的ak這種形式 //然後就是拼裝完整的url $url = config('map.baidu_map_url').config('map.geocoder').'?'.$s; //那麼現在我們就是獲取這個url中的內容(php中有以下幾種形式獲取) //1,file_get_contents($url); //2,curl方式來獲取(我們php中的curl方式需要封裝一個方法,那麼我將這個方法放在common.php中) $result = doCurl($url); //print_r($result);exit();//這個是測試一下(我們需要在controller/index.php中來呼叫它) return $result; //注意:如果你要測試一下,將“return $result”這行註釋掉,將它的上一行註釋去掉即可 } }

map.php程式碼

<?php
/*
地圖相關配置檔案
*/
return [
    'ak'             => 'LAynLOG9Aozh5iiNzeFbhjkgaxudGmri',
    'baidu_map_url'  => 'http://api.map.baidu.com/',
    'geocoder'       => 'geocoder/v2/',
];

common.php程式碼

function doCurl($url, $type=0, $data=[]){
    //初始化curl
    $ch = curl_init(); //初始化
    //設定選項
    curl_setopt($ch, CURLOPT_URL, $url);
    curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);//這個代表如果成功,只返回結果,不把內容輸出來
    curl_setopt($ch, CURLOPT_HEADER, 0);

    if($type == 1){
        //post
        curl_setopt($ch, CURLOPT_POST, 1);
        curl_setopt($ch, CURLOPT_POSTFIELDS, $data);
    }

    //執行並獲取內容
    $output = curl_exec($ch);
    //釋放curl控制代碼
    curl_close($ch);

    return $output;
}

controller/index.php程式碼

<?php
namespace app\admin\controller;
use think\Controller;
class Index extends Controller
{
    public function map(){
        \Map::getLngLat('北京昌平沙河地鐵');exit;//用來測試的,測試結果是一串Json資料,
        //返回的Json資料中的每個引數的含義都可以在geocoding API裡邊查詢

    }
}

3,測試結果截圖如下:
這裡寫圖片描述
二、 根據經緯度/地址調取百度地圖
1, 獲取第三方介面
2, 編寫staticimage方法
3, 測試

首先我們要還是進入WebAPI頁面,然後點開“靜態圖API”
這裡寫圖片描述
小夥伴們可以將這個頁面仔細閱讀一下,先有一定的瞭解,呼叫起來會比較清晰熟練
1, 獲取第三方介面
在該頁面中找到“服務地址”並將其複製
2, 編寫staticimage方法
該方法是寫在Map.php中的(也就是說,將下邊這個staticimage函式,放在Map.php中)

在extend/Map.php中新增西邊這個函式

/*
    *根據經緯度/地址調取百度地圖
    */
    //http://api.map.baidu.com/staticimage/v2
    public static function staticimage($center){
        if(!$center){
            return '';//沒有傳遞引數的時候,返回空
        }
        $data = [
            'ak'      => config('map.ak'),
            'width'   => config('map.width'),
            'height'  => config('map.height'),
            'center'  => $center,
            'markers' => $center,//這個引數的含義在  靜態圖API的頁面中找
        ];
        $s = http_build_query($data);
        $url = config('map.baidu_map_url').config('map.staticimage').'?'.$s;
        $result = doCurl($url);
        return $result;
    /*
    注意:在靜態圖API那個頁面中有如何在模板中展示地圖的程式碼
    <img style="margin:20px" width="280" height="140" src="" />只需要將這個src的地址修改一下
    那麼現在我們在controller/index.php中測試一下
    */
    }

在extra/map.php中再新增下邊三個引數

'width'          => 400,
'height'         => 300,
'staticimage' => 'staticimage/v2',

在controller/index.php中新增一個test()函式

public function test(){
        return \Map::staticimage('北京昌平沙河地鐵');
        //那麼現在我們在任意一個模板中呼叫一下
}

然後就是在你需要用到百度地圖的模板中加入下邊這行程式碼

<img style="margin:20px" width="280" height="140" src="填寫你的url地址" />

我這裡是<img style="margin:20px" width="280" height="140" src="{:url('index/test')}" />
3, 測試結果
這裡寫圖片描述
到這裡我們TP5.0封裝百度地圖就完成了
**大家如果想擴充套件功能,都可以在“靜態圖API”頁面中呼叫不同的引數來實現更多的功能
希望這篇部落格對大家有所幫助!!!**