Question

我在将搜索小部件添加到候选名单应用程序时遇到问题。我已经包含了以下代码。搜索栏显示，但不起作用。我需要将它用于搜索应用程序中包含的业务名称的位置。

＆＃13;

<html>
	<head>
		<title>ChahtaPreneur</title>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">

		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">

		<link type="image/ico" rel="shortcut icon" href="//resources.esri.com/favicon.ico">
		<link type="image/ico" rel="icon"  href="//resources.esri.com/favicon.ico">
		
		<link rel="stylesheet" href="https://js.arcgis.com/3.18/esri/css/esri.css">
		
		<script src="https://js.arcgis.com/3.18/"></script>

<link rel="stylesheet" href="https://js.arcgis.com/3.18/esri/css/esri.css">
<link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.2/js/dojo/dijit/themes/claro/claro.css">
<link rel="stylesheet" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.5/js/esri/css/esri.css">
<link rel="stylesheet" type="text/css" href="colorbox/colorbox.css">
<link rel="stylesheet" type="text/css" href="css/style.css">

<script type="text/javascript" src="lib/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="lib/common/helper_functions.js"></script>
<script type="text/javascript">var djConfig = {parseOnLoad: true};</script>

<script type="text/javascript" src="colorbox/jquery.colorbox-min.js"></script>
<script type="text/javascript" src="lib/jquery.animate-colors-min.js"></script>
<script type="text/javascript" src="http://serverapi.arcgisonline.com/jsapi/arcgis/3.5/"></script>




	
	<style>
  html,body,
  #mapDiv,.map.container{
    padding:0;
    margin:0;
    height:100%;
  }
     #search {
        display: block;
        position: absolute;
        z-index: 2;
        top: 20px;
        left: 720px;
      }
</style>

    <script src="https://js.arcgis.com/3.18/"></script>
	

		<!--
			To correctly reference your Shortlist in search engine:
			 - create and fill out extensively an ArcGIS Online item that link to your final application
			 - edit the following four tags as well as the title tag above on line 4
		-->
		<meta name="description" content="This story map was created with the Story Map Shortlist application in ArcGIS Online.">

		<!-- Facebook sharing -->
		<meta property="og:type" content="article"/>
		<meta property="og:title" content="Story Map Shortlist"/>
		<meta property="og:description" content="This story map was created with the Story Map Shortlist application in ArcGIS Online."/>
		<meta property="og:image" content="resources/common/icons/esri-globe.png"/>
	

		<!--
			This application is released under the Apache License V2.0 by Esri http://www.esri.com/
			Checkout the project repository on GitHub to access source code, latest revision, developer documentation, FAQ and tips
			https://github.com/Esri/shortlist-storytelling-template-js
		-->

		<script type="text/javascript">
			//-------------------------------------------------------------------------------------------
			//	 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 (e.g. ["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.
		</script>
		
   
<script type="text/javascript">

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+' &#x25BC;');
	
	$(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+' &#x25B2;');
		}
		else{
		  $("#bookmarksTogText").html(BOOKMARKS_ALIAS+' &#x25BC;');
		}
		$("#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('<div class="tab" onclick="activateLayer(_contentLayers['+index+'])">'+value.title+'</div>');
	});

	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://static.arcgis.com/images/Symbols/Shapes/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")+"<p><span class='infoWindowLink'>Details >></span></p>");
	_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 : ((aID > bID) ? 1 : 0));
}

function loadBookmarks() {
	
	$.each(_bookmarks,function(index,value){$("#bookmarksDiv").append("<p><a>"+value.name+"</a></p>")});
	
	$("#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+' &#x25BC;');
		$("#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 = $('<li id="item'+value.attributes.getValueCI("Number")+'" style="display:'+display+'">');
		img = $('<img src="'+value.attributes.getValueCI("THUMB_URL")+'">');
		footer = $('<div class="footer"></div>');
		num = $('<div class="num" style="background-color:'+_layerCurrent.color+'">'+value.attributes.getValueCI("Number")+'</div>');
		title = $('<div class="blurb">'+value.attributes.getValueCI("Name")+'</div>');
		$(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);

＆＃13;

Answer 1

好吧，我通过你的代码我可以看到的主要错误是多个定义错误。

根本原因：

主要原因是您不止一次加载那些暴露定义的库。

<强>解决方案：

在您的情况下，我注意到您已经多次加载ArcGIS JS Api。
只需加载一个应该可以使用的ArcGIS源。
您使用多个版本的CSS附加代码中的一个更薄。
您应该使用与JS相同的ESRI CSS版本。
根据您的代码，您使用的是legacy model of coding style，因此请仅使用arcgis js api's该版本。

没有多重定义错误的代码： https://jsfiddle.net/vikash2402/362ft9g7/

希望这会对您有所帮助：）

Answer 2

嗯，这是esri搜索小部件的工作代码。

只需要所需的库并插入代码。

＆＃13;

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no" />
  <title>Search with Suggestion Template</title>
    <link rel="stylesheet" href="https://js.arcgis.com/3.18/dijit/themes/claro/claro.css">
    <link rel="stylesheet" href="https://js.arcgis.com/3.18/esri/css/esri.css">
  <style>
    html,
    body,
    #map {
      height: 100%;
      width: 100%;
      margin: 0;
      padding: 0;
    }

    #search {
      display: block;
      position: absolute;
      z-index: 2;
      top: 20px;
      left: 74px;
    }
  </style>
    <script src="https://js.arcgis.com/3.18/"></script>
  <script>


    require([
        "esri/map", "esri/dijit/Search", "esri/layers/FeatureLayer",  "esri/InfoTemplate", "dojo/domReady!"
      ], function (Map, Search, FeatureLayer,InfoTemplate) {
      var map = new Map("map", {
        basemap: "gray",
        center: [-82.93, 42.5], // lon, lat
        zoom: 10
      });

      var search = new Search({
        sources: [{
          featureLayer: new FeatureLayer("https://services.arcgis.com/b6gLrKHqgkQb393u/arcgis/rest/services/TaxParcelQuery/FeatureServer/0", {
            outFields: ["*"],
            infoTemplate: new InfoTemplate("Parcels", "Owner name: ${OWNERNME1}</br>Parcel ID: ${PARCELID}</br>Site address: ${SITEADDRESS}")
          }),
          outFields: ["OWNERNME1","PARCELID","SITEADDRESS"],
          displayField: "OWNERNME1",
          suggestionTemplate: "${PARCELID}: ${SITEADDRESS}",
          name: "Parcels",
          placeholder: "example: Shawn Smith",
          enableSuggestions: true
      }],
        map: map
      }, "search");


      search.startup();
    });
  </script>
</head>

<body>
  <div id="search"></div>
  <div id="map"></div>
</body>

</html>

＆＃13;

希望这会对您有所帮助：）

无法将搜索小部件添加到ArcGIS Shortlist Story App

2 个答案: