如何在arcgis中使用定位器时实现自动完成 [英] How to implement autocomplete while using locator in arcgis

查看：28
本文介绍了如何在arcgis中使用定位器时实现自动完成的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

以下代码用于在文本框中输入位置后在地图上查找位置.请注意以下代码中我使用的是定位器"而不是地理编码器"，因为我希望使用自定义文本框'esri/dijit/geocoder' 提供的文本框，我也想使用定位器获取地理坐标值.

在下面的代码中，我想在文本框中添加自动完成"功能，该功能与地理编码器"中的自动完成"功能具有相同的功能.

<头><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><!--视口元标记用于改进样本的呈现和行为在 iOS 设备上--><meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no"><title>查找地址</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"><风格>html，正文{高度:100%；宽度:100%；边距:0；填充:0；}#地图{填充:0;边框:实心 1px #343642;边距:5px 5px 5px 0px;}#leftPane{宽度:20%；边框顶部:实心 1px #343642；左边框:实心 1px #343642；边框底部:实心 1px #343642;边距:5px 0px 5px 5px;颜色:#343642；字体:100% Georgia,"Times New Roman",Times,serif;/*字母间距:0.05em;*/}</风格><script src="http://js.arcgis.com/3.12/"></script><脚本>var 地图，定位器；要求(["esri/map", "esri/tasks/locator", "esri/graphic","esri/InfoTemplate", "esri/symbols/SimpleMarkerSymbol","esri/symbols/Font", "esri/symbols/TextSymbol","dojo/_base/array", "esri/颜色","dojo/number", "dojo/parser", "dojo/dom", "dijit/registry","dijit/form/Button", "dijit/form/Textarea","dijit/layout/BorderContainer", "dijit/layout/ContentPane", "dojo/domReady!"]， 功能(地图、定位器、图形、InfoTemplate、SimpleMarkerSymbol、字体、文本符号、arrayUtils，颜色，数字、解析器、dom、注册表){parser.parse();地图 = 新地图(地图"，{底图:街道"，中心:[-93.5, 41.431]，变焦:5});locator = new Locator("http://geocode.arcgis.com/arcgis/rest/services/World/GeocodeServer");locator.on("address-to-locations-complete", showResults);//监听按钮点击然后地理编码registry.byId("locate").on("click", locate);map.infoWindow.resize(200,125);函数定位(){地图.graphics.clear();变量地址 = {"SingleLine": dom.byId("address").value};locator.outSpatialReference = map.spatialReference;变量选项 = {地址:地址，outFields: ["Loc_name"]};locator.addressToLocations(选项)；}函数 showResults(evt) {var symbol = new SimpleMarkerSymbol();var infoTemplate = new InfoTemplate(地点"，地址:${address}<br/>分数:${score}<br/>源定位器:${locatorName}");symbol.setStyle(SimpleMarkerSymbol.STYLE_SQUARE);symbol.setColor(new Color([153,0,51,0.75]));变量几何；arrayUtils.every(evt.addresses, function(candidate) {控制台日志(候选人.分数)；如果 (candidate.score > 80) {控制台.日志(候选人.位置)；var 属性 = {地址:候选人地址，分数:候选人.分数，locatorName:候选人.attributes.Loc_name};geom = 候选位置；var graphics = new Graphic(geom, symbol, attributes, infoTemplate);//在地理编码位置向地图添加图形map.graphics.add(graphic);//向地图添加一个文本符号，列出匹配地址的位置.var displayText = 候选地址；var 字体 = 新字体("16pt",Font.STYLE_NORMAL,字体.VARIANT_NORMAL,字体.WEIGHT_BOLD，黑体");var textSymbol = new TextSymbol(显示文本，字体，新颜色(#666633"));textSymbol.setOffset(0,8);map.graphics.add(new Graphic(geom, textSymbol));返回假；//在找到一名得分大于 80 的候选人后跳出循环.}});如果(geom ！== 未定义){map.centerAndZoom(geom, 12);}}});<body class="claro"><div id="mainWindow" data-dojo-type="dijit/layout/BorderContainer"data-dojo-props="design:'sidebar', gutters:false"样式="宽度:100%;高度:100%;"><div id="leftPane"data-dojo-type="dijit/layout/ContentPane"data-dojo-props="region:'left'">输入地址，然后单击定位按钮以使用示例地址定位器返回位置美国的街道地址.<br><textarea id="address">380 New York St, Redlands</textArea><br><button id="locate" data-dojo-type="dijit/form/Button">定位</button>

<div id="地图"data-dojo-type="dijit/layout/ContentPane"data-dojo-props="region:'center'">

如何在此代码中添加自动完成"功能?

解决方案

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

The below code is to find a location on map, once the location is entered in a textbox.Please note in the below code that I am using 'locator' instead of 'geocoder' as i would like to have custom textbox instead of the textbox provided by the 'esri/dijit/geocoder' and also i would like to get the geocoordinates values using locator.

In the below code, i would like to add 'autocomplete' feature in textbox that has the same functionality as of 'autocomplete' feature in 'geocoder'.

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

How to add 'autocomplete' feature in this code?

解决方案

The geocode dijit supports autocomplete using either the default locator or custom ones. Since you are referencing the default locator service you can just use the dijit and pass autoComplete in the options

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

这篇关于如何在arcgis中使用定位器时实现自动完成的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
其他开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