百度地图
实例代码:
<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>
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