使用百度地图实现拖动定位、搜索定位

该代码主要的技术点:

==>获取百度地图key,也就是ak;

==>拖动定位,经纬度、详细地址

==>搜索定位,根据所搜索得地址进行地图地位,精确定位。

具体的实现代码:

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <title></title>

    <link href="../bootstrap/css/bootstrap.min.css" rel="stylesheet" />

    <script type="text/javascript" src="../javascript/jquery-1.9.1.min.js"></script>

    <script type="text/javascript" src="../bootstrap/js/bootstrap.min.js"></script>

    <script type="text/javascript" src="../javascript/loadClosed.js"></script>

 

    <script type="text/javascript" src="JSDituJs/baiduditu.js"></script>

    <script type="text/javascript" src="http://api.map.baidu.com/api?v=1.3"></script>

    <style type="text/css">

        * {

            font-family: "微软雅黑";

        }

 

        #where, #lonlat, #lonlat2 {

            width: 300px;

            height: 30px;

            font-size: 24px;

            color: blue;

        }

 

        #but {

            width: 100px;

            height: 36px;

            font-size: 20px;

        }

    </style>

</head>

 

<body>

        <fieldset style="margin-top: 20px;">

            <legend style="font-size: 16px; margin-left: 20px;">选择站点经纬度坐标</legend>

            <div style="margin-left: 100px; margin-right: 100px; text-align: center; margin-bottom: 20px;">

                要查询的地址:<input id="text_" type="text" value="青岛" style="margin-right: 100px;" />

                查询结果(经纬度):<input id="result_" type="text" />

                <input type="button" value="查询" onclick="searchByStationName();" />

            </div>

            <div style="margin: auto; width: 1000px; height: 600px; border: 2px solid gray; margin-bottom: 50px;" id="container"></div>

        </fieldset>

</body>

</html>

 

<script type="text/javascript">

    var longitude = 120.391523;

    var latitude = 36.067794;

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

    map.setDefaultCursor("crosshair");

    map.enableScrollWheelZoom();

    var point = new BMap.Point(longitude, latitude);

    map.centerAndZoom(point, 13);

    var gc = new BMap.Geocoder();

    map.addControl(new BMap.NavigationControl());

    map.addControl(new BMap.OverviewMapControl());

    //map.addControl(new BMap.OverviewMapControl({ isOpen: true, anchor: BMAP_ANCHOR_BOTTOM_RIGHT }));   //右下角,打开

    map.addControl(new BMap.ScaleControl());

    map.addControl(new BMap.MapTypeControl());

    map.addControl(new BMap.CopyrightControl());

 

    var marker = new BMap.Marker(point);

    map.addOverlay(marker);

 

    marker.addEventListener("click",

    function (e) {

        document.getElementById("lonlat").value = e.point.lng;

        document.getElementById("lonlat2").value = e.point.lat;

    });

    marker.enableDragging();

    marker.addEventListener("dragend",

    function (e) {

        gc.getLocation(e.point,

        function (rs) {

            showLocationInfo(e.point, rs);

        });

    });

    function showLocationInfo(pt, rs) {

        var opts = {

            width: 250,

            height: 150,

            title: "当前位置"

        };

        var addComp = rs.addressComponents;

        var addr = "当前位置:" + addComp.province + ", " + addComp.city + ", " + addComp.district + ", " + addComp.street + ", " + addComp.streetNumber + "<br/>";

        addr += "纬度: " + pt.lat + ", " + "经度:" + pt.lng;

 

        $("#jingdu").val(pt.lng);

        $("#weidu").val(pt.lat);

        $("#xiangxidiqu").val(addComp.province + addComp.city + addComp.district);

 

        var infoWindow = new BMap.InfoWindow(addr, opts);

        marker.openInfoWindow(infoWindow);

    }

    map.addEventListener("click",

    function (e) {

        document.getElementById("lonlat").value = e.point.lng;

        document.getElementById("lonlat2").value = e.point.lat;

    });

    var traffic = new BMap.TrafficLayer();

    map.addTileLayer(traffic);

    function iploac(result) {

        var cityName = result.name;

    }

    var myCity = new BMap.LocalCity();

    myCity.get(iploac);

    function sear(result) {

        var local = new BMap.LocalSearch(map, {

            renderOptions: {

                map: map

            }

        });

        local.search(result);

    }

 

    var localSearch = new BMap.LocalSearch(map);

    localSearch.enableAutoViewport(); //允许自动调节窗体大小

 

    function searchByStationName() {

        map.clearOverlays();//清空原来的标注

        var keyword = document.getElementById("text_").value;

        localSearch.setSearchCompleteCallback(function (searchResult) {

            var poi = searchResult.getPoi(0);

            document.getElementById("result_").value = poi.point.lng + "," + poi.point.lat;

            map.centerAndZoom(poi.point, 13);

            var marker11 = new BMap.Marker(new BMap.Point(poi.point.lng, poi.point.lat));  // 创建标注,为要查询的地方对应的经纬度

            map.addOverlay(marker11);

 

            marker11.addEventListener("click",

             function (e) {

                document.getElementById("lonlat").value = e.point.lng;

                document.getElementById("lonlat2").value = e.point.lat;

            });

            marker11.enableDragging();

            marker11.addEventListener("dragend",

            function (e) {

                gc.getLocation(e.point,

                function (rs) {

                    showLocationInfo(e.point, rs);

                });

            });

            function showLocationInfo(pt, rs) {

                var opts = {

                    width: 250,

                    height: 150,

                    title: "当前位置"

                };

                   var content = document.getElementById("text_").value + "<br/><br/>经度:" + poi.point.lng + "<br/>纬度:" + poi.point.lat;

                var infoWindow = new BMap.InfoWindow("<p style='font-size:14px;'>" + content + "</p>");

                marker11.addEventListener("click", function () { this.openInfoWindow(infoWindow); });

                marker11.enableDragging();

                $("#jingdu").val(poi.point.lng);

                $("#weidu").val(poi.point.lat);

                $("#xiangxidiqu").val($("#text_").val());

              }

 

                         });

            localSearch.search(keyword);

        }

</script>

阅读更多
版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/memgxingfeixiang/article/details/76286139
上一篇<asp:CheckBoxList>的用法
下一篇<a>标签与<input>标签遇到过的问题(两者在jquery中的区别)
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页

关闭
关闭
关闭