地图选点 php,百度地图选点–Bootstrap模态框(Modal)插件

在网站的开发过程中,例如商家的注册等，需要商家设定自己的经纬度进行对商家的精确定位，同时也方便用户查找到附近距离范围内的商家。这样更利于网站的用户和商家互动。商家设定自己的经纬度就需要使用到百度地图2.0。此处为百度地图和Bootstrap模态框(Modal)的相关示例DEMO。直接上示例代码。

百度地图选点--Bootstrap模态框(Modal)插件

百度地图选点--创建模态框(Modal)

点击选择设置百度地图

×

百度地图选点(鼠标滚动缩放地图,鼠标拖动移动地图)

在这里添加一些文本

设置为此地址

关闭

$(function(){

$("#createMap").click(function(){

setTimeout(function() {//添加延时加载。解决问题

var map = new BMap.Map("map_main");

var myCity = new BMap.LocalCity();

myCity.get(function(res){

map.centerAndZoom(res.center,res.level);

var old_map = $('#map').val();//如果已设置过

if(old_map.length > '5'){//打开的时候显示已设置的

$("#map_txt").val(old_map);

var oldMap = old_map.split(",");

var point = new BMap.Point(oldMap[0],oldMap[1]);

var marker = new BMap.Marker(point); // 创建标注

map.clearOverlays();

map.addOverlay(marker);

}

map.addEventListener("click", function(e){

var lng_lat = e.point.lng+','+e.point.lat;

$("#map_txt").val(lng_lat);//加入到设置框

var point = new BMap.Point(e.point.lng,e.point.lat);

var marker = new BMap.Marker(point); // 创建标注

map.clearOverlays();

map.addOverlay(marker);

});

});

},300);

});

});

//设置经纬度

function setMapValue(){

if($("#map_txt").val()==""){ alert('你还没选择相应的坐标点^_^哦'); return false; }

$("#map").val($("#map_txt").val());

$('#myModal').modal('hide')

}

相关延伸阅读：

百度地图获取经纬度的示例--jquery.fancybox

最长的莫过于时间，因为它永无穷尽；最短的也莫过于时间，因为我们所有的计划都来不及完成。----伏尔泰