前端PIO搜索
实现功能
本次实验是将ArcGIS API For Js 和PIO区域搜索相结合，然后再利用bootstrap和jq进行相关的事件和样式的控制。
相关代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document
</title>
<link rel="stylesheet" href="https://js.arcgis.com/4.3/esri/css/main.css">
<script src="https://js.arcgis.com/4.3/"></script>
<style>
#result{
position: absolute;
z-index: 99;
top: 15px;
float: right;
right: 10px;
border-radius: 6px;
text-align: center;
background-color: rgba(198, 226, 36, 0.3)
}
html,
body,
#viewDiv {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
.search{
position: absolute;
top: 10px;
border-radius: 3px;
margin: auto 60px auto;
background-color: rgba(230, 36, 62, 0.4)
}
#ok{
position: relative;
left: 60px;
}
</style>
<link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script>
require([
"esri/Map",
"esri/views/MapView",
"esri/symbols/SimpleMarkerSymbol",
"esri/Graphic",
"esri/geometry/Point",
"dojo/domReady!"
], function(Map, MapView,SimpleMarkerSymbol,
Graphic,
Point) {
var map = new Map({
basemap: "streets"
});
var view = new MapView({
container: "viewDiv",
map: map,
zoom: 4,
center: [15, 65]
});
function addPoint(x,y){
let point = new Point({
longitude:x,
latitude: y
}),
markerSymbol = new SimpleMarkerSymbol({
color: [parseInt(Math.random()*255),parseInt(Math.random()*255),parseInt(Math.random()*255)],
outline: {
color: [255, 255, 255],
width: 2
}
}),
pointGraphic = new Graphic({
geometry: point,
symbol: markerSymbol
});
view.graphics.addMany([pointGraphic]);
}
$(function(){
$("#ok").click(function(){
var qq=document.getElementById("in").value;
var ww=document.getElementById("region").value;
$.ajax({
type:"GET",
url:"http://api.map.baidu.com/place/v2/search?q="+ww+"®ion="+qq+"&output=json&ak=***",
dataType:"jsonp",
success:function(data){
document.getElementById("result").innerHTML=null;
alert(data);
console.log(data);
var cc="";
var head="<table class='table table-striped'><th>名称</th><th>lat</th><th>lng</th>";
for(x=0;x<data.results.length;x++){
let a=data.results[x].location.lat,b=data.results[x].location.lng;
addPoint(b,a);
cc+="<tr>"+"<td>"+data.results[x].name+"</td><td>"+data.results[x].location.lat+"</td><td>"+data.results[x].location.lng+"</td>"+"</tr>";
view.popup.open({
title: "Reverse geocode: [" + b+ ", " + a + "]",
location: [b,a]
});
}
document.getElementById("result").innerHTML=head+cc+"</table>";
},
error:function(){
alert("error!");
console.log("error");
}
});
});
});
});
</script>
</head>
<body>
<div id="viewDiv"></div>
<div class="search">
<input id="in" class="form-control" placeholder="搜索城市" type="text">
<input type="text" class="form-control" placeholder="搜索建筑" name="pio" id="region">
<button id="ok" class="btn btn-success" style="margin:0 auto">Search
</button>
</div>
<div id="result">
</div>
</body>
</html>
实现效果展示
如果读者你还想再优雅一点的话
尝试着将代码优化一下，笔者真是懒了，最近还要考研~
就这样，做一只优雅的刺猬。
需要注意的的呀
在异步请求时，你可以选择多种方式在异步请求时，注意跨域问题，如果你足够优雅和聪明，一定会没问题滴哟
在GIS的沙场，传播有价值的东西!
