zoukankan      html  css  js  c++  java
  • 百度地图 第一个功能:点击地图获取坐标并获取省市区, 第二个功能:搜索地点,并获取坐标

    /*html*/
                              <div class="col-lg-12">
                                                    <div class="col-lg-9">
                                                        <!--百度地图容器-->
                                                        <div style=" 100%; height: 500px;border:#ccc solid 1px;font-size:12px" id="allmap"></div>
                                                    </div>
                                                    <div class="col-lg-3">
                                                        <!--搜索输入框-->
                                                        <div>
                                                            <span>坐标:</span>
                                                            <input type="text" id="shopcoord" name="lng_lat" value="{$info['lng_lat']}" readonly="readonly" class="form-control"  placeholder="无需输入自动识别">
                                                        </div>
                                                        <!--disabled="disabled"-->
                                                        <p style="padding-top: 20px;"></p>
                                                        <div id="r-result">
                                                            <i>*</i><span>公司详细地址:</span>
                                                            <input class="form-control" name="dizhi" type="text" id="suggestId" size="20" value="{$info['dizhi']}" placeholder="公司地址" >
                                                        </div>
                                                        
                                                        <div id="searchResultPanel" style="border:1px solid #C0C0C0;150px;height:auto; display:none;"></div>
                                                    </div>
                                                </div>
    
    
    
    /*js*/
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=nSxiPohfziUaCuONe4ViUP2N"></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
            });
            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 value_pp = pp.lng+','+pp.lat;
                    $('#shopcoord').val(value_pp);
                }
                var local = new BMap.LocalSearch(map, { //智能搜索
                  onSearchComplete: myFun
                });
                local.search(myValue);
            }
        
    </script>
    <script>
        /*初始化 开始*/
        var lnt_lag = "{$info['lng_lat']}";
        if(lnt_lag){
            var lng_val = "{$info['zuobiao_val'][0]}";
            var lat_val = "{$info['zuobiao_val'][1]}";
        }else{
            var lng_val = "116.41566";
            var lat_val = "39.940562";
        }
        // 百度地图API功能
        var map = new BMap.Map("allmap");
        var point = new BMap.Point(lng_val,lat_val);
        map.centerAndZoom(point, 12);
        var marker = new BMap.Marker(point);  // 创建标注
        map.addOverlay(marker);              // 将标注添加到地图中
        var label = new BMap.Label("{$info['s_company']}",{offset:new BMap.Size(20,-10)});
        marker.setLabel(label);
        /*初始化 结束*/
        
        /*地图缩放*/
        setTimeout(function(){
            map.setZoom(14);   
        }, 2000);  //2秒后放大到14级
        map.enableScrollWheelZoom(true);
    </script>
    <script>
    /*点击地图 获取坐标 和详细地址*/
    map.addEventListener("click",function(e){
        var geocoder = new BMap.Geocoder();
        var point = new BMap.Point(e.point.lng,e.point.lat);
        geocoder.getLocation(point,function(geocoderResult,LocationOptions){
          //alert(geocoderResult.address);
            $('#suggestId').val(geocoderResult.address);
        });
        //prompt("鼠标单击地方的经纬度为:",e.point.lng + "," + e.point.lat);
        var value_data = e.point.lng + "," + e.point.lat;
        $('#shopcoord').val(value_data);
    });
    </script>
    <script>
        $(document).ready(function(){
            setTimeout(function(){
                $('#suggestId').val("{$info['dizhi']}");
            },2000)
        })
    </script>
  • 相关阅读:
    常用命令
    经典算法
    框架
    计算机网络
    设计模式
    JVM
    数据库
    多线程
    Java中HashMap的底层实现原理
    构建大小顶堆
  • 原文地址:https://www.cnblogs.com/zc290987034/p/9492357.html
Copyright © 2011-2022 走看看