JS代碼實現(xiàn)百度地圖 畫圓 刪除標注
更新時間：2016年10月12日 16:43:11 作者：Smile燕
這篇文章主要介紹了JS代碼實現(xiàn)百度地圖 畫圓 刪除標注的相關(guān)資料,實現(xiàn)此功能的設(shè)計思路非常明確，代碼簡單易懂，非常不錯，具有參考借鑒價值，感興趣的朋友參考下吧
把下面這段代碼復(fù)制到百度地圖的demo中運行，效果就是我想設(shè)計的效果。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
body, html {width: 100%;height: 100%;margin:0;font-family:"微軟雅黑";}
#allmap{width:100%;height:500px;}
p{margin-left:5px; font-size:14px;}
</style>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=您的密鑰"></script>
<title>圓形區(qū)域搜索</title>
</head>
<body>
<div id="allmap"></div>
<p>返回北京市地圖上圓形覆蓋范圍內(nèi)的“餐館”檢索結(jié)果，并展示在地圖上</p>
</body>
</html>
<script type="text/javascript">
// 百度地圖API功能
var map = new BMap.Map("allmap"); // 創(chuàng)建Map實例
var mPoint = new BMap.Point(116.404, 39.915);
map.enableScrollWheelZoom();
map.centerAndZoom(mPoint,15);
var circle = new BMap.Circle(mPoint,1000,{fillColor:"blue", strokeWeight: 1 ,fillOpacity: 0.3, strokeOpacity: 0.3,enableEditing:true});
map.addOverlay(circle);
var removecircle = function(e,ee,marker){
//取得地圖上所有的覆蓋物
var overlays = map.getOverlays();
//取得圓形區(qū)域
var bounds = marker.getBounds();
var maker_arr = [];
for(var i=0;i<overlays.length;i++){
//判斷 覆蓋物為標注的并且是在圓形區(qū)域內(nèi)部的
if(overlays[i].uQ == "Marker"){
//獲取標注點到圓心的距離 與半徑做對比
if(map.getDistance(marker.getCenter(),overlays[i].getPosition()) < marker.getRadius()){
maker_arr.push(overlays[i]);
}
}
}
var r=confirm("你確定要刪除區(qū)域中"+(maker_arr.length-1)+"個標注嗎？");
if (r==true){
for(var i=0;i<maker_arr.length;i++){
map.removeOverlay(maker_arr[i]);
}
map.removeOverlay(marker);
}else{
map.removeOverlay(marker);
}
}
//創(chuàng)建右鍵菜單
var circleMenu=new BMap.ContextMenu();
circleMenu.addItem(new BMap.MenuItem('刪除',removecircle.bind(removecircle)));
circle.addContextMenu(circleMenu);
var local = new BMap.LocalSearch(map, {renderOptions: {map: map, autoViewport: false}});
//local.searchNearby('餐館',mPoint,1000);
function addMarker(point){
var marker = new BMap.Marker(point);
map.addOverlay(marker);
}
// 隨機向地圖添加25個標注
var bounds = map.getBounds();
var sw = bounds.getSouthWest();
var ne = bounds.getNorthEast();
var lngSpan = Math.abs(sw.lng - ne.lng);
var latSpan = Math.abs(ne.lat - sw.lat);
for (var i = 0; i < 5; i ++) {
var point = new BMap.Point(sw.lng + lngSpan * (Math.random() * 0.7), ne.lat - latSpan * (Math.random() * 0.7));
addMarker(point);
}
</script>
功能：以某個區(qū)域批量刪除maker。
功能的設(shè)計思路：
1 右鍵菜單--》區(qū)域刪除機構(gòu)。
2 先畫圓(以鼠標點擊的某個點為中心點 畫圓)。
3 得到圓中所選中的標注(主鍵)。
4 圓上右鍵刪除
4 .1 確定 刪除圓，刪除標注(連接數(shù)據(jù)庫數(shù)據(jù))。
4.2 取消 刪除圓。
主要功能代碼(js);
{ text:'區(qū)域刪除機構(gòu)',
callback:function(e){
var mPoint=new BMap.Point(e.lng,e.lat);// 得到中心點坐標
// 一句js畫圓 但是這個不可以重復(fù)畫圓 需要刷新頁面后才可以重新畫圓
/* var circle = new BMap.Circle(mPoint,1000,{fillColor:"blue", strokeWeight: 1 ,fillOpacity: 0.3, strokeOpacity: 0.3,enableEditing:true});
map.addOverlay(circle); */
var circle = new BMap.Circle(mPoint,5000);
circle.setFillColor("blue"); //填充顏色
circle.setStrokeWeight(1);// 設(shè)置圓形邊線的寬度，取值為大于等于1的整數(shù)。
circle.setFillOpacity(0.3);// 返回圓形的填充透明度。
circle.setStrokeOpacity(0.3);// 設(shè)置圓形的邊線透明度，取值范圍0 - 1。
// 這樣畫圓 可編輯的圓 這兩句js代碼的位置不可改變
map.addOverlay(circle);// 把圓添加到地圖中
circle.enableEditing();// 設(shè)置可編輯的圓
var removecircle = function(e,ee,marker){
var deleteid=[];
var idd=[];
//取得地圖上所有的覆蓋物
var overlays = map.getOverlays();
//取得圓形區(qū)域
var bounds = marker.getBounds();
var maker_arr = [];
var maker_id =[];
for(var i=0;i<overlays.length;i++){
//判斷 覆蓋物為標注的并且是在圓形區(qū)域內(nèi)部的
if(overlays[i].uQ == "Marker"){
//獲取標注點到圓心的距離 與半徑做對比
if(map.getDistance(marker.getCenter(),overlays[i].getPosition()) < marker.getRadius()){
maker_arr.push(overlays[i]);
maker_id.push(overlays[i].id);// 標注主鍵值
}
}
}
$.messager.confirm('確認','你確定要刪除區(qū)域中選中的標注嗎?',function(r){
if (r==true){
map.removeOverlay(circle)// 刪除圓
for(var i=0;i<maker_id.length;i++){
$.ajax({
type: 'delete',
url: '/yxt-admin/admin/hospital/' + maker_id[i] + '/delete',
success: function(data) {
if (data.stateCode == 200) {
$.messager.show({
title: '提示消息',
msg: data.message,
timeout: 5000,
showType: 'slide'
});
}else if(data.stateCode==205){
$.messager.alert('提醒','登錄已超時 重新登錄','info',function(){
top.location.href="/yxt-admin/adminLogin.html";
});
} else {
$.messager.show({
title: '提示',
msg: data.message
});
}
},
error: function(XMLHttpRequest, textStatus, errorThrown) {
$.messager.show({
title: '提示',
msg: '系統(tǒng)錯誤，請聯(lián)系開發(fā)人員.或刷新當前頁面，重新操作。'
});
}
});
}
location.reload();
}else{
map.removeOverlay(circle)
}
})
}
var circleMenu=new BMap.ContextMenu();
circleMenu.addItem(new BMap.MenuItem('刪除',removecircle.bind(removecircle))); // 圓上右鍵刪除
circle.addContextMenu(circleMenu);// 添加右鍵菜單
}
},
以上所述是小編給大家介紹的JS代碼實現(xiàn)百度地圖 畫圓 刪除標注，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
相關(guān)文章
本篇文章主要介紹了js綁定事件和解綁事件的相關(guān)知識。具有很好的參考價值。下面跟著小編一起來看下吧2017-04-04
這篇文章主要介紹了JavaScript匿名函數(shù)用法,實例分析了匿名函數(shù)的功能、定義及具體用法,非常具有實用價值,需要的朋友可以參考下2015-02-02
可以控制列表按日期以及按字數(shù)排序.升或者降序.代碼簡單封裝，按一定的格式調(diào)用即可。2009-11-11
下面小編就為大家?guī)硪黄狫s遍歷鍵值對形式對象或Map形式的方法。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-08-08
在 JavaScript 中,new 關(guān)鍵字不僅是面向?qū)ο缶幊痰年P(guān)鍵要素,還是創(chuàng)建實例的重要手段,本文將深入探討 new 關(guān)鍵字的使用,理解它在對象創(chuàng)建和構(gòu)造函數(shù)調(diào)用中的作用,需要的朋友可以參考下2023-11-11
對于JS框架開發(fā)中的客戶端（瀏覽器）兼容難題，各位想必都不陌生。平常，我們都用if去面對接口不一致以及成堆的bug。然而，這里介紹的方法卻可以讓兼容更加優(yōu)雅。2010-08-08
layui中l(wèi)ayer前端組件實現(xiàn)圖片顯示功能的方法分析
這篇文章主要介紹了layui中l(wèi)ayer前端組件實現(xiàn)圖片顯示功能的方法,結(jié)合實例形式分析了layui中l(wèi)ayer組件調(diào)用圖片顯示功能的操作方法與相關(guān)注意事項,并提供了layer與layui源碼下載,需要的朋友可以參考下2017-10-10
這篇文章主要為大家詳細介紹了javascript實現(xiàn)蒙版與禁止頁面滾動，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-01-01
現(xiàn)在又想做一個無縫滾動了，所以在網(wǎng)上找啊找，好多都是相同的，而且調(diào)試復(fù)雜，好多都不能動，也懶得去細看，終于讓我發(fā)現(xiàn)了這個，希望能幫到別人：2013-06-06
js動態(tài)添加刪除,后臺取數(shù)據(jù)(示例代碼)
這篇文章主要是對js動態(tài)添加刪除,后臺取數(shù)據(jù)(示例代碼)進行了詳細的分析介紹，需要的朋友可以過來參考下，希望對大家有所幫助2013-11-11