arcgis api结合高德poi搜索接口

应用场景：通过高德poi查询接口，在天地图上打点展示，效果如下

实现步骤:
1、通过arcgis api 加载天地图。(资源里有已经封装好的天地图js，引入即可使用)
2、通过高德poi查询接口获取数据。(需要在高德地图API申请web服务的密钥)
3、通过dojo发布者模式，发布和接收经纬度信息的任务。(不是必须，也可用其他方法实现)
4、将接收到的经纬度信息进行坐标系转换，然后打点到地图上。(资源里有在前端就可以实现坐标系转换函数的js)

实现代码，下载资源后，可直接打开：
资源下载：包含封装了天地图的js、前端实现坐标系转换的函数js：资源下载

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<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="width=device-width, initial-scale=1.0"><title>POI搜索</title><link rel="stylesheet" href="https://js.arcgis.com/3.26/esri/css/esri.css"><style>body,html {margin: 0;padding: 0;width: 100%;height: 100%;font-family: Arial;}#map {width: 100%;height: 100%;margin: 0;padding: 0;border: 0px dashed black;background-color: rgb(0, 38, 48);}.mapsearch {width: 220px;position: fixed;left: 3px;top: 45px;}.mapsearch .search-input {width: 350px;height: 30px;border: 1px solid #eee;overflow: hidden;background-color: rgb(255, 255, 255);}.mapsearch .search-input .input {width: 313px;height: 28px;padding-left: 5px;font-size: 14px;border: none;outline: 0;}.mapsearch .search-input .btn-search {float: right;width: 30px;height: 30px;border: none;outline: 0;background-color: #3385ff;background-image: url("images/search2.png");background-size: 30px 30px;cursor: pointer;}.mapsearch .search-list {display: none;width: 350px;height: auto;border: 1px solid #eee;margin-top: 3px;background-color: rgba(0, 0, 0, 0.75);position: absolute;top: 30px;}.mapsearch .search-list li {width: 97%;margin-left: 5px;border-bottom: 1px solid #aaa;color: #fff;font-size: 14px;cursor: pointer;}.mapsearch .search-list li.selected {background-color: #F3F3F3;color: #999;}.mapsearch .search-list li:hover {background-color: #4797f3;}</style>
</head>
<body> <div id="map"><div class="mapsearch" style="z-index: 999;"><div class="search-input" style="position: fixed;left: 5px;display: inline;top: 10px;"><input id="search-text" class="input" type="text" value="" /><div id="btn-search" data-dialog-btn="usersDialog" class="btn-search"></div></div><div class="search-list" id="search-list"><ul></ul></div></div>
</div>
</body>
<script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="index.js"></script> <!-- 引入前端实际坐标系转换的函数js -->
<script src="https://js.arcgis.com/3.26/"></script>
<script type="text/javascript">//搜索按钮点击$(document).ready(function () {$("#btn-search").click(function () {$("#search-list").show() //列表展开//拼接高德POI查询接口urlvar searchUrl = "https://restapi.amap.com/v3/place/text?" + "&output=json"  //返回json格式+ "&offset=20"  //每页返回20条数据+ "&page=1"  //第一页+ "&key=b1d51f782b0316d4cae6410f2f258462" //申请的高德api密钥：web服务 + "&keywords=" + $("#search-text").val(); //搜索框关键字console.log(searchUrl)getSearchList(searchUrl);})})//获取搜索列表function getSearchList (searchText) {//从poi查询接口获取数据$.get("" + searchText, function (data) {var addresses = eval(data);console.log(addresses)var html = ""//循环获取每条数据$.each(addresses.pois, function (i, item) {//拼接列表内容html += '<li  location="' + item.location + '" address="' + item.address + '">' + item.name + '(' + item.cityname + item.adname + ')' + '</li>';});$("#search-list ul").html("");//将内容添加到列表$("#search-list ul").append(html); //鼠标移动到列表某条数据时将其显示到搜索框$("#search-list ul li").mouseover(function () { $("#search-text").val($(this).text());});//点击列表里内容时$("#search-list ul li").click(function () {$("#search-list").hide(); //隐藏列表//获得经纬度和名称信息var location = $(this).attr("location");var lon = location.split(",")[0];var lat = location.split(",")[1];var name = $(this).attr("name");//发布任务dojo.topic.publish("map_cell_selected", { "lon": lon, "lat": lat, "name": name });});})}
</script>
<script type="text/javascript">dojo.require("dojo.topic"); //引入dojo发布者模式var map;require(["esri/map","esri/layers/ArcGISDynamicMapServiceLayer","esri/layers/ArcGISTiledMapServiceLayer","esri/symbols/PictureMarkerSymbol","esri/graphic","esri/SpatialReference","esri/geometry/Point","TianDiTuLayer.js", //封装了天地图的js"esri/geometry/Extent","dojo/domReady!"], function(Map,ArcGISDynamicMapServiceLayer,ArcGISTiledMapServiceLayer,PictureMarkerSymbol, Graphic,SpatialReference, Point,TianDiTuLayer,Extent) {var mapExtent = new Extent({xmax: 110.4372831869446,xmin: 110.14550416056568,ymax: 20.09132053413222,ymin: 19.947106161490854,spatialReference: {wkid: 4326}})map = new Map("map", {extent: mapExtent,sliderStyle: "small",logo: false,});map.on('load', function () {map.hideZoomSlider()map.hidePanArrows()})var tdMap = new TianDiTuLayer("tianditumap");   //天地街道图var tdMapi = new TianDiTuLayer("tianditumapi");  //天地标注图map.addLayer(tdMap)map.addLayer(tdMapi)//接收任务dojo.topic.subscribe("map_cell_selected", function (Json) {//将字符串的经纬度转为float类型let x = parseFloat(Json.lon) let y = parseFloat(Json.lat)//由于高度poi查询接口获取的经纬度是采用火星坐标系，而底图使用的是天地图WGS84//所有要将火星坐标系转化为wgs84let gcj02towgs84 = coordtransform.gcj02towgs84(x, y)let lon = gcj02towgs84[0]let lat = gcj02towgs84[1]console.log(lon, lat)let point = new Point(lon, lat);let symbol = new PictureMarkerSymbol("images/green.png", 15, 20).setOffset(0, 15);let gra = new Graphic(point);gra.symbol = symbol;map.centerAndZoom(point, 12);map.graphics.clear();map.graphics.add(gra);    });});
</script>
</html>

