在網站的開發過程中,例如商家的注冊等，需要商家設定自己的經緯度進行對商家的精確定位，同時也方便用戶查找到附近距離范圍內的商家。這樣更利于網站的用戶和商家互動。商家設定自己的經緯度就需要使用到百度地圖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

最長的莫過于時間，因為它永無窮盡；最短的也莫過于時間，因為我們所有的計劃都來不及完成。----伏爾泰

總結

以上是生活随笔為你收集整理的地图选点 php,百度地图选点–Bootstrap模态框(Modal)插件的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。