php 百度地图点击获取经纬度

  1. 注册百度地图的用户,附上地址: http://lbsyun.baidu.com/


  2. 申请key,附上地址:http://lbsyun.baidu.com/index.php?title=jspopular3.0/guide/getkey

    1564107216(1).jpg

  3. 在html页头引入js

    <!-- 将百度地图API引入,设置好自己的key -->

    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=你申请的appkey"></script>

  4. 引入div和javascript

    <tr>

        <td class="col-xs-2">所在地:</td>

        <td class="col-xs-10">

            <div class="map_div" style=" position:relative; width:70%;">

                <div id='allmap' style="width:100%; height:387px;"></div>

            </div>

            <script type="text/javascript">

                var map = new BMap.Map("allmap");

                var geoc = new BMap.Geocoder();   //地址解析对象

                var markersArray = [];

                var geolocation = new BMap.Geolocation();

                var point = new BMap.Point(116.331398, 39.897445);

                map.centerAndZoom(point, 12); // 中心点

                geolocation.getCurrentPosition(function (r) {  //自动获取当前ip所在地

                    if (this.getStatus() == BMAP_STATUS_SUCCESS) {

                        var mk = new BMap.Marker(r.point);

                        map.addOverlay(mk);

                        map.panTo(r.point);

                        map.enableScrollWheelZoom(true);

                    }

                    else {

                        alert('failed' + this.getStatus());

                    }

                }, {enableHighAccuracy: true})

                map.addEventListener("click", showInfo);

                //地图上标注

                function addMarker(point) {

                    var marker = new BMap.Marker(point);

                    markersArray.push(marker);

                    //清除所有标注

                    map.clearOverlays();

                    //添加新标注

                    map.addOverlay(marker);

                }

                //点击地图事件处理

                function showInfo(e) {

                    document.getElementById('lng').value = e.point.lng;

                    document.getElementById('lat').value =  e.point.lat;

                    geoc.getLocation(e.point, function (rs) {

                        var addComp = rs.addressComponents;

                        var address = addComp.province + addComp.city + addComp.district + addComp.street + addComp.streetNumber;

                        document.getElementById('sever_add').value = address;

                        document.getElementById('area').value = addComp.district;

                    });

                    addMarker(e.point);

                }

            </script>

        </td>

    </tr>

    <tr>

        <td class="col-xs-2">经度:</td>

        <td class="col-xs-10">

            <input type="text" name="lng" id="lng" value="" readonly/>

        </td>

    </tr>

    <tr>

        <td class="col-xs-2">纬度:</td>

        <td class="col-xs-10">

            <input type="text" name="lat" id="lat" value="" readonly/>

        </td>

    </tr>

    <tr>

        <td class="col-xs-2">详细地址:</td>

        <td class="col-xs-10">

            <input type='text' style="width: 30%" value='' name='area' id="area" readonly>

            <input type='text' style="width: 30%" value='' name='address' id='sever_add' readonly>

        </td>

    </tr>

  5. 刷新页面,查看效果

    1564107565(1).jpg

  6. 点击地图切换坐标

    1564107588(1).jpg至此经纬度和详细地址已经获取到了,如果遇到问题,欢迎留言

发表评论