如何在arcgis中使用定位器时实现自动完成

时间:2015-01-29 09:23:01

标签: autocomplete dojo arcgis

以下代码是在文本框中输入位置后在地图上查找位置。请在下面的代码中注明我正在使用'定位器'而不是地理编码器'因为我想拥有自定义文本框而不是由' esri / dijit / geocoder提供的文本框。而且我想使用定位器获取地理坐标值。

在下面的代码中,我想添加' autocomplete'文本框中的功能具有与' autocomplete'相同的功能。地理编码器功能'。

<!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>Find Address</title>

    <link rel="stylesheet" href="http://js.arcgis.com/3.12/dijit/themes/claro/claro.css">
    <link rel="stylesheet" href="http://js.arcgis.com/3.12/esri/css/esri.css">
    <style>
      html, body { 
        height: 100%; width: 100%;
        margin: 0; padding: 0;
      } 
      #map{ 
        padding:0;
        border:solid 1px #343642;
        margin:5px 5px 5px 0px;
      }
      #leftPane{
        width:20%;
        border-top: solid 1px #343642;
        border-left: solid 1px #343642;
        border-bottom: solid 1px #343642;
        margin:5px 0px 5px 5px;
        color: #343642;
        font:100% Georgia,"Times New Roman",Times,serif;
        /*letter-spacing: 0.05em;*/
      }
     </style>

    <script src="http://js.arcgis.com/3.12/"></script>
    <script>
      var map, locator;

      require([
        "esri/map", "esri/tasks/locator", "esri/graphic",
        "esri/InfoTemplate", "esri/symbols/SimpleMarkerSymbol",
        "esri/symbols/Font", "esri/symbols/TextSymbol",
        "dojo/_base/array", "esri/Color",
        "dojo/number", "dojo/parser", "dojo/dom", "dijit/registry",

        "dijit/form/Button", "dijit/form/Textarea",
        "dijit/layout/BorderContainer", "dijit/layout/ContentPane", "dojo/domReady!"
      ], function(
        Map, Locator, Graphic,
        InfoTemplate, SimpleMarkerSymbol, 
        Font, TextSymbol,
        arrayUtils, Color,
        number, parser, dom, registry
      ) {
        parser.parse();

        map = new Map("map", { 
          basemap: "streets",
          center: [-93.5, 41.431],
          zoom: 5
        });

        locator = new Locator("http://geocode.arcgis.com/arcgis/rest/services/World/GeocodeServer");
        locator.on("address-to-locations-complete", showResults);

        // listen for button click then geocode
        registry.byId("locate").on("click", locate);

        map.infoWindow.resize(200,125);

        function locate() {
          map.graphics.clear();
          var address = {
            "SingleLine": dom.byId("address").value
          };
          locator.outSpatialReference = map.spatialReference;
          var options = {
            address: address,
            outFields: ["Loc_name"]
          };
          locator.addressToLocations(options);
        }

        function showResults(evt) {
          var symbol = new SimpleMarkerSymbol();
          var infoTemplate = new InfoTemplate(
            "Location", 
            "Address: ${address}<br />Score: ${score}<br />Source locator: ${locatorName}"
          );
          symbol.setStyle(SimpleMarkerSymbol.STYLE_SQUARE);
          symbol.setColor(new Color([153,0,51,0.75]));

          var geom;
          arrayUtils.every(evt.addresses, function(candidate) {
            console.log(candidate.score);
            if (candidate.score > 80) {
              console.log(candidate.location);
              var attributes = { 
                address: candidate.address, 
                score: candidate.score, 
                locatorName: candidate.attributes.Loc_name 
              };   
              geom = candidate.location;
              var graphic = new Graphic(geom, symbol, attributes, infoTemplate);
              //add a graphic to the map at the geocoded location
              map.graphics.add(graphic);
              //add a text symbol to the map listing the location of the matched address.
              var displayText = candidate.address;
              var font = new Font(
                "16pt",
                Font.STYLE_NORMAL, 
                Font.VARIANT_NORMAL,
                Font.WEIGHT_BOLD,
                "Helvetica"
              );

              var textSymbol = new TextSymbol(
                displayText,
                font,
                new Color("#666633")
              );
              textSymbol.setOffset(0,8);
              map.graphics.add(new Graphic(geom, textSymbol));
              return false; //break out of loop after one candidate with score greater  than 80 is found.
            }
          });
          if ( geom !== undefined ) {
            map.centerAndZoom(geom, 12);
          }
        }
      });
    </script>
  </head>
  <body class="claro">
    <div id="mainWindow" data-dojo-type="dijit/layout/BorderContainer" 
         data-dojo-props="design:'sidebar', gutters:false" 
         style="width:100%; height:100%;">

      <div id="leftPane"
           data-dojo-type="dijit/layout/ContentPane" 
           data-dojo-props="region:'left'">
        Enter an address then click the locate button to use a sample address locator to return the location for 
        street addresses in the United States. 
        <br>

        <textarea id="address">380 New York St, Redlands</textArea>
        <br>

        <button id="locate" data-dojo-type="dijit/form/Button">Locate</button> 
      </div>

      <div id="map" 
           data-dojo-type="dijit/layout/ContentPane" 
           data-dojo-props="region:'center'">
      </div>
    </div>
  </body>
</html>

如何添加&#39;自动完成&#39;此代码中的功能?

2 个答案:

答案 0 :(得分:1)

使用esri / dijit / geocoder提供的自定义文本框是什么意思? Geocoder dijit带有默认的ESRI css来设计dijit,但没有什么可以阻止你用自己的风格覆盖它。

例如,您可以在body标签中添加一个类来覆盖claro样式:

<body class="claro custom">

这样esri dijits默认会使用claro,但是如果你定义与esri dijit相同的css选择器并将它们附加到你的自定义类,那么dijit将使用它。这是一个简短的例子,我们覆盖了Geocoder中结果元素的2个属性:

/* Custom styles for the Geocoder dijit */
    .custom #myGeocoder .esriGeocoderResults {
        overflow: visible;
        z-index: 1000 !important;
    }

答案 1 :(得分:1)

地理编码dijit使用默认定位器或自定义定位器支持自动完成。由于您正在引用默认定位器服务,您只需使用dijit并在选项中传递autoComplete

<script>
  var map, geocoder;

  require([
    "esri/map", "esri/dijit/Geocoder", "dojo/domReady!"
  ], function(Map, Geocoder) {
    map = new Map("map",{
      basemap: "gray",
      center: [-120.435, 46.159], // lon, lat
      zoom: 7 
    });

    geocoder = new Geocoder({ 
      map: map,
      autoComplete : true
    }, "search");
    geocoder.startup();
  });
</script>