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);

原文地址:https://www.cnblogs.com/net064/p/10309239.html

时间: 2024-12-14 13:34:54

ArcGIS API for js InfoWindow的相关文章

ArcGIS API for JS的一般编码习惯

1.引用claro.css和esri.css <link rel="stylesheet" href="http://js.arcgis.com/3.10/js/dojo/dijit/themes/claro/claro.css"> <link rel="stylesheet" href="http://js.arcgis.com/3.10/js/esri/css/esri.css"> 2.页面布局 &

ArcGIS Api for Js基础

1.创建ArcGISDynamicMapServiceLayer var demographicsLayerURL = "http://sampleserver6.arcgisonline.com/arcgis/rest/services/Census/MapServer"; var demographicsLayerOptions = { "id": "demographicsLayer", "opacity": 0.8,

arcgis api for js实现点击文字内容获取所对应的点高亮显示。

arcgis api for js 中经常会遇到想要点击文本就能获取所对应的点并高亮显示.其原理与搜索框内搜索属性值并高亮显示在地图中的原理是一样的.其核心的观念就是将所点击的文本值获取并替换给搜索框所要传入的值.即可得到我们的目的. 代码如下: var name;//声明name为全局变量后面代替搜索框要传入的值 $(function(){ $('.test2 a').click(function(){ $(this).parent().each(function () {//移除其余非点中状

arcgis api for js入门开发系列二不同地图服务展示(含源代码)

上一篇介绍了arcgis api离线部署,这篇开始正式介绍arcgis api for js开发:想要学习webgis开发,首先得熟悉了解前端技术,比如界面布局设计的html+css,核心的是javascript(js),arcgis api就是js写的,就是说想要开发gis功能前提下,你得熟悉了解js,不然你连源代码都看不懂.在这里,推荐esri官网的arcgis api for js:https://developers.arcgis.com/javascript/3/jsapi/:里面详细

arcgis api for js共享干货系列之二自定义Navigation控件样式风格

arcgis api for js默认的Navigation控件样式风格如下图: 这样的风格不能说不好,各有各的爱好,审美观,这里也不是重点,这里的重点是如何自定义一套自己喜欢的样式风格呢:自己自定义一个NavigationControl控件类,最终实现的效果如下图: 思路如下:其实就是在网上参照天地图或者谷歌地图的Navigation风格样式,下载它们的图片模版,然后自己创建div来实现图片的缩放平移.全图.左右上下平移等等地图导航功能: Navigation图片目录如下: 调用函数: //显

arcgis api for js之echarts开源js库实现地图统计图分析

前面写过一篇关于arcgis api for js实现地图统计图的,具体见:http://www.cnblogs.com/giserhome/p/6727593.html 那是基于dojo组件来实现图表统计的,实现的效果一般般:所以,本篇利用arcgis api for js结合echarts实现统计图效果,效果比之前好看,效果图如下: 实现的思路如下: 1.自定义气泡窗口ChartInfoWindow,继承InfoWindowBase,为了echarts统计图表展示在自定义的气泡窗口里面:自定

Arcgis API for JS——打印控件乱码

在通过Arcgis API for JS编写打印控件进行地图下载时,总发现地图字体乱码,如下图: 解决方法: 在装有ArcGIS Server,要调用服务的电脑或服务器上找到下图文件夹 原文地址:https://www.cnblogs.com/tangguobo/p/10045911.html

vue-cli&amp;webpack&amp;arcgis API For JS的天坑之路(一)

写在前面的话(背景交代) 最近参加esri比赛,但是又想趁机接触前端最新的一些框架和技术,所以,毅然决然的踏上了这个天坑之路.我现在只是成功的把地图渲染出来了,所以,我也不知道会不会有天坑二的出现. gituhb项目地址 新建vue-cli工程 如何用vue-cli + webpack构建一个工程,网上一大堆的代码,我就不赘述了.比如这个就是很好地入门文章,先要做的还是要把vue-cli和webpack的模块划分好,框架搭建好,然后才是我要说的,地图部分. 如何在vue-cli,webpack中

arcgis api for js入门开发系列十七在线地图(天地图、百度地图、高德地图)

本篇主要讲述的是利用arcgis api加载互联网在线地图服务资源,简单封装一个底图切换控件js,在线地图包括:天地图.高德地图以及百度地图,效果图如下: 实现思路: 1.简单的底图切换控件map.LayerSwitcherToolbar.js文件,里面自定义加载天地图.高德地图以及百度地图类,其实都是继承TiledMapServiceLayer类: (1)高德地图: //高德地图图层扩展 GAODELayer = DObject({ id:null, esriLayer: null, esri