arcgis api结合高德poi搜索接口相关推荐

基于高德POI搜索的地址类型判断
背景: 我是一家做外卖运营公司的BI分析师,刚进入公司,运营找到我说希望能帮助每一家外卖店定位其半径3公里(正常的配送范围)内商务写字楼多还是住宅类型多,这样可以方便在工作日和周末区分指定策略,住宅类 ...
高德POI搜索：地点关键词搜索
curl --location --request GET 'https://restapi.amap.com/v3/assistant/inputtips?output=json&city= ...
前端系列——vue2+高德地图web端开发（poi搜索两种方式）
前端系列--vue2+高德地图web端开发(poi搜索) 前言基础什么是poi搜索 1. 输入提示结合poi搜索官方代码步骤 1.进行plugins插件注册 2.data中编写placeSea ...
[android] 百度地图开发 (二).定位城市位置和城市POI搜索
一. 百度地图城市定位和POI搜索知识上一篇文章"百度地图开发(一)"中讲述了如何申请百度APIKey及解决显示空白网格的问题.该篇文章主要讲述如何定位城市位置.定位 ...
ArcGIS API for JavaScript 各个版本的SDK下载和发布，ArcGIS Runtime SDK for Android、ArcGIS Runtime SDK for Java等
ArcGIS API for JS 官网地址:https://developers.arcgis.com/javascript/ ArcGIS API for JavaScript 各个版本的SDK下 ...
虾米音乐API破解，python模拟接口
就是记录一下虾米音乐部分API模拟过程,如有不当之处请联系, 我以搜索接口为例其余接口都是类似操作, 虾米音乐API加密解析 1 搜索接口解析 get请求: https://www.xiami.co ...
【高德地图API】从零开始学高德JS API（四）搜索服务——POI搜索|自动完成|输入提示|行政区域|交叉路口|自有数据检索
原文地址为: [高德地图API]从零开始学高德JS API(四)搜索服务--POI搜索|自动完成|输入提示|行政区域|交叉路口|自有数据检索摘要:地图服务,大家能想到哪些?POI搜素,输入提示,地址 ...
java中poi搜索工程_爬取高德地图poi数据
高德地图搜索poi的api介绍地址当前想法是爬取目标区域(作者所在小县城)的所有poi数据,存到数据库中作为原始数据,然后供其它系统调用,因为之前爬取过百度地图的poi数据,所以这次工作就驾轻就熟了 ...
Android实现高德地图POI搜索
效果图如下: 导入高德地图的搜索服务包到工程的libs目录中,并配置好权限与用户KEY. 权限如下: <uses-permission android:name="android.pe ...

arcgis api结合高德poi搜索接口

arcgis api结合高德poi搜索接口相关推荐

最新文章

热门文章