arcgis for js 开发系列之地图气泡窗

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>Simple Map</title>
    <link rel="stylesheet" type="text/css"
          href="http://127.0.0.1/arcgis_js_api/library/3.16/3.16/dijit/themes/tundra/tundra.css"/>
    <link rel="stylesheet" type="text/css" href="http://127.0.0.1/arcgis_js_api/library/3.16/3.16/esri/css/esri.css"/>
    <script type="text/javascript" src="http://127.0.0.1/arcgis_js_api/library/3.16/3.16/init.js"></script>
    <style type="">
        .esriPopup .titleButton.maximize {
            display: none;
        }

        .esriPopup a {
            display: none;
        }

        .esriPopup .titlePane {
            background-color: #0c86af;
        }
    </style>
    <script type="text/javascript">
        /*function init() {
            var map = new esri.Map("mapDiv");
            var layer = new esri.layers.ArcGISDynamicMapServiceLayer("http://localhost:6080/arcgis/rest/services/SampleWorldCities/MapServer");
            map.addLayer(layer);
        }
       dojo.addOnLoad(init);*/
        /* var uEzMap ;
         dojo.require("esri.map");
         function init() {
             var myMap = new esri.Map("mapDiv");
             var myTiledMapServiceLayer = new esri.layers.ArcGISDynamicMapServiceLayer("http://localhost:6080/arcgis/rest/services/SampleWorldCities/MapServer");
             myMap.addLayer(myTiledMapServiceLayer);
             myMap.on("click", function(e){
                 console.log(e.page);
             });
         }
         dojo.addOnLoad(init);*/
        require([
            "esri/map", "esri/geometry/Point", "esri/SpatialReference", "esri/renderers/HeatmapRenderer", "esri/layers/FeatureLayer",
            "esri/symbols/SimpleMarkerSymbol", "esri/graphic", "esri/InfoTemplate"], function (Map, Point, SpatialReference, SimpleMarkerSymbol, Graphic, InfoTemplate) {
            map = new Map("map", {
                basemap: "osm",
                center: [117.12277857421876, 36.632967052981364],
                zoom: 10,
            });
            map.on("load", function () {
                ShowLocation(117.12277857421876, 36.632967052981364);
            })

            function ShowLocation(x, y) {
                /*var point = new Point(x, y, new SpatialReference({wkid: 4326}));
                var simpleMarkerSymbol = new SimpleMarkerSymbol();
                var graphic = new Graphic(point, simpleMarkerSymbol);

                map.graphics.add(graphic);*/

                var h = "<span style='color: red'>fdsa</span>"
                var h1 = "<img onclick='alert(213);' src='http://lbsyun.baidu.com/jsdemo/img/fox.gif' width='50' height='50' style='vertical-align: middle'>"
                var attr = {"Xcoord":h1,"Ycoord":h,"Plant":"Mesa Mint"};
                var infoTemplate = new esri.InfoTemplate("&nbsp;","Latitude: ${Ycoord} <br/>Longitude: ${Xcoord} <br/>Plant Name:${Plant}");
                var symbol = new esri.symbol.PictureMarkerSymbol("http://lbsyun.baidu.com/jsdemo/img/fox.gif", 80, 80);
                var pt = new Point(x, y, new SpatialReference({wkid: 4326}))
                var graphic = new esri.Graphic(pt, symbol, attr,infoTemplate);
                map.graphics.add(graphic);

            }
        })

    </script>
</head>
<body class="tundra">
<div id="map" style="width:900px; height:600px; border:1px solid #000;"></div>
<p id="info"></p>
</body>
</html>
arcgis for js 开发系列之地图气泡窗

猜你喜欢
