百度地图的使用

最新推荐文章于 2022-10-31 22:13:03 发布

cgt_0812

最新推荐文章于 2022-10-31 22:13:03 发布

阅读量261

点赞数

CC 4.0 BY-SA版权

文章标签：百度地图

本文链接：https://blog.youkuaiyun.com/cgt_0812/article/details/78810867

百度地图

实例代码：

<div class="row cl">
    <label class="form-label col-xs-4 col-sm-2"><span class="c-red">*</span>地图选点：</label>
    <div class="formControls col-xs-8 col-sm-9">
        <input type="text" class="input-text" placeholder="" id="inputLocation" value="${(store.address)!''}" style="width: 60%" name="inputLocation">
        <input class="btn btn-primary radius" onclick="searchLocation()" type="button" value="  搜索  ">

//展示的位置
<div style="width: 100%;height:400px;margin-top: 10px" id="map"></div>

对应的js代码：

var map=new BMap.Map("map");
var lng='${store.lng!''}';
var lat='${store.lat!''}';
if(lng=='' || lat==''){
    lng='120.118952';
    lat='30.294185';
}
var point=new BMap.Point(lng,lat);
map.centerAndZoom(point, 19);
map.enableScrollWheelZoom(true);//允许鼠标放大缩小，默认是false
var marker=new BMap.Marker(point);
map.addOverlay(marker);
marker.enableDragging();//能拖拽标注
marker.addEventListener("dragend", function(e){//给标注添加拖拽事件
    var p=e.point;
    dragenMarker(p);
});

function searchLocation(){debugger
    var inputLocation=$("#inputLocation").val();
    var geo = new BMap.Geocoder();
    geo.getPoint(inputLocation, function(point){
        if(point){//如果点击搜索并且能找到输入的地址时
            map.clearOverlays();//清空所有的覆盖物
            map.centerAndZoom(point, 19);
            map.enableScrollWheelZoom(true);
            var marker=new BMap.Marker(point);
            map.addOverlay(marker);
            $("#address").val(inputLocation);
            $("#addressShow").val(inputLocation);
            $("#lng").val(point.lng);
            $("#lat").val(point.lat);
            geo.getLocation(point, function(rs){//为了获取省市再调用一次Geocoder单独赋值
                var comp=rs.addressComponents;
                $("#province").val(comp.province);
                $("#city").val(comp.city);
                $("#district").val(comp.district);
            });

            marker.enableDragging();
            marker.addEventListener("dragend", function(e){
                var p=e.point;
                dragenMarker(p);
            });
        }else{

        }
    }, "世界");
}
    </div>
</div>

function dragenMarker(p){
    var geo=new BMap.Geocoder();
    geo.getLocation(p, function(rs){
        var comp=rs.addressComponents;
        var result=comp.province+comp.city+comp.district+comp.street+comp.streetNumber;
        $("#inputLocation").val(result);
        $("#address").val(result);
        $("#addressShow").val(result);
        $("#province").val(comp.province);
        $("#city").val(comp.city);
        $("#district").val(comp.district);
        $("#lng").val(p.lng);
        $("#lat").val(p.lat);
    });
}

百度地图的使用可以参考百度地图api