1：先在页面上弄一个div，给它设置样式，并且给它点击事件drawGeometry()，创建矢量图层：

markerLayer = new
SuperMap.Layer.Markers(“Markers”)；

把创建的矢量图层添加到Map地图里面：

map.addLayers(markerLayer);

然后创建方框区域控制：

drawFeaturequery = new SuperMap.Control.DrawFeature(vectorLayer,
SuperMap.Handler.Box, { “handlerOptions”: { “cursorCSS”: “crosshair” } });

 drawFeaturequery.events.on({

“featureadded”:
drawCompletedquery });

2:写击事件，每次点击的时候都要清除上一次的查询，然后开始绘制方框：

              function drawGeometry() {

         markerLayer.clearMarkers();

drawFeaturequery.activate();

    }

3：根据需要查询的条件查询数据：

              function drawCompletedquery(obj) {

        drawFeaturequery.deactivate();

        var feature = obj.feature;

        feature.style = styleque;

        vectorLayer.addFeatures(feature);

        var queryBounds = feature.geometry.bounds;



        var queryParam, queryByBoundsParams, queryService;

        queryParam = new

SuperMap.REST.FilterParameter({ name: “P15医疗服务_point_1@ChronicDisease” });

        queryByBoundsParams = new SuperMap.REST.QueryByBoundsParameters({

queryParams: [queryParam], bounds: queryBounds });

        queryService = new

SuperMap.REST.QueryByBoundsService(url, {

            eventListeners: {

                "processCompleted": processCompleted,

                "processFailed": processFailed

            }

        });

queryService.processAsync(queryByBoundsParams);

    }

4：获取上一步查询到的数据，然后设置标记点，再设置点击标记点事件，将详细信息显示出现：

代码截图：

5：当点击标记点时，如果想要出现弹框显示详细信息，那么则需要：

              function openInfoWin() {

        closeInfoWin()

        var marker = this;

        var lonlat = marker.getLonLat();

        var contentHTML = "<div style='font-size:.8em; opacity: 0.8;

overflow-y:hidden;text-align:left;padding-left: 20px;’>";

        contentHTML += "<div

class=‘row pt-2’>" + “单位名称：” + marker.NAME + “” + “

• “”;

        var size = new SuperMap.Size(0, 33);
  
        var offset = new SuperMap.Pixel(0, -size.h);
  
        var icon = new SuperMap.Icon("/SuperMap/theme/images/marker.png", size, offset);
  
        var popup = new SuperMap.Popup.FramedCloud("popwin",
  
        new SuperMap.LonLat(lonlat.lon, lonlat.lat),
  
        null,
  
        contentHTML,
  
        icon,
  
        true);
  
  
  
        infowin = popup;
  
        map.addPopup(popup);
  
    }
  

6：最后在浏览器看一下效果：