WEB页面接入百度地图，实现点击地图获取坐标和地址的功能

<%@ page language="java" pageEncoding="UTF-8" %>
<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">
        #allmap{width:100%;height:88%;}
    </style>
    <script type="text/javascript" src="${ctx}/js/jquery/jquery-1.8.3.js"></script>
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=${baidukey}"></script>
    <script type="text/javascript"
            src="${ctx}/static/bootstrap/js/bootstrap.min.js"></script>
    <link type="text/css" rel="stylesheet" href="${staticDomain}/static/lib/bootstrap/3.3.5/css/bootstrap.min.css"/>
</head>
<body>
    <br/>
    <table>
        <tr>
            <td>
                <input style="width:400px;" type="text" class="form-control" placeholder="请输入需要检索的地址" name="address" id="address" onkeyup="searchAddress();" value="${address}"/>
                <input type="hidden" id="addressLonglat" name="addressLonglat" value="${longlat}"/>
            </td>
            <td style="width: 10px;">

            </td>
            <td>
                <button type="button" class="btn btn-success btn-s-xs" onclick="setAddress();">设为公司地址
                </button>
            </td>
        </tr>

    </table>
    <div id="allmap"></div>
</body>
<script type="text/javascript">
    var map = new BMap.Map("allmap");
    map.centerAndZoom(new BMap.Point(116.404, 39.915), 11);
    var local = new BMap.LocalSearch(map, {
        renderOptions:{map: map}
    });
    function searchAddress() {
        var address = $("#address").val();
        if (address != '' && address != null && typeof(address) != "undefined") {
            local.search(address);
        }
    }
    //根据IP定位到城市
    function myFun(result){
        var longlat = '${longlat}';
        if (longlat != '' && longlat != null && typeof(longlat) != "undefined") {
            map.centerAndZoom(new BMap.Point(longlat.split(",")[0], longlat.split(",")[1]), 18);
            var marker = new BMap.Marker(new BMap.Point(longlat.split(",")[0], longlat.split(",")[1]));
            map.addOverlay(marker);
        }else {
            var cityName = result.name;
            map.setCenter(cityName);
        }
    }
    var myCity = new BMap.LocalCity();
    myCity.get(myFun);
    var geoc = new BMap.Geocoder();
    map.addEventListener("click", function(e){
        //清楚地图上的marker
        map.clearOverlays();
        //通过点击百度地图，可以获取到对应的point, 由point的lng、lat属性就可以获取对应的经度纬度
        var pt = e.point;
        var marker = new BMap.Marker(new BMap.Point(pt.lng, pt.lat));
        map.addOverlay(marker);
        geoc.getLocation(pt, function(rs){
            //addressComponents对象可以获取到详细的地址信息
            var addComp = rs.addressComponents;
            var site = addComp.province + addComp.city + addComp.district + addComp.street + addComp.streetNumber;
            $("#address").val(site);
            map.centerAndZoom(new BMap.Point(pt.lng, pt.lat), 18);
            //将对应的HTML元素设置值
            $("#addressLonglat").val(pt.lng+","+pt.lat);
        });
    });
    //关闭遮罩层，返回地址信息给父页面
    function setAddress(){
        parent.$("#address").val($("#address").val());
        parent.$("#addressLonglat").val($("#addressLonglat").val());
        var index = parent.layer.getFrameIndex(window.name);
        parent.layer.close(index);
    }
</script>
</html>
WEB页面接入百度地图，实现点击地图获取坐标和地址的功能

猜你喜欢
