结合arcgis api for js进行PIO搜索

来源：互联网发布：奕乐麻将嘉兴玩网络编辑：程序博客网时间：2024/06/06 02:34

前端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: { // autocasts as new SimpleLineSymbol()          color: [255, 255, 255],          width: 2        }      }),              // Create a graphic and add the geometry and symbol to it      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+"&region="+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({          // Set the popup's title to the coordinates of the location          title: "Reverse geocode: [" + b+ ", " + a + "]",          location: [b,a] // Set the location of the popup to the clicked location        });        }            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的沙场，传播有价值的东西!

0 0