ArcGIS api for javascript——地理编码任务-地理编码地址
描述
本例允许用户输入一个地址，然后显示匹配的地址的位置。这通常地被称为地理编码。在ArcGIS JavaScript API中，使用Locator类执行地理编码。
定位器构造函数需要ArcGIS Server 地理编码服务的URL。一个地理编码服务表示一个在服务器上可用的地址定位器。本例使用ESRI sample server上的ESRI_Geocode_USA服务。可以使用服务目录来查出自己的地理编码服务的URL。
当用户单击Locate按钮，locate函数被调用。这个函数解析用户输入的地址文本到一个four-item的数组。这四个项目(地址，城市，州和邮编)相当于定义在定位器里的地址字段。可以通过查阅服务目录里的地理编码服务查出这些地址字段。例如， 这个页面显示本例使用的四个地理编码服务的地址字段。
当addressToLocations方法被调用，定位器开始搜索匹配值:
locator.addressToLocations(address);
但定位器结束查找匹配值， onAddressToLocationsComplete事件的监听器调用函数showResults，该函数增加匹配度超过80的候选地址到地图。候选地址通过传递给监听器的回调函数的AddressCandidate对象数组表示。每个候选地址包含地址的位置点，关联的新的图形。
本例使用InfoTemplate定义如何将地址信息反馈给用户。匹配的地址通过几何体放置在地图上，几何体被单击时默认显示一个信息窗口。InfoTemplate定义了在信息窗口中显示的文本的格式。本例中，信息模板被定义显示匹配地址和匹配度。
1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 5 <meta http-equiv="X-UA-Compatible" content="IE=7" /> 6 <title>Find Address</title> 7 <link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/1.5/js/dojo/dijit/themes/tundra/tundra.css"> 8 <script type="text/javascript" src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=1.5"></script> 9 <script type="text/javascript"> 10 dojo.require("esri.map"); 11 dojo.require("esri.tasks.locator"); 12 13 var map, locator; 14 15 function init() { 16 map = new esri.Map("map", { extent: new esri.geometry.Extent(-125, 28, -62, 45, new esri.SpatialReference({wkid:4326})) }); 17 var tiledMapServiceLayer = new esri.layers.ArcGISTiledMapServiceLayer("http://server.arcgisonline.com/ArcGIS/rest/services/ESRI_StreetMap_World_2D/MapServer"); 18 map.addLayer(tiledMapServiceLayer); 19 20 locator = new esri.tasks.Locator("http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Locators/ESRI_Geocode_USA/GeocodeServer"); 21 dojo.connect(locator, "onAddressToLocationsComplete", showResults);// onAddressToLocationsComplete事件的监听器调用函数showResults，该函数增加匹配度超过70的候选地址到地图 22 } 23 24 function locate() { 25 map.graphics.clear(); 26 var add = dojo.byId("address").value.split(","); 27 var address = { 28 Address : add[0], 29 City: add[1], 30 State: add[2], 31 Zip: add[3] 32 }; 33 locator.addressToLocations(address,["Loc_name"]);//开始搜索匹配值 34 } 35 //该函数增加匹配度超过70的候选地址到地图 36 function showResults(candidates) { 37 var candidate; 38 //简单注记样式。用于表示点和多点。 SimpleMarkerSymbol是用来显示点作为一个简单的形状，例如，一个圆圈。此外，符号可以有一个可选的轮廓。 39 var symbol = new esri.symbol.SimpleMarkerSymbol(); 40 //设置信息窗口显示的格式 41 var infoTemplate = new esri.InfoTemplate("Location", "Address: ${address}<br />Score: ${score}<br />Source locator: ${locatorName}"); 42 //设置样式为菱形 43 symbol.setStyle(esri.symbol.SimpleMarkerSymbol.STYLE_DIAMOND); 44 //设置颜色为红色 45 symbol.setColor(new dojo.Color([255,0,0,0.75])); 46 47 var points = new esri.geometry.Multipoint(map.spatialReference); 48 49 for (var i=0, j=candidates.length; i<j; i++) { 50 candidate = candidates[i]; 51 if (candidate.score > 70) {//如果匹配值大于70的话，将他加入到地图中 52 var attributes = { address: candidate.address, score:candidate.score, locatorName:candidate.attributes.Loc_name }; 53 var graphic = new esri.Graphic(candidate.location, symbol, attributes, infoTemplate); 54 map.graphics.add(graphic); 55 map.graphics.add(new esri.Graphic(candidate.location, new esri.symbol.TextSymbol(attributes.address).setOffset(0, 8))); 56 points.addPoint(candidate.location); 57 } 58 } 59 map.setExtent(points.getExtent().expand(3));//用原来的基础上扩展范围 60 } 61 62 dojo.addOnLoad(init); 63 </script> 64 </head> 65 <body class="tundra"> 66 Address : <input type="text" id="address" size="60" value="380 New York St, Redlands, CA, 92373" /> <i>(Address, City, State, Zip)</i> 67 <input type="button" value="Locate" onclick="locate()" /><br /> 68 <br /> 69 <div id="map" style="width:1200px; height:600px; border:1px solid #000;"></div> 70 </body> 71 </html>
