four application：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
four application：geocoder widget的更多相关文章
- ALSA声卡驱动中的DAPM详解之五：建立widget之间的连接关系
前面我们主要着重于codec.platform.machine驱动程序中如何使用和建立dapm所需要的widget,route,这些是音频驱动开发人员必须要了解的内容,经过前几章的介绍,我们应该知道如 ...
- Android学习笔记：Home Screen Widgets（2）：关于Widget
通过widget定义,我们在widget列表中看到了我们的TestWidget.当我们拖拽widget到主页时,假设在appwidet-provider中定义了android:configure的ja ...
- 第15.46节、PyQt显示部件：OpenGL Widget部件功能简介及使用案例
专栏:Python基础教程目录 专栏:使用PyQt开发图形界面Python应用 专栏:PyQt入门学习 老猿Python博文目录 老猿学5G博文目录 一.概述 OpenGL Widget部件是一个Op ...
- Android学习笔记：Home Screen Widgets（1）：大约Widget
什么是Home Screen Widgets Home screen Widget即称为小工具或者中文小工具,是显示在主页上的views,通过后台进程更新view的数据. Android由AppWid ...
- 加载程序到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 ...
- C#Application：Exit与ExitThread 解释
Application.Exit(); 方法停止在所有线程上运行的所有消息循环,并关闭应用程序的所有窗口 Application.ExitThread 方法 退出当前线程上的消息循环,并关闭该线程上的 ...
- 第三十九章、PyQt显示部件：OpenGL Widget部件功能简介及使用其显示图片
专栏:Python基础教程目录 专栏:使用PyQt开发图形界面Python应用 专栏:PyQt入门学习 老猿Python博文目录 老猿学5G博文目录 一.概述 OpenGL Widget部件是一个Op ...
- UE4笔记：利用Widget设计一个切换材质功能
UE4引擎中的Widget蓝图是一个重要的工具,可用于场景中的页面叠加,镜头绑定,场景切换等多处地方,在这里笔者介绍一种利用控件蓝图和场景中物体进行信息交互的方法,直观的体现就是进行物体的材质切换. ...
- 我的Android 4 学习系列之创建应用程序和Activity：Manifest、Application、Activity
目录 介绍Android应用程序组件,以及使用这些组件构建的各种Android应用程序 Android应用程序的生命周期 如何创建应用程序Manifest 如何使用外部资源提供对位置.语言和硬件配置的 ...
随机推荐
- Ubuntu vsftp复制文件到远端时错误，Permission denied
Ubuntu 下复制文件到远端时错误,Permission denied 失败原因如下: (1)vsftp默认配置不允许上传文件 解决办法:修改配置文件 vi /etc/vsftpd.conf. 将& ...
- linux无密登录
ssh-keygen -t rsa ssh-copy-id -i ~/.ssh/id_rsa.pub bigdata@cor2
- Python Numpy ValueError: data type must provide an itemsize
天朝网络锁国,百度找了半个小时找不出来原因,只能谷歌 谷歌第一条就是,顿时感觉幸福感来的太突然 原因是输入的矩阵均是字符串(从文件里读的) 那么就需要批量转数组,一行一行的转. 下面是我的代码: ro ...
- POJ 1426 Find The Multiple && 51nod 1109 01组成的N的倍数 (BFS + 同余模定理)
Find The Multiple Time Limit: 1000MS Memory Limit: 10000K Total Submissions: 21436 Accepted: 877 ...
- 在Xcode中使用Git进行源码版本控制(转)
http://www.cocoachina.com/ios/20140524/8536.html
- 定位frame中的元素
场景 处理frame需要用到2个方法,分别是switch_to_frame(name_or_id_or_frame_element)和switch_to_default_content() 如何理解这 ...
- staitc_cast,const_cast....
#include <iostream> using namespace std; int main() { //1.const_cast //const int a = 10; //int ...
- 【BZOJ4974】字符串大师 KMP
[BZOJ4974]字符串大师 Description 一个串T是S的循环节,当且仅当存在正整数k,使得S是T^k(即T重复k次)的前缀,比如abcd是abcdabcdab的循环节.给定一个长度为n的 ...
- 单片机c语言教程:C51循环语句
单片机c语言教程第十三课 C51循环语句 循环语句是几乎每个程序都会用到的,它的作用就是用来实现需要反复进行多次的操 作.如一个 12M 的 51 芯片应用电路中要求实现 1 毫秒的延时,那么就要执行 ...
- Xamarin.Forms学习之初
微软的Build 2016结束的有段时间了,对于一个简单的小屌丝程序员--我来说,关注最大的无疑是Xamarin的免费(开源什么的让大神们上吧),内心激动啊.大会结束的周末我就迫不及待的安装了,然后. ...