1 <!DOCTYPE html> 2 <html> 3 4 <head> 5 <meta charset="UTF-8"> 6 <title></title> 7 8 <link rel="stylesheet" href="http://localhost/arcgis_js_api/library/3.14/3.14/esri/css/esri.css"> 9 <script src="http://localhost/arcgis_js_api/library/3.14/3.14/init.js"></script> 10 <script src="js/jsapi_vsdoc12_v38.js"></script> 11 </head> 12 <style> 13 #map1 { 14 width: 20px; 15 height: 20px; 16 } 17 18 #map2 { 19 width: 20px; 20 height: 20px; 21 } 22 </style> 23 24 <script> 25 var map; 26 require(["esri/map", "esri/toolbars/navigation","esri/dijit/OverviewMap", "dojo/domReady!"], function(Map, Navigation,OverviewMap) { 27 map = new Map("GHL", { 28 zoom: 14, 29 basemap: "topo", 30 logo: false, 31 center: [-122.445, 37.752], 32 }); 33 var navToolbar = new Navigation(map); 34 35 dojo.connect(map, "onMouseMove", function(e) { 36 var mp = e.mapPoint; 37 var sp = e.screenPoint; 38 dojo.byId("map1").innerHTML = mp.x + "/" + sp.x; 39 dojo.byId("map2").innerHTML = mp.y + "/" + sp.y; 40 }) 41 dojo.require("esri.dijit.OverviewMap"); 42 var button1 = dojo.byId("btn1"); 43 var button2 = dojo.byId("btn2"); 44 var button3 = dojo.byId("btn3"); 45 var button4 = dojo.byId("btn4"); 46 var button5 = dojo.byId("btn5"); 47 var button6 = dojo.byId("btn6"); 48 var button7 = dojo.byId("btn7"); 49 var button8 = dojo.byId("btn8"); 50 var button9 = dojo.byId("btn9"); 51 dojo.connect(button1, "click", function(evt) { 52 navToolbar.activate(esri.toolbars.Navigation.ZOOM_IN); 53 }); 54 dojo.connect(button2, "click", function(evt) { 55 navToolbar.activate(esri.toolbars.Navigation.ZOOM_OUT); 56 }); 57 dojo.connect(button3, "click", function(evt) { 58 map.panUp(); 59 }); 60 dojo.connect(button4, "click", function(evt) { 61 map.panDown(); 62 }); 63 dojo.connect(button5, "click", function(evt) { 64 map.panLeft(); 65 }); 66 dojo.connect(button6, "click", function(evt) { 67 map.panRight(); 68 }); 69 dojo.connect(button7, "click", function(evt) { 70 navToolbar.zoomToFullExtent(); 71 }); 72 dojo.connect(button8, "click", function(evt) { 73 navToolbar.activate(esri.toolbars.Navigation.PAN); 74 }); 75 dojo.connect(button9, "click", function(evt) { 76 var overviewMap = new esri.dijit.OverviewMap({ 77 map: map, 78 visible: true 79 }); 80 overviewMap.startup(); 81 }); 82 }); 83 </script> 84 85 <body> 86 <div id="GHL" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:‘center‘" style="padding:0"> 87 </div> 88 <div id="map1"></div> 89 <div id="map2"></div> 90 <button id="btn1">放大</button> 91 <button id="btn2">缩小</button> 92 <button id="btn3">向上</button> 93 <button id="btn4">向下</button> 94 <button id="btn5">左移</button> 95 <button id="btn6">右移</button> 96 <button id="btn7">全屏</button> 97 <button id="btn8">拖动</button> 98 <button id="btn9">鹰眼</button> 99 </body> 100 101 </html>
1.主要注意引用即可
require(["esri/map", "esri/toolbars/navigation","esri/dijit/OverviewMap", "dojo/domReady!"], function(Map, Navigation,OverviewMap)
2.鹰眼和其他不同
esri/dijit/OverviewMap
原文：http://www.cnblogs.com/joegaohuanlin/p/5152026.html