在網(wǎng)站的開(kāi)發(fā)過(guò)程中,例如商家的注冊(cè)等，需要商家設(shè)定自己的經(jīng)緯度進(jìn)行對(duì)商家的精確定位，同時(shí)也方便用戶查找到附近距離范圍內(nèi)的商家。這樣更利于網(wǎng)站的用戶和商家互動(dòng)。商家設(shè)定自己的經(jīng)緯度就需要使用到百度地圖2.0。此處為百度地圖和Bootstrap模態(tài)框(Modal)的相關(guān)示例DEMO。直接上示例代碼。

百度地圖選點(diǎn)--Bootstrap模態(tài)框(Modal)插件

百度地圖選點(diǎn)--創(chuàng)建模態(tài)框(Modal)

點(diǎn)擊選擇設(shè)置百度地圖

×

百度地圖選點(diǎn)(鼠標(biāo)滾動(dòng)縮放地圖,鼠標(biāo)拖動(dòng)移動(dòng)地圖)

在這里添加一些文本

設(shè)置為此地址

關(guān)閉

$(function(){

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

setTimeout(function() {//添加延時(shí)加載。解決問(wèn)題

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();//如果已設(shè)置過(guò)

if(old_map.length > '5'){//打開(kāi)的時(shí)候顯示已設(shè)置的

$("#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); // 創(chuàng)建標(biāo)注

map.clearOverlays();

map.addOverlay(marker);

}

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

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

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

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

var marker = new BMap.Marker(point); // 創(chuàng)建標(biāo)注

map.clearOverlays();

map.addOverlay(marker);

});

});

},300);

});

});

//設(shè)置經(jīng)緯度

function setMapValue(){

if($("#map_txt").val()==""){ alert('你還沒(méi)選擇相應(yīng)的坐標(biāo)點(diǎn)^_^哦'); return false; }

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

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

}

相關(guān)延伸閱讀：

百度地圖獲取經(jīng)緯度的示例--jquery.fancybox

最長(zhǎng)的莫過(guò)于時(shí)間，因?yàn)樗罒o(wú)窮盡；最短的也莫過(guò)于時(shí)間，因?yàn)槲覀兯械挠?jì)劃都來(lái)不及完成。----伏爾泰

總結(jié)

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

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。