使用百度地圖API獲取手動定位位置信息實例講解

時間 2020-01-20

原文原文鏈接

需求

後臺新增/編輯活動項目時，用戶能夠本身經過地圖插件選擇位置（手動定位），選擇後，系統可以得到當前位置的地址信息以及座標信息，以方便後續程序的處理。javascript

代碼

不囉嗦，直接看代碼：php

表單頁面（截選）：css

<!-- 地址、座標start -->
<div class="form-group has-feedback">
    <label class="col-md-3 control-label">地址</label>
    <div class="col-md-4">
        <input id="address" type="text" class="form-control" name="address" value="" placeholder="地址">
    </div>
    <div class="col-md-5"  style="margin-left:-20px;">
        <a id="getgps" class="btn btn-primary">點擊選擇</a>
    </div>
</div>
<div class="form-group">
    <label class="col-md-3 control-label">經緯度</label>
    <div class="col-md-9 form-inline">
        <input type="text" class="form-control" id="longitude" name="longitude" value="" placeholder="經度" size="10">
        <input type="text" placeholder="經度" value="" id="latitude" name="latitude" class="form-control" size="10">
    </div>
</div>
<!-- 地址、座標end -->

<!-- 彈出層操做start -->
<script>
    $(function(){
        // 拾取座標
        $('#getgps').on('click',function(){
            //iframe層
            layer.open({
                index:'oif',
                type: 2,
                title: '拾取座標',
                shadeClose: true,
                shade: 0.8,
                area: ['60%', '70%'],
                content: "{:url('admin/baidumap/getgps')}" //iframe的url
            });
        });
    });

    function close_f() {
        layer.closeAll();
    }
</script>
<!-- 彈出層操做end -->

地圖彈出層頁面：html

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <style type="text/css">
        body, html,#allmap {width: 100%;height: 100%;overflow: hidden;margin:0;font-family:"微軟雅黑";}
    </style>
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=my_ak"></script>
    <title>單擊獲取點擊的經緯度</title>
</head>
<body>
<div id="allmap"></div>
</body>
</html>
<script type="text/javascript" src="/static/admin/js/jquery.min.js"></script>
<script type="text/javascript">
    // 百度地圖API功能
    var map = new BMap.Map("allmap"); // 建立對象
    map.centerAndZoom("合肥",12); // 初始文職
    map.enableScrollWheelZoom(true); // 容許鼠標滾輪放大縮小
    //單擊獲取點擊的經緯度
    map.addEventListener("click",function(e){
        window.parent.$('#longitude').val(e.point.lng);
        window.parent.$('#latitude').val(e.point.lat);
        var get_address_url = " http://api.map.baidu.com/geocoder/v2/?output=json&ak=D609d0ffb67e0b155cdb15681cdc85ab&location="+e.point.lat+","+e.point.lng+"";
        $.get("{:url('admin/baidumap/getpagecontent')}",{link:get_address_url},function(data){
            data = JSON.parse(data);
            var location_url = data.result.formatted_address;
            var isw = window.parent.$('#address').val(location_url);
            if(isw){
                window.parent.close_f();
            }
        });
    });
</script>

PHP獲取頁面結果方法：java

/**
     * 根據網址獲取頁面內容
     *
     * @param $link
     *
     * @return string
     */
    public function getPageContent($link)
    {
        $link = trim($link);
        $content = file_get_contents($link);
        return $content;
    }

總結

流程上能夠分爲：點擊按鈕彈出子窗口頁面 -> 手動鼠標選擇頁面位置 -> 父頁面地址和座標分別獲取到值 -> 子頁面關閉。jquery

技術上主要以百度地圖API爲核心，layer彈出層和PHP百度api中結果配合，js父子頁面傳值引導達成目標。git

由於很簡單，其餘的也很少說了，有興趣的能夠申請個ak碼試試，百度官方也有不少示例。json

地址

JavaScript API 類參考:[http://developer.baidu.com/map/reference/index.php][1]

JavaScript API demo演示：[http://developer.baidu.com/map/jsdemo.htm#a1_2][2]

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。