承接上一篇根据经纬度的显示,该文章用来设置经纬度。经纬度依赖于百度地图获取。同时该文使用的fancybox来弹出层展示百度地图。请根据你的相应的文件目录来引入你的对应的js组件.
效果图如下:
完整代码如下:
百度地图获取经纬度的示例企业经纬度
滚动鼠标->缩放地图大小,鼠标拖动->上下左右移动地图
//弹出层显示百度地图 --fancybox
$("#various1").fancybox({
'titlePosition': 'inside',
'transitionIn': 'none',
'transitionOut': 'none'
});
var map = new BMap.Map("container");
var lntAndLog=$('#map').val().split(",");
map.centerAndZoom(new BMap.Point(lntAndLog[0],lntAndLog[1]), 12);
map.enableScrollWheelZoom(true);
map.addControl(new BMap.MapTypeControl({anchor: BMAP_ANCHOR_TOP_LEFT})); //左上角,默认地图控件
var myCity = new BMap.LocalCity();//实例化本地地图,基于IP地址
myCity.get(myFun);
map.clearOverlays();
var marker1 = new BMap.Marker(new BMap.Point(lntAndLog[0],lntAndLog[1]));//创建标注
map.addOverlay(marker1);
function showInfo(e){
map.clearOverlays();
var marker1 = new BMap.Marker(new BMap.Point(e.point.lng, e.point.lat));//创建标注
map.addOverlay(marker1);
document.getElementById("maptxt").value=e.point.lng + "," + e.point.lat;
}
map.addEventListener("click", showInfo);
//设置经纬度
function setmapValue(){
if($("#maptxt").val()==""){
alert('你还没选择相应的坐标点^_^哦');
return false;
}
$("#map").val($("#maptxt").val());
$('#fancybox-close').click();
}
//IP定位获取当前城市
function myFun(result){
var cityName = result.name;
map.setCenter(cityName);
}
【带搜索功能的示例代码】
百度地图获取经纬度的示例企业经纬度----带搜索功能
提示:搜到地址后用鼠标单击地点标注即可在坐标设置框获取坐标值,如果未找到您想要的地址可以在地图的相应点双击鼠标生成标注再设置坐标。 |
滚动鼠标->缩放地图大小,鼠标拖动->上下左右移动地图
//弹出层显示百度地图 --fancybox
$("#various1").fancybox({
'titlePosition': 'inside',
'transitionIn': 'none',
'transitionOut': 'none'
});
var map = new BMap.Map("container");
map.setDefaultCursor("crosshair");//设置地图默认的鼠标指针样式
var lntAndLog=$('#map').val().split(",");
map.centerAndZoom(new BMap.Point(lntAndLog[0],lntAndLog[1]), 12);
map.enableScrollWheelZoom(true);
map.addControl(new BMap.MapTypeControl({anchor: BMAP_ANCHOR_TOP_LEFT})); //左上角,默认地图控件
var myCity = new BMap.LocalCity(); //实例化本地地图,基于IP地址
myCity.get(myFun);
map.clearOverlays();
var marker1 = new BMap.Marker(new BMap.Point(lntAndLog[0],lntAndLog[1])); //创建标注
map.addOverlay(marker1);
function showInfo(e){//创建狐狸标注并获取坐标
map.clearOverlays();//清除地图上的覆盖物
var marker1 = new BMap.Marker(new BMap.Point(e.point.lng, e.point.lat)); //创建标注
map.addOverlay(marker1);
document.getElementById("maptxt").value=e.point.lng + "," + e.point.lat;
}
map.addEventListener("dblclick", showInfo);//地图双击鼠标事件
map.addEventListener("click", function(e){//地图单击事件
document.getElementById("maptxt").value = e.point.lng + ", " + e.point.lat;
});
function sear(result){//地图搜索
var local = new BMap.LocalSearch(map, {
renderOptions:{map: map}
});
local.search(result);
}
//设置经纬度
function setmapValue(){
if($("#maptxt").val()==""){
alert('你还没选择相应的坐标点^_^哦');
return false;
}
$("#map").val($("#maptxt").val());
$('#fancybox-close').click();
}
//IP定位获取当前城市
function myFun(result){
var cityName = result.name;
map.setCenter(cityName);
}
Live in the present. Value what you have. 活在当下,珍惜拥有!