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

four application：geocoder widget的更多相关文章

  1. ALSA声卡驱动中的DAPM详解之五：建立widget之间的连接关系

    前面我们主要着重于codec.platform.machine驱动程序中如何使用和建立dapm所需要的widget,route,这些是音频驱动开发人员必须要了解的内容,经过前几章的介绍,我们应该知道如 ...

  2. Android学习笔记：Home Screen Widgets（2）：关于Widget

    通过widget定义,我们在widget列表中看到了我们的TestWidget.当我们拖拽widget到主页时,假设在appwidet-provider中定义了android:configure的ja ...

  3. 第15.46节、PyQt显示部件：OpenGL Widget部件功能简介及使用案例

    专栏:Python基础教程目录 专栏:使用PyQt开发图形界面Python应用 专栏:PyQt入门学习 老猿Python博文目录 老猿学5G博文目录 一.概述 OpenGL Widget部件是一个Op ...

  4. Android学习笔记：Home Screen Widgets（1）：大约Widget

    什么是Home Screen Widgets Home screen Widget即称为小工具或者中文小工具,是显示在主页上的views,通过后台进程更新view的数据. Android由AppWid ...

  5. 加载程序到android虚拟机报错： android.widget.RelativeLayout cannot be cast to android.widget.Button

    05-23 02:53:48.416: E/Trace(875): error opening trace file: No such file or directory (2) 05-23 02:5 ...

  6. C#Application：Exit与ExitThread 解释

    Application.Exit(); 方法停止在所有线程上运行的所有消息循环,并关闭应用程序的所有窗口 Application.ExitThread 方法 退出当前线程上的消息循环,并关闭该线程上的 ...

  7. 第三十九章、PyQt显示部件：OpenGL Widget部件功能简介及使用其显示图片

    专栏:Python基础教程目录 专栏:使用PyQt开发图形界面Python应用 专栏:PyQt入门学习 老猿Python博文目录 老猿学5G博文目录 一.概述 OpenGL Widget部件是一个Op ...

  8. UE4笔记：利用Widget设计一个切换材质功能

    UE4引擎中的Widget蓝图是一个重要的工具,可用于场景中的页面叠加,镜头绑定,场景切换等多处地方,在这里笔者介绍一种利用控件蓝图和场景中物体进行信息交互的方法,直观的体现就是进行物体的材质切换. ...

  9. 我的Android 4 学习系列之创建应用程序和Activity：Manifest、Application、Activity

    目录 介绍Android应用程序组件,以及使用这些组件构建的各种Android应用程序 Android应用程序的生命周期 如何创建应用程序Manifest 如何使用外部资源提供对位置.语言和硬件配置的 ...

随机推荐

  1. Win10 Anaconda下TensorFlow-GPU环境搭建详细教程（包含CUDA+cuDNN安装过程）（转载）

    win7(win10也适用)系统安装GPU/CPU版tensorflow Win10 Anaconda下TensorFlow-GPU环境搭建详细教程(包含CUDA+cuDNN安装过程) 目录 2.配置 ...

  2. iptables进阶

    ptables简介 iptables是基于内核的防火墙,功能非常强大,iptables内置了filter,nat和mangle三张表. filter负责过滤数据包,包括的规则链有,input,outp ...

  3. Java bean 是个什么概念？

    Java语言欠缺属性.事件.多重继承功能.所以,如果要在Java程序中实现一些面向对象编程的常见需求,只能手写大量胶水代码.Java Bean正是编写这套胶水代码的惯用模式或约定.这些约定包括getX ...

  4. PHP : ActiveRecord实现示例

    先简单介绍一下Active Record: Active Record(中文名:活动记录)是一种领域模型模式,特点是一个模型类对应关系型数据库中的一个表,而模型类的一个实例对应表中的一行记录.Acti ...

  5. [浪风分享]App必死 Web永生 看Web的前世今生 必会卷土重来

    当我们回顾技术的演变历史时,我们也应该关注技术演变的背后逻辑. 几年前,美国的<连线>杂志发表了“Web已死,Internet永生”的文章,由于作者之一是长尾理论的提出者克里斯.安德森(C ...

  6. 006android初级篇之jni数据类型映射

    JNI是Java Native Interface的缩写,它提供了若干的API实现了Java和其他语言的通信(主要是C&C++) 使用JNI的副作用 一旦使用JNI,JAVA程序就丧失了JAV ...

  7. 大话DFT频谱分析（并不是我的话）

    有限长信号DFT结果的频谱泄露 提出问题 依照我们在"信号与系统"这门课建立的印象,不管如何频率的连续正弦信号,其频谱应当是两根笔直的谱线(含负频率) 但是,当我们把一段正弦信号採 ...

  8. 前端 为什么我选择用框架而不是Jquery

    对于很多习惯用Jquery的前端甚至后端,都很不解,为什么不用Jquery而是框架.觉得框架学起来麻烦,成本高,今天我以我浅薄的知识来总结一下为什么前台开发选择用框架: 前台开发,主要的性能是卡在回流 ...

  9. iOS CGAffineTransform你了解多少？

    CGAffineTransform介绍 概述 CGAffineTransform是一个用于处理形变的类,其可以改变控件的平移.缩放.旋转等,其坐标系统采用的是二维坐标系,即向右为x轴正方向,向下为y轴 ...

  10. Vuejs2.0 cnpm 安装脚手架项目模板

    NPM 方法 因为npm 安装速度慢,所以我们可以使用淘宝的镜像cnpm 再安装之前 我们需要先安装nodejs  因为vue框架也是基于nodeljs 下载地址:http://nodejs.cn/d ...