最新消息:关注【太平洋学习网】微信公众号,可以获取全套资料,【全套Java基础27天】【JavaEE就业视频4个月】【Android就业视频4个月】

js调用百度地图并且定位用户地址_显示省市区街_经纬度

JS/CSS Anson 浏览 评论

以下代码是js调用百度地图并且获取您所在的地理位置经纬度的,效果如下:

Image 2.png

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Hello, World</title>
    <style type="text/css">
        html
        {
            height: 100%;
        }
        body
        {
            height: 50%;
            margin: 0px;
            padding: 0px;
        }
        #container
        {
            width:500px;
            height: 500px;
        }
    </style>
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=1.3"></script>
</head>
<body onload="enter()">
    <div id="container">
    </div>
    <input id="lng" type="hidden" runat="server" />
    <input id="lat" type="hidden" runat="server" />    
    <script type="text/javascript">     
        var province=0;
        var city=0;
        var district=0;
        var street=0;
        
        function enter() {
            if (navigator.geolocation) {  //调用导航器geolocation函数
                navigator.geolocation.getCurrentPosition(loand); //进入总显示函数loand,函数名由自己定
            } else {
                alert("您的浏览器不支持地理定位");//不支持
            }
        }
        function loand(position) {  //主函数
            var lat = position.coords.latitude;//y,纬度,通过上面的getCurrentPosition函数定位浏览器位置,从而获取地址
            var lon = position.coords.longitude;//x,经度
            //alert(lat);
            var map = new BMap.Map("container"); //初始化地图类
            var point = new BMap.Point(lon,lat); //这里设置刚开始的点所在处
            var gc = new BMap.Geocoder();  //初始化,Geocoder类
            gc.getLocation(point, function (rs) {   //getLocation函数用来解析地址信息,分别返回省市区街等
                var addComp = rs.addressComponents;
                province = addComp.province;//获取省份
                city = addComp.city;//获取城市
                district = addComp.district;//区
                street = addComp.street;//街

                var marker = new BMap.Marker(point); //地图事件类
                var opts = {
                    width: 25,     // 信息窗口宽度  
                    height: 120,     // 信息窗口高度  
                    title: "我所在的地点:<hr />"  // 信息窗口标题 ,这里声明下,可以在自己输出的信息里面嵌入html标签的
                }
                var infoWindow = new BMap.InfoWindow("省份:" + province + ";" + "城市:"
                    + city + ";<br /><br />" + "县/区:" + district + ";" + "街道:" + street + ".", opts);
                // 创建信息窗口对象,把信息在初始化 地图信息窗口类的同时写进去
                marker.enableDragging(); //启用拖拽事件
                marker.addEventListener("dragend", function (e) {
                    gc.getLocation(point, function (rs) {
                        //由于在getLocation函数返回信息之前,首先执行它下面的代码的,所以要把重新拖动后的代码放到它里面
                        var addComp = rs.addressComponents;
                        province = addComp.province;//获取省份
                        city = addComp.city;//获取城市
                        district = addComp.district;//区
                        street = addComp.street;//街
                        opts = {
                            width: 25,     // 信息窗口宽度  
                            height: 160,     // 信息窗口高度  
                            title: "现在的位置:<hr />"  // 信息窗口标题  
                        }
                        point = new BMap.Point(e.point.lng, e.point.lat); //标记新坐标(拖拽以后的坐标)
                        marker = new BMap.Marker(point);  //事件类

                        infoWindow = new BMap.InfoWindow("省份:" + province + ";" + "城市:"
                        + city + ";<br /><br />" + "县/区:" + district + ";" + "街道:" + street + ".<br />" +
                            "经度:" + e.point.lng + "<br />纬度:" + e.point.lat, opts);

                        map.openInfoWindow(infoWindow, point);
                        //这条函数openInfoWindow是输出信息函数,传入信息类和点坐标
                    })
                })

                map.addControl(new BMap.NavigationControl()); //左上角控件
                map.enableScrollWheelZoom(); //滚动放大
                map.enableKeyboard(); //键盘放大
                map.centerAndZoom(point, 13); //绘制地图
                map.addOverlay(marker); //标记地图
                map.openInfoWindow(infoWindow, map.getCenter());      // 打开信息窗口
            });
         }

    </script>
  </body>
</html>

这里只是一个简单的地址调用,使用的使用需要在页面引入百度地图的js,自己可以在本地debugger查看页面流程就知道具体怎么根据自己的业务需求去进行修改了

来源网站:太平洋学习网,转载请注明出处:http://www.tpyyes.com/a/js_css/2017/0626/121.html

    与本文相关的文章

    发表我的评论
    取消评论

    表情

    您的回复是我们的动力!

    • 昵称 (必填)

    网友最新评论