获取定位经纬度，支持输入地址搜索先定位

最新推荐文章于 2024-09-03 15:52:06 发布

liuxin_0725

最新推荐文章于 2024-09-03 15:52:06 发布

阅读量1.5k

点赞数

分类专栏： javascript 百度地图api

本文链接：https://blog.csdn.net/liuxin_0725/article/details/67639816

版权

javascript 同时被 2 个专栏收录

32 篇文章 0 订阅

订阅专栏

百度地图api

3 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
   <head>
      
      <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=jcWsnmlL6T"></script>
   </head>
   <body>
      <include file="Public/head"/>
      
       <div class="title">店铺定位 ：</div>
                     <div class="con">
                        经度 <input type="text" readonly style="width: 120px;" name="address_x" />
                        纬度 <input type="text" readonly  style="width: 120px;" name="address_y" /> <a href="javascript:huoqu();"  class="qrcode">获取</a>
                        <span class="explain">通过点击获取，获得经纬度地址</span>
                     </div>
               
      <div class="cheng1"></div>
      <div id="ditu" style="display: none;width: 40%;height: 400px;position: fixed;background: #ffffff;top: 100px;left: 55%;padding: 1%;border-radius:5px;border: 1px #9d9d9d solid;">
         <a href="javascript:ditu();" style="background: #ffffff;display: block;width: 20px;height: 20px;float: right;font-size: 20px;">X</a>
         <div id="r-result">请输入:<input type="text" id="suggestId" size="20" value="百度" style="width:250px;" /></div>
         <div id="searchResultPanel" style="border:1px solid #C0C0C0;width:250px;height:auto; display:none;"></div>
            <div style="width: 100%;height: 90%;background: #4bad4b;" id="allmap">

         </div>

      </div>
      <include file="Public/foot"/>
      <script type="text/javascript" src="__PUBLIC__/js/step8.js"></script>
      <script type="text/javascript">
            function ditu() {
                $("#ditu").hide();
                $(".cheng1").hide();
            }
            function huoqu() {
                $("#ditu").show();
                $(".cheng1").show();
            }
           </script>
      <script type="text/javascript">
            // 百度地图API功能
            function G(id) {
                return document.getElementById(id);
            }

            var map = new BMap.Map("allmap");
            map.centerAndZoom("长沙",12);                   // 初始化地图,设置城市和地图级别。

            var ac = new BMap.Autocomplete(    //建立一个自动完成的对象
                {"input" : "suggestId"
                    ,"location" : map
                });
            map.enableScrollWheelZoom();     //开启鼠标滚轮缩放
            map.disableDragging();     //禁止拖拽
            setTimeout(function () {
                map.enableDragging();   //两秒后开启拖拽
                map.enableInertialDragging();   //两秒后开启惯性拖拽
            }, 2000);
            ac.addEventListener("onhighlight", function(e) {  //鼠标放在下拉列表上的事件
                var str = "";
                var _value = e.fromitem.value;
                var value = "";
                if (e.fromitem.index > -1) {
                    value = _value.province +  _value.city +  _value.district +  _value.street +  _value.business;
                }
                str = "FromItem<br />index = " + e.fromitem.index + "<br />value = " + value;

                value = "";
                if (e.toitem.index > -1) {
                    _value = e.toitem.value;
                    value = _value.province +  _value.city +  _value.district +  _value.street +  _value.business;
                }
                str += "<br />ToItem<br />index = " + e.toitem.index + "<br />value = " + value;
                G("searchResultPanel").innerHTML = str;
            });

            var myValue;
            ac.addEventListener("onconfirm", function(e) {    //鼠标点击下拉列表后的事件
                var _value = e.item.value;
                myValue = _value.province +  _value.city +  _value.district +  _value.street +  _value.business;
                G("searchResultPanel").innerHTML ="onconfirm<br />index = " + e.item.index + "<br />myValue = " + myValue;

                setPlace();
            });

            function setPlace(){
                map.clearOverlays();    //清除地图上所有覆盖物
                function myFun(){
                    var pp = local.getResults().getPoi(0).point;    //获取第一个智能搜索的结果
                    map.centerAndZoom(pp, 18);
                    map.addOverlay(new BMap.Marker(pp));    //添加标注
                }
                var local = new BMap.LocalSearch(map, { //智能搜索
                    onSearchComplete: myFun
                });
                local.search(myValue);
            }

            //点击获取地图上经纬度
            map.addEventListener("click",function(e){
                map.clearOverlays();
                var marker = new BMap.Marker(new BMap.Point(e.point.lng,e.point.lat));
                map.addOverlay(marker);
                $("input[name='address_x']").val(e.point.lng);//经度
                $("input[name='address_y']").val(e.point.lat);//纬度
            });
      </script>
      
   </body>
</html>