百度地图实例线、面编辑判断点是否在区域内展示地图标注...

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>XXXX</title>

<style type="text/css">
   html{height:100%}
   body{height:100%;margin:0px;padding:0px}
   #container{height:100%}
</style>

<script type="text/javascript" src="/jquery/jquery.min.js"></script>

<script type="text/javascript" src="http://api.map.baidu.com/api?v=3.0&ak=XXXX">
//v3.0版本的引用方式：src="http://api.map.baidu.com/api?v=3.0&ak=您的密钥"
</script>


<script type="text/javascript" src="http://api.map.baidu.com/library/DrawingManager/1.4/src/DrawingManager_min.js"></script>
<link rel="stylesheet" href="http://api.map.baidu.com/library/DrawingManager/1.4/src/DrawingManager_min.css" />


<script type="text/javascript" src="http://api.map.baidu.com/library/GeoUtils/1.2/src/GeoUtils_min.js"></script>


<style type="text/css">
   body, html{width: 100%;height: 100%;margin:0;font-family:"微软雅黑";}
   #allmap {width: 100%; height:500px; overflow: hidden;}
   #result {width:100%;font-size:12px;}
   dl,dt,dd,ul,li{
       margin:0;
       padding:0;
       list-style:none;
   }
   p{font-size:12px;}
   dt{
       font-size:14px;
       font-family:"微软雅黑";
       font-weight:bold;
       border-bottom:1px dotted #000;
       padding:5px 0 5px 5px;
       margin:5px 0;
   }
   dd{
       padding:5px 0 0 5px;
   }
   li{
       line-height:28px;
   }
   </style>

</head>

<body>

<div id="allmap" style="overflow:hidden;zoom:1;position:relative;">
       <div id="container" style="height:100%;-webkit-transition: all 0.5s ease-in-out;transition: all 0.5s ease-in-out;"></div>
</div>
<script type="text/javascript">
var map = new BMap.Map("container",{enableMapClick:false});
var point;
//获取指定坐标，如果没有则将初始坐标设置为默认的坐标
$.ajax({
    url: '../XXX/XXX',
    data: {userId : ${userId}},//位置类型: 1.室外；2.室内
    async: false,
    dataType: 'JSON',
    success: function(data) {
          if(data.records != null){
              point = new BMap.Point(data.records[0].LATITUDE, data.records[0].LONGITUDE);
          }else{
              point = new BMap.Point(121.408738,31.108701);
          }

    }
});

// 创建点坐标
map.centerAndZoom(point, 11);
// 初始化地图，设置中心点坐标和地图级别
map.enableScrollWheelZoom(true);
//地图缩放

var overlays = [];
var backpackerOverlays = [];
var chooseBackpackerOverlays = [];
var hasChooseItem = "";

var altDeviceName = "已选择：<br/>";

var overlaycomplete = function(e){
   overlays.push(e.overlay);
};

var styleOptions = {
    strokeColor:"red",    //边线颜色。
    fillColor:"red",      //填充颜色。当参数为空时，圆形将没有填充效果。
    strokeWeight: 3,       //边线的宽度，以像素为单位。
    strokeOpacity: 0.8,    //边线透明度，取值范围0 - 1。
    fillOpacity: 0.6,      //填充的透明度，取值范围0 - 1。
    strokeStyle: 'solid' //边线的样式，solid或dashed。
}
//实例化鼠标绘制工具
var drawingManager = new BMapLib.DrawingManager(map, {
    isOpen: false, //是否开启绘制模式
    enableDrawingTool: true, //是否显示工具栏
    drawingToolOptions: {
        anchor: BMAP_ANCHOR_TOP_RIGHT, //位置
        offset: new BMap.Size(5, 5), //偏离值
        drawingModes : [
           //BMAP_DRAWING_MARKER, //画点
           //BMAP_DRAWING_CIRCLE, //画圆
           //BMAP_DRAWING_POLYLINE, //画线
           //BMAP_DRAWING_RECTANGLE, //画矩形
           BMAP_DRAWING_POLYGON //画多边形
         ]
    },
    circleOptions: styleOptions, //圆的样式
    polylineOptions: styleOptions, //线的样式
    polygonOptions: styleOptions, //多边形的样式
    rectangleOptions: styleOptions //矩形的样式
});

//添加鼠标绘制工具监听事件，用于获取绘制结果
drawingManager.addEventListener('overlaycomplete', overlaycomplete);
function clearAll() {
   for(var i = 0; i < overlays.length; i++){
        map.removeOverlay(overlays[i]);
    }
    overlays.length = 0;
}

