four applications: geocoder widget

<!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>

dom.byId("search")： id search 。

map.on("load", enableSpotlight)： map load 。

query(".spotlight").addClass("spotlight-active").style(）： class spotlight class spotlight-active， 。

query(".spotlight").removeClass("spotlight-active")： class spotlight class spotlight-active

이 내용에 흥미가 있습니까?

현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:

Pre-Query Samples

Validate the current query criteria or provide additional query criteria programmatically, just before sending the SELEC...

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.

CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.

four applications: geocoder widget

좋은 웹페이지 즐겨찾기