2014-01-19 98 views
1

請檢查以下代碼的正確性。我正嘗試在基於ArcGIS Javascript API 3.8構建的Web地圖中顯示Google底圖(混合)。我有一個Google Maps API密鑰,該密鑰在此示例中被刪除。到目前爲止,我已閱讀文檔http://gmaps-utility-gis.googlecode.com/svn/tags/agsjs/1.05/docs/googlemapslayer/examples.html,但我仍然卡住。將Google底圖添加到ArcGIS Javascript API

<!DOCTYPE html> 
<html> 
    <head> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
    <!--The viewport meta tag is used to improve the presentation and behavior of the samples 
     on iOS devices--> 
    <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"> 
    <title></title> 

    <link rel="stylesheet" href="http://js.arcgis.com/3.8/js/dojo/dijit/themes/claro/claro.css"> 
    <link rel="stylesheet" href="http://js.arcgis.com/3.8/js/esri/css/esri.css" /> 
    <link rel="stylesheet" href="css/layout.css"/> 

    <script> 
    var djConfig = { 
       parseOnLoad: true, 
       packages: [{ 
       "name": "agsjs", 
       "location": 'https://gmaps-utility-gis.googlecode.com/svn/tags/agsjs/2.04/xbuild/agsjs' // for xdomain load 
       }] 
      }; 
    </script> 

    <script src="http://maps.google.com/maps?file=api&amp;v=3&amp;key=" type="text/javascript"></script> 
    <script src="http://js.arcgis.com/3.8/"></script> 

    <script> 
     dojo.require("dijit.layout.BorderContainer"); 
     dojo.require("dijit.layout.ContentPane"); 
     dojo.require("esri.map"); 
     dojo.require("agsjs.layers.GoogleMapsLayer"); 
     dojo.require("dijit.layout.TabContainer"); 
     dojo.require("esri.dijit.Legend"); 

     var map, googleLayer; 

     function init() { 
     map = new esri.Map("map", { 
      center: [-82.65862, 29.820309], 
      zoom: 16 
     }); 

     googleLayer = new agsjs.layers.GoogleMapsLayer({ 
       id: 'google', 
       apiOptions: { 
        v: '3' 
       }, 
     }); 

     map.addLayer(googleLayer); 

     } 

     dojo.ready(init); 

    </script> 
    </head> 

    <body class="claro"> 
    <div id="mainWindow" 
     data-dojo-type="dijit.layout.BorderContainer" 
     data-dojo-props="design:'headline', gutters:false" 
     style="width:100%; height:100%;"> 

     <div id="header" 
      data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'top'"> 
     Tool 
     </div> 
     <div data-dojo-type="dijit.layout.ContentPane" id="leftPane" data-dojo-props="region:'left'"> 
     <div data-dojo-type="dijit.layout.TabContainer"> 
      <div data-dojo-type="dijit.layout.ContentPane" data-dojo-props="title:'Legend', selected:true"> 
      <div id="legendDiv"></div> 
      </div> 

      <div data-dojo-type="dijit.layout.ContentPane" data-dojo-props="title:'Identified Issues'" ></div> 
     </div> 

     <div id="map" data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'center'"></div> 

     <div id="footer" data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'bottom'"></div> 

    </div> 
    </body> 

</html> 

回答

2

我使用以下腳本將Google地圖添加到我的ArcGIS應用中。有一些錯誤(使用Chrome瀏覽器時會出現街景),但總體來說效果不錯。在Chrome中修復Google Basemaps div的z-index問題。

Google Maps Layer for ArcGIS JavaScript API

1

不幸的是,agsjs小部件不過去的ArcGIS的JavaScript API,3.3版本。 此外,街景將不再起作用。你不能再抓住pegman控制,並將他傳播到esri的地圖層以上,以便使用他。當谷歌視覺刷新不再是一個選項時,這停止工作。

相關問題