我们没有Googlemap许可证。我们拥有ESRI 10.1服务器许可证。
是否可以免费在600X600尺寸的网络应用中添加googlemap？
我们如何将googlemap添加到基于ESRI javascript网络的应用程序中？我正在使用http://js.arcgis.com/3.14/。我发现网上有一些样本可用于将goolemap添加到http://js.arcgis.com/3版本中。如果我将该代码添加到jsapi 3.14，它将无法正常工作。也会得到很多脚本错误。任何帮助请......
3.Code粘贴在下面。哪个是完美展示bing和动态地图。我还需要在此添加googlemap。有谁可以帮助我？
<!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>Basemap Gallery - Bing Maps</title>
<link rel="stylesheet" href="http://js.arcgis.com/3.14/dijit/themes/claro/claro.css">
<link rel="stylesheet" href="http://js.arcgis.com/3.14/esri/css/esri.css">
<style type="text/css">
html,
body,
#mapDiv {
padding: 0;
margin: 0;
height: 100%;
z-index: -1;
-moz-border-radius: 4px;
overflow: hidden;
}
.claro .dijitButtonText {
color: #03c;
font-family: Arial, Helvetica, sans-serif font-weight: bold;
}
.claro td.dijitMenuItemLabel {
color: #03c;
font-family: Arial, Helvetica, sans-serif font-weight: 500;
}
.auto-style1 {}
.auto-style2 {
height: 20px;
}
.auto-style3 {
height: 20px;
}
.auto-style6 {
height: 2%;
width: 279px;
}
.auto-style7 {
width: 279px;
}
#TxtAltareeqEng {
width: 55px;
}
#TxtAltareeqEng0 {
width: 55px;
}
</style>
<script type="text/javascript" src="http://js.arcgis.com/3.14/"></script>
<!--<script src="Scripts/jquery-2.1.1.js" type="text/javascript"></script>-->
<script type="text/javascript">
window.onerror = function (msg, url, linenumber) {
alert('Error message: ' + msg + '\nURL: ' + url + '\nLine Number: ' + linenumber);
return true;
}
var map, basemapGallery;
require([
"esri/map",
"esri/graphic",
"esri/layers/ArcGISDynamicMapServiceLayer",
"esri/layers/GraphicsLayer",
"esri/geometry/Extent",
"esri/geometry/Point",
"esri/symbols/PictureMarkerSymbol",
"esri/InfoTemplate",
"esri/dijit/Basemap",
"esri/dijit/BasemapGallery",
"esri/dijit/BasemapLayer",
"esri/graphicsUtils",
"dojo/_base/array",
"dojo/parser",
"dojo/dom",
"dojo/_base/lang",
"dijit/MenuItem",
"dijit/Menu",
"dijit/layout/ContentPane",
"dijit/form/Button",
"dijit/form/RadioButton",
"dijit/form/DropDownButton",
"dojo/domReady!"
],
function (
Map,
Graphic,
ArcGISDynamicMapServiceLayer,
GraphicsLayer,
Extent,
Point,
PictureMarkerSymbol,
InfoTemplate,
Basemap,
BasemapGallery,
BasemapLayer,
graphicsUtils,
array,
parser,
dom,
lang,
MenuItem
) {
parser.parse();
var TareeqENG, TareeqARB;
var graphicsLayer;
var AltareeqArb, AltareeqEng;
/*Manually define the maps LODs*/
var lods = [
{
"level": 0,
"resolution": 156543.03392800014,
"scale": 5.91657527591555E8
},
{
"level": 1,
"resolution": 78271.51696399994,
"scale": 2.95828763795777E8
},
{
"level": 2,
"resolution": 39135.75848200009,
"scale": 1.47914381897889E8
},
{
"level": 3,
"resolution": 19567.87924099992,
"scale": 7.3957190948944E7
},
{
"level": 4,
"resolution": 9783.93962049996,
"scale": 3.6978595474472E7
},
{
"level": 5,
"resolution": 4891.96981024998,
"scale": 1.8489297737236E7
},
{
"level": 6,
"resolution": 2445.98490512499,
"scale": 9244648.868618
},
{
"level": 7,
"resolution": 1222.992452562495,
"scale": 4622324.434309
},
{
"level": 8,
"resolution": 611.4962262813797,
"scale": 2311162.217155
},
{
"level": 9,
"resolution": 305.74811314055756,
"scale": 1155581.108577
},
{
"level": 10,
"resolution": 152.87405657041106,
"scale": 577790.554289
},
{
"level": 11,
"resolution": 76.43702828507324,
"scale": 288895.277144
},
{
"level": 12,
"resolution": 38.21851414253662,
"scale": 144447.638572
},
{
"level": 13,
"resolution": 19.10925707126831,
"scale": 72223.819286
},
{
"level": 14,
"resolution": 9.554628535634155,
"scale": 36111.909643
},
{
"level": 15,
"resolution": 4.77731426794937,
"scale": 18055.954822
},
{
"level": 16,
"resolution": 2.388657133974685,
"scale": 9027.977411
},
{
"level": 17,
"resolution": 1.1943285668550503,
"scale": 4513.988705
},
{
"level": 18,
"resolution": 0.5971642835598172,
"scale": 2256.994353
},
{
"level": 19,
"resolution": 0.29858214164761665,
"scale": 1128.497176
},
{
"level": 20,
"resolution": 0.1492910708238083,
"scale": 564.248588
},
{
"level": 21,
"resolution": 0.0746455354119042,
"scale": 282.124294
}
];
map = new Map("mapDiv", {
center: [6.389, 36.054],
zoom: 4,
lods: lods
});
createBasemapGallery();
dijit.byId("radioOne").on("change", function(isChecked){
if(isChecked){
dijit.byId("LnkLastPosition").set("label", "LastPosition");
dijit.byId("LnkTracking").set("label", "Tracking");
}
}, true);
dijit.byId("radioTwo").on("change", function(isChecked){
if(isChecked){
dijit.byId("LnkLastPosition").set("label", "الموقف الأخير");
dijit.byId("LnkTracking").set("label", "التتبع");
}
}, true);
dijit.byId("LnkLastPosition").on("click", LastPosClick);
dijit.byId("LnkTracking").on("click", LastPosClick);
function createBasemapGallery() {
AltareeqEng = "http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Demographics/ESRI_Population_World/MapServer";
AltareeqArb = "http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Demographics/ESRI_Census_USA/MapServer";
//Manually create a list of basemaps to display
var basemaps = [];
/*Add the your basemaps is reverse order. We need the Bing basemap loaded first in the BasemapGallery
we will latter reverse the array so that it lists in the order you want*/
BingMapsHybrid = new Basemap({
layers: [new BasemapLayer({
type: "BingMapsHybrid"
})],
id: "bmHybrid",
title: "BingMaps-Aerial-Labels"
});
basemaps.push(BingMapsHybrid);
BingMapsAerial = new Basemap({
layers: [new BasemapLayer({
type: "BingMapsAerial"
})],
id: "bmAerial",
title: "BingMaps-Aerial"
});
basemaps.push(BingMapsAerial);
BingMapsRoad = new Basemap({
layers: [new BasemapLayer({
type: "BingMapsRoad"
})],
id: "bmRoad",
title: "BingMaps-Road"
});
basemaps.push(BingMapsRoad);
TareeqARB = new Basemap({
layers: [new ArcGISDynamicMapServiceLayer(AltareeqArb)],
id: "TareeqARB",
title: "Al-Tareeq(AR)"
});
basemaps.push(TareeqARB);
TareeqENG = new Basemap({
layers: [new ArcGISDynamicMapServiceLayer(AltareeqEng)],
id: "TareeqENG",
title: "Al-Tareeq(ENG)"
});
basemaps.push(TareeqENG);
basemapGallery = new BasemapGallery({
showArcGISBasemaps: false,
basemaps: basemaps,
bingMapsKey: "yourbingkey",
map: map
});
basemapGallery.startup();
graphicsLayer = new GraphicsLayer();
map.addLayer(graphicsLayer);
//BasemapGallery.startup isn't needed because we aren't using the default basemap, instead
//we are going to create a custom user interface to display the basemaps, in this case a menu.
array.forEach(basemapGallery.basemaps.reverse(), function (basemap) {
//Add a menu item for each basemap, when the menu items are selected
dijit.byId("bingMenu").addChild(new MenuItem({
label: basemap.title,
onClick: lang.hitch(this, function () {
this.basemapGallery.select(basemap.id);
})
}));
});
/*Select that basemap that you want to be initially displayed*/
basemapGallery.select(TareeqENG.id);
}
function LastPosClick() {
map.infoWindow.hide();
var colourstyle = "images/sphere-blue-dark-16x16.png"
var Status = "status";
var procname = "procname";
var location = "location";
var Driver = "Drv";
var strhotspot = "strhotspot";
var geomPoint1 = new Point(58.46236, 23.61581);
var geomPoint2 = new Point(59.46236, 23.61581);
var geomPoint3 = new Point(60.43362666666, 23.583081666666);
var symbol = new PictureMarkerSymbol({
"url": colourstyle,
"height": 16,
"width": 16,
"type": "esriPMS"
});
var infoTemplate = new InfoTemplate();
infoTemplate.content = strhotspot;
var pointGraphic = new Graphic(geomPoint1, symbol);
var pointGraphic2 = new Graphic(geomPoint2, symbol);
var pointGraphic3 = new Graphic(geomPoint3, symbol);
pointGraphic.setInfoTemplate(infoTemplate);
pointGraphic2.setInfoTemplate(infoTemplate);
pointGraphic3.setInfoTemplate(infoTemplate);
graphicsLayer.add(pointGraphic);
graphicsLayer.add(pointGraphic2);
graphicsLayer.add(pointGraphic3);
setextent();
var DivesriLogoImage = dom.byId('DivesriLogoImage');
var mapDiv = dom.byId('mapDiv');
mapDiv.style.visibility = "visible";
DivesriLogoImage.style.visibility = "hidden";
}
function setextent() {
var gextent = graphicsUtils.graphicsExtent(graphicsLayer.graphics).expand(1.2);
map.setExtent(gextent);
}
});
</script>
</head>
<body class="claro">
<!--style="background-image: url('Images/menubackground.png');"-->
<form id="form1" >
<div style="width: 100%; height: 100%">
<table id="Tablecontrols0" style="font-size: 15px; z-index: 101; background-color: #5B748B; width: 100%; height: 100%;">
<tr style="font-family: Times New Roman">
<td style="border-style: none; background-color: #496277; " valign="top" class="auto-style6">
<input type="radio" data-dojo-type="dijit/form/RadioButton" name="uilanguage" id="radioOne" checked value="English"/><label for="radioOne">English</label><br />
<input type="radio" data-dojo-type="dijit/form/RadioButton" name="uilanguage" id="radioTwo" value="العربية"/><label for="radioTwo">العربية</label>
</td>
<td align="left" style="border-style: none; background-color: #496277; height: 2%;" valign="top" class="auto-style3">
</td>
</tr>
<tr style="font-family: Times New Roman">
<td style="border-style: none;" valign="top" bgcolor="#496277" class="auto-style7">
<table id="Tablecontrols" style="border-color: #F2F0EE; font-size: 15px; z-index: 101;
background-color: #496277; width:auto; height: 274px; font-family: verdana; color: tomato; font-weight: bold; border-top-style: none;" align="left">
<tr style="font-family: Times New Roman">
<td rowspan="1" valign="top" height="10px" class="auto-style1">
</td>
<td rowspan="1" style="border-style: none;" valign="top" height="10px">
</td>
</tr>
<tr style="font-family: Times New Roman">
<td rowspan="1" style="font-weight: bold; " valign="top" height="10px" class="auto-style1">
</td>
<td rowspan="1" style="border-style: none;" valign="top" height="10px">
</td>
</tr>
<tr style="font-family: Times New Roman">
<td style="font-weight: bold; " valign="top" height="10" class="auto-style1" colspan="2">
</td>
</tr>
<tr style="font-family: Times New Roman">
<td style="font-weight: bold; text-align: center; " valign="top" class="auto-style2">
<button dojotype="dijit/form/Button" id="LnkLastPosition" style="font-family: Arial; font-size: x-small; font-weight: normal">
Last Position</button>
</td>
<td style="border-style: none; text-align: center;" valign="top" class="auto-style3">
<button dojotype="dijit/form/Button" id="LnkTracking" style="font-family: Arial; font-size: x-small; font-weight: normal">
Tracking</button>
</td>
</tr>
<tr style="font-family: Times New Roman">
<td colspan="2" rowspan="1" style="border-top: 2px solid #547289; border-bottom: 2px solid #547289; font-weight: bold; position: static;
height: 100%; text-align: left; width: 30%; border-left-width: 2px; border-right-width: 2px;" valign="top" align="left">
<div id="Something"></div>
<div style="width: 300px; height: 356px; overflow: scroll"></div>
</td>
</tr>
</table>
</td>
<td style="border-style: none; background-color: white; width: 100%; height:100%;" valign="top" id="td11">
<div id="mapDiv" dojotype="dijit/layout/ContentPane" region="center" style="border:1px solid #000; visibility: visible; height: 100%;">
<div style="position:absolute; right:50px; top:100px; z-Index:99;">
<button id="dropdownButton" label="Basemaps" data-dojo-type="dijit/form/DropDownButton">
<div data-dojo-type="dijit/Menu" id="bingMenu">
<!--The menu items are dynamically created using the basemap gallery layers-->
</div>
</button>
</div>
</div>
<!--<asp:Image ImageUrl="Images/tareeq Logo1.jpg" ID="esriLogoImage" Height="495px" style="margin-right: 36px" Width="100%" />-->
<div id="DivesriLogoImage" style="background-color: #FFFFFF; width: 80%; height:99.8%; visibility: hidden; position: absolute; top: 72px;" align="center">
<!--<asp:Image ID="esriLogoImage" ImageAlign="Middle" Height="564px" />-->
</div>
</td>
</tr>
</table>
</div>
</form>
</body>
</html>