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

原创 2017年07月29日 08:36:14

该代码主要的技术点:

==>获取百度地图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>

版权声明:本文为博主原创文章,未经博主允许不得转载。

相关文章推荐

百度地图拖动定位

(1)首先关闭定位图层,否则影响地图拖动    mBaiduMap.setMyLocationEnabled(false);//关键点,必须设置  (2)设置marker    BitmapDescr...
  • myrssq
  • myrssq
  • 2016年07月07日 13:52
  • 2147

百度地图 点击和标注拖拽后的经纬度

http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  Hello, World        html{heigh...
  • lybwwp
  • lybwwp
  • 2012年10月30日 11:18
  • 10879

百度地图 定位,地图中心坐标,拖动后获取地图中心点坐标,poi搜索

功能相关 1.缩放一到多个坐标到屏幕内2.拖动后获取屏幕中心点

仿百度外卖3_7_1百度地图拖动定位,显示附近地址poi提示搜索

前页:这里用到的sdk包就不介绍了在百度api里面去下载就好了,然后就正式看对mapview的使用以及拖动地图控件时候对地图中间的红色箭头的处理。 1.先看下当前页面的布局文件:R.layout...

百度地图:普通覆盖物,以及多边形覆盖物,及他们的描述信息的添加,修改,删除,查看功能,还有多边形根据名称查询功能;

版权所有,未经本人允许,禁止转载! 这个界面功能是,普通覆盖物,以及多边形覆盖物,及他们的描述信息的添加,修改,删除,查看功能,还有多边形根据名称查询功能; 由于这个界面的数据是存在数据库,还有后...

jquery设置css样式、style属性 示例

css虽然会在一开始我们就定义好了,但是有很多场景需要我们动态设置css,或者单独修改一个dom控件的style属性,今天分享一下我总结的jquery设置css及style样式的方法。 一、CSS ...
  • luyaran
  • luyaran
  • 2016年11月14日 15:52
  • 12673

百度地图最新版本sdk使用系列(七)-实现定位,poi搜索和导航

定位和搜索的核心类请看该系列的前面几篇文章,导航的核心类是BaiduNaviManager,该类的核心方法包括: initEngine初始化导航引擎 createNMapView创建NMapView ...

Android使用百度地图API实现定位app

  • 2016年05月29日 20:32
  • 17.79MB
  • 下载
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:使用百度地图实现拖动定位、搜索定位
举报原因:
原因补充:

(最多只允许输入30个字)