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

原创 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
  • 2680

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

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

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

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

android 百度地图 marker固定在屏幕中心,动态获取可移动地图的中心坐标

上篇解决了marker可以拖拽移动获取坐标,但是又由于项目需求的原因,让marker固定屏幕中心,然后通过滑动地图获取坐标。 更换需求才不到一天,不说这伤心的事了,马上上代码截图: 第...
  • Squirrels_run
  • Squirrels_run
  • 2017年01月19日 11:20
  • 3982

高仿百度外卖地址添加功能(百度地图拖动定位,poi搜索,设置配送范围)

今天给大家带来一个百度地图的综合案例,主要是仿百度外卖地址添加功能,主要涉及到的功能有以下几点: 百度地图状态改变监听,用户拖动地图可以实时展示周围的poi信息 打开页面定位用户的位置 poi搜索,根...
  • jaryjun
  • jaryjun
  • 2017年03月01日 11:48
  • 820

js实现仿百度地图拖动

最近在项目中需要用到仿百度地图拖动特效,于是花点事件研究了一下,发现通过scrollLeft和scrollTop方法改变滑块的位置可以实现类似效果,下面把研究结果拿出来分享一下。 overf...
  • ttx_laughing
  • ttx_laughing
  • 2016年12月28日 14:05
  • 1450

使用高德地图Javascript API实现搜索的自动完成

概述刚好有一个项目,需要定位,并且需要可以手动设置地址,为了提高用户体验,需要加入搜索框的自动完成功能。第一步 引用api脚本第二步 布局要实现自动完成的文本框...
  • sbt0198
  • sbt0198
  • 2016年09月02日 13:01
  • 2798

手把手教你高德基础地图+定位+设置Marker实现

一、基础地图部分 1.获取APPKey 在高德地图注册开发者账号,然后创建应用,使用SHA1和PackageName得到Key 2.下载SDK 下载地址:http://lbs.amap.c...
  • pan960821
  • pan960821
  • 2016年03月17日 13:38
  • 55500

H5 drag&drop 写一个拖动定位的demo

概述 实现思路 运用h5新的apidragdrop具体属性阅读这里 具体实现 踩坑 兼容性 新增拖动只改变文本的值 新增依次移动效果 总结概述完成的效果是,父元素内的单个元素item可以通过拖拽定位。...
  • realDE
  • realDE
  • 2017年07月28日 23:20
  • 743

设置marker拖拽并根据坐标,反地理获取地址详情

Android 百度地图的sdk: 由于需求的增加,定位好了之后可以点击marker拖拽获取新的位置:  最好是对着api文档看下每个类的用法 第一步:首先定位成功时,要设置下mar...
  • Squirrels_run
  • Squirrels_run
  • 2017年01月18日 12:52
  • 666
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:使用百度地图实现拖动定位、搜索定位
举报原因:
原因补充:

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