百度地图Ip定位

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@include file="/commons/taglibs.jsp"%>
<!DOCTYPE html>
<html>
<head>
    <title>百度地图定位</title>
    <style type="text/css">
    </style>
    <script src="${root}/resources/js/jquery.min.js" type="text/javascript"></script>
    <script src="${root}/resources/js/sockjs-0.3.min.js" type="text/javascript"></script>
    <script src="${root}/resources/js/json.js" type="text/javascript"></script>
</head>
<body>
<h3 class="title" id="location-s">获取位置中.....</h3>
<input  type="text" id="province-l" />
<input type="text" id="city-l" />
<input type="text" id="district-l" />
<input type="text" id="street-n-l" />
<section id="allmap">
    <div style="position:absolute;width:48px;height:48px;top:50%;left:50%;margin:-24px 0 0 -24px;">
        <img data-name="location-loading1" src="${root }/resources/images/loading-1.png" style="width:48px;height:48px;">
    </div>
</section>

</body>
<script src="https://api.map.baidu.com/api?ak=KcowYqyt2PUBGDWRL92Qovfj&v=2.0"></script>
<script>

    $(function(){
        doLocationByIp();
    })

    /**
     * IP定位API
     */
    function doLocationByIp(){
        $.ajax({
            type: 'GET',
            url : "https://api.map.baidu.com/location/ip?ak=nni9lnfMwWNpheHIucBkMpHB&ip=&coor=bd09ll",
            async: false,
            dataType: "jsonp",
            beforeSend:function(){
                //showLoading();
            },
            success: function(o){
                if(o.status==0){
                    showMap(o.content.point.x,o.content.point.y);
                }
            }
        });
    }

    function showMap(lng,lat){
        var point = new BMap.Point(lng,lat); //获得gps坐标,使用百度地图需要转换一下

        var map = new BMap.Map("allmap");
        map.centerAndZoom(point, 18);
        map.addControl(new BMap.NavigationControl());
        map.addControl(new BMap.ScaleControl());
        map.addControl(new BMap.OverviewMapControl());
        var marker = new BMap.Marker(point);        // 创建标注
        map.addOverlay(marker);

        var gc = new BMap.Geocoder();
        map.addEventListener("click", function(e){
            setLocation(gc,e.point);
            var mkr = new BMap.Marker(e.point, {icon: myIcon});
            map.addOverlay(mkr);
        });

        setLocation(gc,point);
    }

    function setLocation(gc,point){

        gc.getLocation(point, function(rs){
            var addComp = rs.addressComponents;
            $('#province-l').val(addComp.province);
            $('#city-l').val(addComp.city);
            $('#district-l').val(addComp.district);
            $('#street-n-l').val(addComp.street + " " + addComp.streetNumber);
            $('#location-s').text(rs.address );
        });
    }
</script>
</html>

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值