map.addEventListener("rightclick", function(){
   clearAll();
});

//绘制圆完成后，派发的事件接口
/*drawingManager.addEventListener("circlecomplete", function(e, overlay) {
   console.log("-------circlecomplete------------");
   console.log(e);
   console.log(overlay);
});*/

//鼠标绘制完成后，派发总事件的接口
drawingManager.addEventListener("overlaycomplete", function(e) {

      //开启线、面编辑功能
      Editing('enable');
      if(overlays.length > 0){
       for(var i = 0; i < overlays.length-1; i++){
           map.removeOverlay(overlays[i]);
       }
      }

});

/**
* 点击鼠标拖动选择区域后获取新的选择区域的内容信息
*/
function getAltDeviceName(){
   //取得地图上所有的XXX点位
      var overlaysss = backpackerOverlays;
      var maker_arr = [];
      altDeviceName = "已选择：<br/>";
      for(var i=0;i<overlaysss.length;i++){
          //判断是否在多边形区域内
          var result = ptInPolygon(overlaysss[i].point, overlays[0].Gn);
          if(result){
              altDeviceName += overlaysss[i].z.title+"<br/>";
              maker_arr.push(overlaysss[i]);
          }
      }
      chooseBackpackerOverlays = maker_arr;
}

function ptInPolygon(point, polygonPoints){ //判断传入的points点是否在ply多边形里面，是返回true，否返回false
    var ply = new BMap.Polygon(polygonPoints);
    var result = BMapLib.GeoUtils.isPointInPolygon(point, ply);
    if(result==true){
   return true;
    }else{
   return false;
    }
}

//开启线、面编辑功能enable //关闭线、面编辑功能disable
function Editing(state){
    for(var i = 0; i < overlays.length; i++){
        state=='enable'?overlays[i].enableEditing():overlays[i].disableEditing();
    }
}

function addMarker(point, deviceId, device){

       var marker = new BMap.Marker(point);

    var deviceName = device.DEVICE_NAME+"_"+device.DEVICE_CODE;
      marker.setTitle(deviceName)
      marker.setLabel(deviceId)

      //已选的更改点样式
      var flag = false;
      if(hasChooseItem != ""){
          hasChooseItem += ",";
          var num=hasChooseItem.split(",");
          for (var i = 0; i < num.length; i++) {
           if(deviceId == num[i]){
               flag = true;
           }
          }
      }
      if(flag){
          var myIcon = new BMap.Icon("/image/gis.png", new BMap.Size(20, 30), {});
          marker.setIcon(myIcon);
      }

      var opts = {
              width : 200,     // 信息窗口宽度
              height: 120,     // 信息窗口高度
              title : deviceName, // 信息窗口标题
              enableMessage:true,//设置允许信息窗发送短息
              message:""
           }
      var info = "设备类型："+device.NAME+"</br>"
               +"设备名称："+device.DEVICE_NAME+"</br>"
               +"设备编码："+device.DEVICE_CODE+"</br>";
      var infoWindow = new BMap.InfoWindow(info, opts); // 创建信息窗口对象
      marker.addEventListener("click", function(){
           map.openInfoWindow(infoWindow,point); //开启信息窗口
           map.centerAndZoom(point, 12);
      });

      map.addOverlay(marker);
      backpackerOverlays.push(marker);
}
   // 随机向地图添加5个标注
/* 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);
} */

//获取用户已选信息
   $.ajax({
      url: '../XXX/getXXX',
      data: {userId : ${userId}, point : 1},//位置类型: 1.室外；2.室内
      async: false,
      dataType: 'JSON',
      success: function(data) {
            hasChooseItem = data.records.userItem;
      }
});

$.ajax({
      url: "../XXX/XXXList",
      data: {userId : ${userId}, point : 1},//位置类型: 1.室外；2.室内
      async: false,
      dataType: 'JSON',
      success: function(data) {
          for(var i = 0;i < data.records.length; i++){
              var point = new BMap.Point( data.records[i].XPOINT, data.records[i].YPOINT);
              var deviceId = data.records[i].DEVICE_ID;
              var device = data.records[i];
              addMarker(point, deviceId, device);
          }

      }
});

</script>
</body>
</html>

百度地图实例 线、面编辑 判断点是否在区域内 展示地图标注...

猜你喜欢

百度地图实例线、面编辑判断点是否在区域内展示地图标注...