无法将搜索小部件添加到ArcGIS Shortlist Story App
我在将搜索小部件添加到候选名单应用程序时遇到问题。 我已经包含了以下代码。 搜索栏显示，但不起作用。 我需要将它用于搜索应用程序中包含的业务名称的位置。
ChahtaPreneur var djConfig = {parseOnLoad: true}; html,body, #mapDiv,.map.container{ padding:0; margin:0; height:100%; } #search { display: block; position: absolute; z-index: 2; top: 20px; left: 720px; } //------------------------------------------------------------------------------------------- // Application configuration (ignored on ArcGIS Online, Portal and during development) //------------------------------------------------------------------------------------------- var configOptions = { // Enter an application ID created through the Shortlist builder appid: "f8c9b5d9a2c64703bb72910f46f59d7c", // Optionally to secure Shortlist's access, use an OAuth application ID (example: 6gyOg377fLUhUk6f) // User will need to sign-in to access the viewer even if your application is public oAuthAppId: "", // Optionally to be able to use the appid URL parameter, configure here the list of application author // whose application are allowed to be viewed by this Shortlist deployment // This is the Portal username of the Shortlist owner (eg ["user1"], ["user1", "user2"]) authorizedOwners: ["*"] }; // Optionally sharing and proxy URLs can be configured in app/config.js. This is only required // when the webmap is not hosted on ArcGIS Online or a Portal for ArcGIS instance and the application isn't deployed as /home/Shortlist/ or /apps/Shortlist/. // Optionally Bing Maps key, Geometry and Geocode service's URLs can be configured in app/config.js. This is only required // if the Organization or Portal for ArcGIS instance default configuration has to be overwritten. dojo.require("dijit.dijit"); dojo.require("dijit.layout.BorderContainer"); dojo.require("dijit.layout.ContentPane"); dojo.require("esri.map"); dojo.require("esri.arcgis.utils"); dojo.require("esri.dijit.Geocoder"); /****************************************************** ******************** config section ****************** *******************************************************/ var WEBMAP_ID = "6b3d1da24e5841f1b8d47de63b7be7a4"; var BOOKMARKS_ALIAS = "Zoom"; var COLOR_ORDER = "green,red,blue,purple"; // will only use as many colors as you have content (point) layers var BINGMAPS_KEY = ""; /****************************************************** ******************** app variables ******************** *******************************************************/ var _contentLayers = []; var _isMobile = isMobile(); var _map; var _bookmarks; var _layerCurrent; var _selected; var _initExtent; var _dojoReady = false; var _jqueryReady = false; var geocoder; var locatorUrl = "http://geocode.arcgis.com/arcgis/rest/services/World/GeocodeServer/"; /****************************************************** ************************* init ************************ *******************************************************/ dojo.addOnLoad(function() {_dojoReady = true;init()}); jQuery(document).ready(function() {_jqueryReady = true;init()}); /* init comes in two parts because of async call to createMap. */ function init() { if (!_jqueryReady) return; if (!_dojoReady) return; if (getParameterByName("webmap") != "") { WEBMAP_ID = getParameterByName("webmap"); } if (getParameterByName("bookmarks_alias") != "") { BOOKMARKS_ALIAS = getParameterByName("bookmarks_alias"); } if (getParameterByName("color_order") != "") { COLOR_ORDER = getParameterByName("color_order") } $("#bookmarksTogText").html(BOOKMARKS_ALIAS+' ▼'); $(this).resize(handleWindowResize); $("#zoomIn").click(function(e) { _map.setLevel(_map.getLevel()+1); }); $("#zoomOut").click(function(e) { _map.setLevel(_map.getLevel()-1); }); $("#zoomExtent").click(function(e) { _map.setExtent(_initExtent); }); $(document).bind('cbox_complete', function(){ $(".details .rightDiv").height($(".details").height() - 65); }); $("#bookmarksToggle").click(function(){ if ($("#bookmarksDiv").css('display')=='none'){ $("#bookmarksTogText").html(BOOKMARKS_ALIAS+' ▲'); } else{ $("#bookmarksTogText").html(BOOKMARKS_ALIAS+' ▼'); } $("#bookmarksDiv").slideToggle(); }); var mapDeferred = esri.arcgis.utils.createMap(WEBMAP_ID, "map", { mapOptions: { slider: false, wrapAround180:false }, ignorePopups: true, bingMapsKey: BINGMAPS_KEY }); mapDeferred.addCallback(function(response) { document.title = response.itemInfo.item.title; $("#title").html(response.itemInfo.item.title); $("#subtitle").html(response.itemInfo.item.snippet); _map = response.map; //resize the map when the browser resizes dojo.connect(dijit.byId('map'), 'resize', _map,_map.resize); dojo.connect(_map, 'onExtentChange', refreshList); // click action on the map where there's no graphic // causes a deselect. dojo.connect(_map, 'onClick', function(event){ if (event.graphic == null) { unselect(); } }); _bookmarks = response.itemInfo.itemData.bookmarks; if (_bookmarks) { loadBookmarks(); $("#bookmarksCon").show(); } var layers = response.itemInfo.itemData.operationalLayers; if(_map.loaded){ initMap(layers); } else { dojo.connect(_map,"onLoad",function(){ initMap(layers); }); } }); mapDeferred.addErrback(function(error) { console.log("Map creation failed: ", dojo.toJson(error)); }); } function initMap(layers) { var supportLayers = []; var pointLayers = [""]; $.each(layers,function(index,value){ if (value.url == null) { if (value.featureCollection.layers[0].featureSet.geometryType == "esriGeometryPoint") { pointLayers.push(value); } else { supportLayers.push(value); } } else { // if the layer has an url property (meaning that it comes from a service), just // keep going...it will remain in the map, but won't be query-able. } }); _initExtent = _map.extent; var supportLayer; $.each(supportLayers,function(index,value) { supportLayer = findLayer(_map,value.title); if (supportLayer == null) return; $.each(supportLayer.graphics,function(index,value) { value.attributes.getValueCI = getValueCI; // assign extra method to handle case sensitivity }); dojo.connect(supportLayer, "onMouseOver", baselayer_onMouseOver); dojo.connect(supportLayer, "onMouseOut", baselayer_onMouseOut); dojo.connect(supportLayer, "onClick", baselayer_onClick); }); if (COLOR_ORDER.split(",").length < pointLayers.length) { // you have supplied fewer colors than point layers and // therefore have lost your sorting privileges... colorschemes = COLOR_SCHEMES; } else { // sort the colors var colorschemes = getSortedColorSchemes(); // burn off any extra colors, if you have more colors // than points. while (pointLayers.length < colorschemes.length) { colorschemes.shift() }; } var contentLayer; $.each(pointLayers,function(index,value) { _map.removeLayer(findLayer(_map,value.title)); if (index <= 4) { // maximum of 4 point layers. $.each(value.featureCollection.layers[0].featureSet.features,function(index,value) { value.attributes.getValueCI = getValueCI; // assign extra method to handle case sensitivity }); contentLayer = buildLayer( value.featureCollection.layers[0].featureSet.features.sort(SortByID), colorschemes[index].iconDir, colorschemes[index].iconPrefix ); contentLayer.color = colorschemes[index].color; contentLayer.title = value.title; dojo.connect(contentLayer, "onMouseOver", layer_onMouseOver); dojo.connect(contentLayer, "onMouseOut", layer_onMouseOut); dojo.connect(contentLayer, "onClick", layer_onClick); _map.addLayer(contentLayer); _contentLayers.push(contentLayer); } }); _contentLayers.reverse(); $.each(_contentLayers,function(index,value){ $("#tabs").append(''+value.title+''); }); activateLayer(_contentLayers[0]); dojo.connect(_map.infoWindow,"onHide",infoWindow_onHide); handleWindowResize(); $("#zoomToggle").css("visibility","visible"); // Solomon Additions // add a graphics layer for geocoding results _map.addLayer(new esri.layers.GraphicsLayer({ id: "results" })); var myGeocoders = [{ url: locatorUrl, name: "Single_Line" }]; // create the geocoder geocoder = new esri.dijit.Geocoder({ autoComplete : true, autoNavigate: true, localSearchOptions : { minScale : 3, distance : 4000}, maxLocations : 20, arcgisGeocoder: false, geocoders:myGeocoders, value:'Search by Name', map : _map }, "search"); geocoder.startup(); geocoder.focus(); var symbol = new esri.symbol.PictureMarkerSymbol({ "angle":0, "xoffset":0, "yoffset":10, "type":"esriPMS", "url":"http://sofzh.miximages.com/javascript/BluePin1LargeB.png", "contentType":"image/png", "width":24, "height":24 }); var template = new esri.InfoTemplate("${NAME}", "${*}"); dojo.connect(geocoder, "onFindResults", function(response) { //STEVE CHANGES //Use first match //var name = response.results[0].name; //Match name with locations layer and selected that index //for(i in _locations){ //if(name === _locations[i].attributes.getName()){ //preSelection() //_selected = _locations[i]; //postSelection(); //} //} //STEVE CHANGES END console.log("find results: ", response); var l = _map.getLayer("shortlistlayer"); l.clear(); _map.infoWindow.hide(); dojo.forEach(response.results, function(r) { r.feature.attributes.NAME = r.NAME; r.feature.setSymbol(symbol); r.feature.setInfoTemplate(template); l.add(r.feature); }); }); // solomon Addition Ends } /****************************************************** ******************** event handlers ******************* *******************************************************/ function tile_onMouseOver(e) { $(this).stop().animate({'background-color' : COLOR_FULL}); } function tile_onMouseOut(e) { if (_selected != null) { // does this tile represent the selected graphic? var id = parseInt($(this).attr("id").substring(4)); if (_selected.attributes.getValueCI("Number") == id) { return; } } $(this).stop().animate({'background-color' : COLOR_DIM}); } function tile_onClick(e) { // turn off the last selected tile... if (_selected != null) { var tile = $.grep($("ul.tilelist li"),function(n,i){return n.id == "item"+_selected.attributes.getValueCI("Number")})[0]; if ($(tile).attr("id") != $(this).attr("id")) $(tile).stop().animate({'background-color' : COLOR_DIM}); } $(this).stop().animate({'background-color' : COLOR_FULL}); var id= $(this).attr("id").substring(4); _selected = $.grep(_layerCurrent.graphics,function(n,i){return n.attributes.getValueCI("Number") == id})[0]; postSelection(); } function infoWindow_onHide(event) { unselect(); } function baselayer_onMouseOver(event) { if (_isMobile) return; _map.setMapCursor("pointer"); var graphic = event.graphic; $("#hoverInfo").html(graphic.attributes.getValueCI("Title")); var pt = event.screenPoint; hoverInfoPos(pt.x,pt.y); } function baselayer_onMouseOut(event) { if (_isMobile) return; _map.setMapCursor("default"); $("#hoverInfo").hide(); } function baselayer_onClick(event) { var feature = event.graphic; _map.infoWindow.setTitle(event.graphic.attributes.getValueCI("NAME")); _map.infoWindow.setContent(event.graphic.attributes.getValueCI("CAPTION")+"Details >>
"); _map.infoWindow.show(event.mapPoint); $(".infoWindowLink").click(function(e) { showDetails(feature); }); $("#hoverInfo").hide(); } function layer_onClick(event) { var tile; if (_selected != null) { tile = $.grep($("ul.tilelist li"),function(n,i){return n.id == "item"+_selected.attributes.getValueCI("Number")})[0] $(tile).stop().animate({'background-color' : COLOR_DIM}); } _selected = event.graphic; tile = $.grep($("ul.tilelist li"),function(n,i){return n.id == "item"+_selected.attributes.getValueCI("Number")})[0] $(tile).stop().animate({'background-color' : COLOR_FULL}); postSelection(); } function layer_onMouseOver(event) { if (_isMobile) return; _map.setMapCursor("pointer"); var graphic = event.graphic; if (graphic == _selected) return; graphic.setSymbol(graphic.symbol.setHeight(30).setWidth(24)); $("#hoverInfo").html(graphic.attributes.getValueCI("NAME")); var pt = _map.toScreen(graphic.geometry); hoverInfoPos(pt.x,pt.y); } function layer_onMouseOut(event) { if (_isMobile) return; _map.setMapCursor("default"); var graphic = event.graphic; graphic.setSymbol(graphic.symbol.setHeight(28).setWidth(22)); $("#hoverInfo").hide(); } /****************************************************** ****************** other functions ******************** *******************************************************/ function unselect() { if (_selected != null) { tile = $.grep($("ul.tilelist li"),function(n,i){return n.id == "item"+_selected.attributes.getValueCI("Number")})[0] $(tile).stop().animate({'background-color' : COLOR_DIM}); } _selected = null; postSelection(); } // sort items by numeric ID function SortByID(a, b){ var aID = a.attributes.getValueCI("Number"); var bID = b.attributes.getValueCI("Number"); return ((aID bID) ? 1 : 0)); } function loadBookmarks() { $.each(_bookmarks,function(index,value){$("#bookmarksDiv").append("")}); $("#bookmarksDiv a").click(function(e) { var name = $(this).html(); var extent = new esri.geometry.Extent($.grep(_bookmarks,function(n,i){return n.name == name})[0].extent); _map.setExtent(extent); $("#bookmarksTogText").html(BOOKMARKS_ALIAS+' ▼'); $("#bookmarksDiv").slideToggle(); }); } function activateLayer(layer) { _selected = null; postSelection(); _layerCurrent = layer; var tab = $.grep($(".tab"),function(n,i){return $(n).html() == _layerCurrent.title})[0]; $(".tab").removeClass("tab-selected"); $(tab).addClass("tab-selected"); $.each(_contentLayers,function(index,value){ value.setVisibility(value == _layerCurrent); }); $("#myList").empty(); var display; var tile; var img; var footer; var num; var title; $.each(_layerCurrent.graphics,function(index,value){ if (_map.extent.contains(value.geometry)) { display = "visible" } else { display = "none"; } tile = $(''); img = $('![]()
'); footer = $(''); num = $(''+value.attributes.getValueCI("Number")+''); title = $(''+value.attributes.getValueCI("Name")+''); $(footer).append(num); $(footer).append(title); $(tile).append(img); $(tile).append(footer); $("#myList").append(tile); }); // event handlers have to be re-assigned every time you load the list... $("ul.tilelist li").mouseover(tile_onMouseOver); $("ul.tilelist li").mouseout(tile_onMouseOut); $("ul.tilelist li").click(tile_onClick); $("ul.tilelist").animate({ scrollTop: 0 }, { duration: 200 } ); } function refreshList() { var tile; $.each(_layerCurrent.graphics,function(index,value){ //find the corresponding tile tile = $.grep($("ul.tilelist li"),function(n,i){return n.id == "item"+value.attributes.getValueCI("Number")})[0]; if (_map.extent.contains(value.geometry)) { if ($(tile).css("display") == "none") $(tile).stop().fadeIn(); } else { if ($(tile).css("display") != "none") $(tile).stop().fadeOut(1000); } }); } function buildLayer(arr,iconDir,root) { var layer = new esri.layers.GraphicsLayer(); var pt; var sym; $.each(arr,function(index,value){ pt = new esri.geometry.Point(value.geometry.x,value.geometry.y,value.geometry.spatialReference); sym = new esri.symbol.PictureMarkerSymbol("images/icons/"+iconDir+"/"+root+value.attributes.getValueCI("Number")+".png",22,28); layer.add(new esri.Graphic(pt,sym,value.attributes)); }); return layer; } function getValueCI(field) { var found; $.each(this,function(index,value){ if (index.toUpperCase() == field.toUpperCase()) { found = index; return false; } }); return this[found]; } function handleWindowResize() { var heightDoc = getViewportDimensions()[1]; $("#mainWindow").height(heightDoc - ($("#header").height())); dijit.byId("mainWindow").layout(); $("#paneLeft").height($("#mainWindow").height() - 35); $(".tilelist").height($("#paneLeft").height() - 20); $("#map").height($("#mainWindow").height() - 35); 好吧，我通过你的代码我可以看到的主要错误是多个定义错误。
根本原因：
它的主要原因是您不止一次加载那些暴露定义的库。
解：
-
在您的情况下，我注意到您已经多次加载ArcGIS JS Api。
-
只加载一个ArcGIS源它应该可以工作。
-
附加代码中的一个更薄，您正在使用多个版本的CSS。
- 您可以使用与JS相同的ESRI CSS版本。
- 根据您的代码，您使用的是传统的编码风格模型，因此请仅使用
arcgis js api's。
没有多重定义错误的代码： https ： //jsfiddle.net/vikash2402/362ft9g7/
希望这会帮助你:)
好吧，这是esri搜索小部件的工作代码。
只需要所需的库并插入代码即可。
Search with Suggestion Template