Trouble adding search widget to ArcGIS Shortlist Story App

后端 未结 2 983
栀梦
栀梦 2021-01-28 20:55

I \'m having issues adding in a search widget to a shortlist application. I have included the code below. The search bar shows up, but is not functional. I am needing to have th

相关标签:
2条回答
  • 2021-01-28 21:33

    Well, Here is the working code for esri search widget.

    Just require the needed libraries and plugin the code.

    <!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>

    Hoping this will help you :)

    0 讨论(0)
  • 2021-01-28 21:54

    Well, I went though your code the major error i can see is that multiple define error.

    Root Cause:

    The main reason for it you are loading those libraries more than once who expose define.

    Solution:

    • In your case i noticed you have loaded ArcGIS JS Api more than once.

    • Just load only one source of ArcGIS it should work.

    • One more thinh in attached code you are using multiple versions of CSS.

    • you are suppose to use same version of ESRI CSS which you are using for JS.
    • As per your code you are using legacy model of coding style so go for arcgis js api's that version only.

    Code without multiple define error: https://jsfiddle.net/vikash2402/362ft9g7/

    Hoping this will help you :)

    0 讨论(0)
提交回复
热议问题