ArcGIS API for js InfoWindow
说明:有关该示例中怎么引用部署在iis上的离线arcgis api请参考我前面的博文
1、运行效果

2、HTML代码
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
<title>Non graphic info window</title> <link rel="stylesheet" type="text/css" href="http://localhost/arcgis_js_api/library/3.3/jsapi/js/esri/css/esri.css" />
<style>
html, body, #map{
height: 100%;
margin: 0;
padding: 0;
} .esriPopup .titlePane
{
background-color: rgba(64,64,64,0.8); }
.esriPopup .contentPane
{
background-color: rgba(64,64,64,0.8);
color: #FFFFFF;
}
.esriPopup .actionsPane
{
background-color: rgba(64,64,64,0.8);
}
</style> <script type="text/Javascript" src="http://localhost/arcgis_js_api/library/3.3/jsapi/init.js"></script>
<script>
var map;
require([
"esri/map" ], function (
Map
) {
map = new esri.Map("map", {
basemap: "satellite",
center: [-116.96, 33.184],
zoom: 7
}); map.on("load", function () {
map.infoWindow.resize(250, 100);
}); map.on("click", addPoint); function addPoint(evt) {
var latitude = evt.mapPoint.getLatitude();
var longitude = evt.mapPoint.getLongitude();
map.infoWindow.setTitle("Coordinates");
map.infoWindow.setContent(
'<div style="background-color:lightblue;color:white;">' +
"lat/lon : " + latitude.toFixed(2) + ", " + longitude.toFixed(2) +
"<br>screen x/y : " + evt.screenPoint.x + ", " + evt.screenPoint.y+'</div>'
);
map.infoWindow.show(evt.mapPoint, map.getInfoWindowAnchor(evt.screenPoint));
}
}); </script>
</head>
<body>
<div id="map"></div>
</body>
</html>
其中的代码
map = new esri.Map("map", {
basemap: "satellite",
center: [-116.96, 33.184],
zoom: 7
});
也可以替换为下面的形式:
map = new esri.Map("map", { center: [-116.96, 33.184], zoom: 4 });
MyTiledMapServiceLayer = new esri.layers.ArcGISTiledMapServiceLayer
("http://localhost/arcgis/rest/services/DZDT2012/MapServer");
map.addLayer(MyTiledMapServiceLayer);
ArcGIS API for js InfoWindow的更多相关文章
- arcgis api for js 地图查询
arcgis api for js入门开发系列四地图查询(含源代码) 上一篇实现了demo的地图工具栏,本篇新增地图查询功能,包括属性查询和空间查询两大块,截图如下: 属性查询效果图: 空间查询效 ...
- arcgis api for js入门开发系列四地图查询(含源代码)
备注:由于实现本篇功能的需求,修改了地图数据的dlsearch.mxd,然后更新了地图服务,需要的在文章最后有提供最新的mxd以及源代码下载的 上一篇实现了demo的地图工具栏,本篇新增地图查询功能, ...
- arcgis api for js入门开发系列一arcgis api离线部署
在我的GIS之家QQ群里,很多都是arcgis api for js开发的新手,他们一般都是GIS专业的学生,或者从计算机专业刚刚转向来的giser,他们难免会遇到各种webgis开发的简单问题,由于 ...
- arcgis api for js入门开发系列十一地图统计图
上一篇实现了demo的叠加SHP图层,本篇新增地图统计图,截图如下: 地图统计图实现的思路如下:利用拓展arcgis api的js文件(MapChartGraphic.js以及MapChartGrap ...
- arcgis api for js入门开发系列二十打印地图的那些事
前面我写过关于利用arcgis api for js打印地图的,但是打印地图服务都是基于arcgis server发布的,arcgis api加载在线地图,比如天地图.百度地图.高德地图等,底图都是打 ...
- 转:arcgis api for js入门开发系列四地图查询
原文地址:arcgis api for js入门开发系列四地图查询 arcgis for js的地图查询方式,一般来说,总共有三种查询方式:FindTask.IdentifyTask.QueryTas ...
- Arcgis API for JS——打印控件乱码
在通过Arcgis API for JS编写打印控件进行地图下载时,总发现地图字体乱码,如下图: 解决方法: 在装有ArcGIS Server,要调用服务的电脑或服务器上找到下图文件夹
- ArcGIS API for js Legend(图例)
1.说明 有关怎么把ArcGIS API for js部署到IIS上,请参考我上面的写的博客https://www.cnblogs.com/net064/p/10302660.html 2.运行效果 ...
- arcgis api for js 4.X 出现跨域问题
arcgis api for js 4.X 出现跨域问题 XMLHttpRequest cannot load http://localhost/4.3/4.3/esri/workers/mutabl ...
随机推荐
- 详细理解javascript中的强制类型转换
将值从一种类型转换为另一种类型通常称为类型转换,这是显式的情况:隐式的情况称为强制类型转换,JavaScript 中的强制类型转换总是返回标量基本类型值,如字符串.数字和布尔值. 如何理解: 类型转换 ...
- 模式识别hw2-------基于matconvnet,用CNN实现人脸图片性别识别
主要来源模式识别课程大作业,本文首先感谢当初的助教和一起完毕作业的队友 matconvnet在matlab下封装了CNN常见算法,网址http://www.vlfeat.org/matconvnet/ ...
- 自己定义JSTL函数
因为 jstl 函数 字符串替换不支持正則表達式 所以想用java String的 replaceAll进行替换 须要自己定义 jstl函数 首先写类 package com.salesmanb2b. ...
- PS 如何附加增效工具.
编辑-首选项-增效工具,选择目标增效工具文件夹
- react-native 中使用 mobx
1. 介绍 1.1. 原理 React的render是 状态 转化为树状结构的渲染组件的方法而MobX提供了一种存储,更新 状态 的方法React 和 MobX都在优化着软件开发中相同的问题.Reac ...
- 【Java】Java_18 方法
方法(Method) 设计方法的原则:方法的本意是功能块,就是实现某个功能的语句块的集合. 我们设计方法的时候,最好保持方法的原子性,就是一个方法只完成1个功能,这样利于我们后期的扩展 方法的要点 ...
- storm - 经常使用命令
1.提交Topologies 命令格式:storm jar [jar路径] [拓扑包名.拓扑类名][stormIP地址][stormport][拓扑名称][參数] eg: storm jar /hom ...
- [linux]vmstat命令详解-显示虚拟内存状态
本文转载于http://man.linuxde.net/vmstat 前言:Linux系统的内存分为物理内存和虚拟内存两种.物理内存是真实的,也就是物理内存条上的内存.而虚拟内存则是采用硬盘空间补充物 ...
- kafka 0.8.1 新producer 源码简单分析
1 背景 最近由于项目需要,需要使用kafka的producer.但是对于c++,kafka官方并没有很好的支持. 在kafka官网上可以找到0.8.x的客户端.可以使用的客户端有C版本客户端,此客户 ...
- wps如何设置文字环绕图片
wps在编辑一些文字的时候,经常会插入一些图片,但是插入图片后,文字和图片就被分离开来,整体显得没有那么美观整洁,这个时候就用到了软件的文字环绕功能,那么具体如何设置呢,接下来看教程. 首先打开wps ...