ArcGIS For JavaScript API Locate points of interest(找到景点)————（十九）
描述：
此示例演示如何使用地理编码部件，在版本3.3中，找到兴趣点和显示图形在地图上。测试样品的行为输入的兴趣点，如“disney(迪士尼)”，并查看结果。
参考联接：http://help.arcgis.com/en/webapi/javascript/arcgis/jssamples/#sample/locator_poi
在线演示：http://help.arcgis.com/en/webapi/javascript/arcgis/samples/locator_poi/index.html
配置符号API：http://help.arcgis.com/zh-CN/webapps/sharepoint/help/index.html#//015900000024000000
代码分析如下：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=7,IE=9" />
<meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"/>
<title>ArcGIS API for JavaScript | Place Finding</title>
<link rel="stylesheet" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.3/js/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="http://serverapi.arcgisonline.com/jsapi/arcgis/3.3"></script>
<script>
// 导入包
dojo.require("esri.map");
dojo.require("esri.dijit.Popup");
dojo.require("esri.dijit.Geocoder");
var map, geocoder;
dojo.ready(function() {
var popup = new esri.dijit.Popup(null, dojo.create("div"));
// 创建地图
map = new esri.Map("map",{
basemap: "topo", // 指定的地图底图。以下是有效选项："streets","satellite","hybrid","topo","gray","oceans","national-geographic","osm".
center: [ -100, 37 ], // long, lat
zoom: 5,
infoWindow: popup
});
// 添加图形层进行地理编码结果
map.addLayer(new esri.layers.GraphicsLayer({
id: "results"
}));
// 创建地理编码
geocoder = new esri.dijit.Geocoder({
autoNavigate: false, // 如果为true，部件将导航到选定的位置。
maxLocations: 20, // 在结果菜单中显示位置的最大值
map: map, // 对应map地图，必填项
arcgisGeocoder: {
url: "http://geocode.arcgis.com/arcgis/rest/services/World/GeocodeServer",
name: "Esri World Geocoder",
placeholder: "找到位置",
sourceCountry: "USA" // 限制搜索美国
}
}, "search");
geocoder.startup(); // 开启
geocoder.focus(); // 获得焦点
var symbol = new esri.symbol.PictureMarkerSymbol({
"angle":0, // 角
"xoffset":0, // x偏移
"yoffset":10, // y偏移
"type":"esriPMS", // 参考上面配置符号API链接
"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) { // 当搜索返回的结果时候触发。
console.log("查找结果: ", response);
var l = map.getLayer("results"); // 返回在地图上的一个单独 Layer。
l.clear(); // 清除之前显示
map.infoWindow.hide(); // 隐藏
// 遍历搜索结果
dojo.forEach(response.results, function(r) {
alert("r.feature.attributes.name: "+r.feature.attributes.name+",r.name: "+r.name);
r.feature.attributes.name = r.name;
r.feature.setSymbol(symbol); // 添加图标
r.feature.setInfoTemplate(template); // 添加消息框
l.add(r.feature);
});
});
});
</script>
</head>
<body>
<div id="search"></div>
<div id="map"></div>
</body>
</html>
当输入景点名称，显示结果如下：