百度地图 第一个功能:点击地图获取坐标并获取省市区, 第二个功能:搜索地点,并获取坐标

/*html*/
                          <div class="col-lg-12">
                                                <div class="col-lg-9">
                                                    <!--百度地图容器-->
                                                    <div style="width: 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;width: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>

 

posted @ 2018-08-17 11:21  遇事稳坐钓鱼台  阅读(6572)  评论(0编辑  收藏  举报