four application：geocoder widget

浏览数：45 / 时间：2015年06月11日

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
    <title></title>
    <link rel="stylesheet" href="http://js.arcgis.com/3.13/esri/css/esri.css">
    <style>
      html, body, #map {
        height: 100%;
        width: 100%;
        margin: 0;
        padding: 0;
      }
      #search {
        display: block;
        position: absolute;
        z-index: 3;
        top: 20px;
        left: 75px;
      }
      .spotlight {
        z-index:-1;
        position:absolute;
        left:50%;
        top:50%;
        border-radius:50%;
        opacity:0;
        box-shadow:
        inset rgba(0,0,0,0.25) 0px 0px 20px 20px,
        rgba(0,0,0,0.25) 0px 0px 0px 1000px;
        transition:all 1000ms;
        -moz-transition:all 1000ms;
        -webkit-transition:all 1000ms;
      }
      .spotlight-active {
        z-index:2;
        opacity:1;
      }
    </style>
    
    <script src="http://js.arcgis.com/3.13/"></script>
    <script>
      require([
        "esri/map",
        "esri/dijit/Geocoder",
        "esri/graphic",
        "esri/symbols/SimpleMarkerSymbol",
        "esri/geometry/screenUtils",
        "dojo/dom",
        "dojo/dom-construct",
        "dojo/query",
        "dojo/_base/Color",
        "dojo/domReady!"
      ], function(Map, Geocoder, Graphic, SimpleMarkerSymbol, screenUtils, dom, domConstruct, query, Color) {
        // create a map and instance of the geocoder widget here
        var map = new Map("map", {
          basemap: "topo", 
          center: [ -100, 40 ], 
          zoom: 10
        });
        var geocoder =  new Geocoder({
          arcgisGeocoder: {
            placeholder: "Find a place"
          }, 
          autoComplete: true,
          map: map
        }, dom.byId("search"));

        map.on("load", enableSpotlight);

        geocoder.on("select", showLocation);
        geocoder.on("clear", removeSpotlight);

        function showLocation(evt) {
          map.graphics.clear();
          var point = evt.result.feature.geometry;
          var symbol = new SimpleMarkerSymbol().setStyle(
            SimpleMarkerSymbol.STYLE_SQUARE).setColor(
            new Color([255,0,0,0.5])
          );
          var graphic = new Graphic(point, symbol);
          map.graphics.add(graphic);

          map.infoWindow.setTitle("Search Result");
          map.infoWindow.setContent(evt.result.name);
          map.infoWindow.show(evt.result.feature.geometry);

          var spotlight = map.on("extent-change", function(extentChange) {
            var geom = screenUtils.toScreenGeometry(map.extent, map.width, map.height, extentChange.extent);
            var width = geom.xmax - geom.xmin;
            var height = geom.ymin - geom.ymax;

            var max = height;
            if ( width > height ) {
                max = width;
            }

            var margin = ‘-‘ + Math.floor(max/2) + ‘px 0 0 -‘ + Math.floor(max/2) + ‘px‘;

            query(".spotlight").addClass("spotlight-active").style({
              width: max + "px",
              height: max + "px",
              margin: margin
            });
            spotlight.remove();
          });
        }

        function enableSpotlight() {
          var html = "<div id=‘spotlight‘ class=‘spotlight‘></div>"
          domConstruct.place(html, dom.byId("map_container"), "first");
        }

        function removeSpotlight() {
          query(".spotlight").removeClass("spotlight-active");
          map.infoWindow.hide();
          map.graphics.clear();
        }
      });
    </script>
  </head>
  <body class="soria">
    <div id="search"></div>
    <div id="map"></div>            
  </body> 
</html>