使用百度地图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]