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