地图选点 php,百度地图选点–Bootstrap模态框(Modal)插件
在網(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)題。
- 上一篇: 西南大学2021年博士研究生招生章程
- 下一篇: php仪表盘图,仪表盘图文模式