地图api

jQuery调用百度地图并https支持http

試著忘記壹切 提交于 2019-11-30 10:53:16
写手在作画的夜晚,留下路人惊叹 和大家分享一个jQuery调用百度地图并且https支持http,话不多说 注:在申请密钥匙版本要是3.0的才可以( 这可能是最重要的地方了 ) 百度地图生成器 http://api.map.baidu.com/lbsapi/creatmap/index.html 页面引入申请的密钥 <script type="text/javascript" src="https://api.map.baidu.com/api?v=3.0&ak=OLV2W7QHEE9btblyddTkBQBWhjXw030h"></script> 页面结构 <div style="width:100%;height:100%;border:#ccc solid 1px;" id="dituContent"> </div> js:( 都是在百度地图生成器呈现的 ) //创建和初始化地图函数: function initMap() { createMap(); //创建地图 setMapEvent(); //设置地图事件 addMapControl(); //向地图添加控件 addMarker(); //向地图中添加marker } //创建地图函数: function createMap() { var map = new BMap.Map("dituContent"); /

vue项目接入百度地图

痴心易碎 提交于 2019-11-30 04:06:46
方法一 :使用第三方工具 vue-baidu-map 安装命令: yarn add vue-baidu-map --save 文档地址: https://dafrok.github.io/vue-baidu-map/#/zh/start/usage 案例01: https://blog.csdn.net/playboyanta123/article/details/86514891 案例02: https://www.cnblogs.com/wangqi2019/p/11040239.html 为了页面流畅,建议还是局部引用(觉得这三个满足一般的需求了),如下: import { BaiduMap, BmScale, BmGeolocation } from 'vue-baidu-map' HTML代码,在需要引入百度地图的地方加入下面代码 <!--接入百度地图--> <baidu-map style=" height: 600px;" :center="map_center" :zoom="my_zoom" :scroll-wheel-zoom="my_scroll_wheel_zoom" class="baidu-map-view" @ready="map_handler" ak="分配给你的百度key"> </baidu-map> 如果没有百度地图key就去申请一个,申请网址

UE4根据真实地图来生成行走道路(一)

拜拜、爱过 提交于 2019-11-30 04:05:33
起因:前不久看美术在UE4地图里面拉Spline线来作为演示的步行道路,每两个不同地点就要按照地图道路来拉出演示线,所以我突发奇想,能不能用现有的一些地图API输入经纬度,来给我生成行走道路(百度地图,高德地图),后面我去看了一下,发现这个方法可行,现在我们开始行动吧。 API选择:现在很多地图APP都提供了API(谷歌,百度,高德),支持的语言也多,但都需要注册,注册这些API的Key我就不演示了,网上有很多这方面的教程,我选用的是 百度API ,调用API数据使用的是 Python ,当然你也可以使用其他方法,使用编写Python的IDE是 Jupyter Notebook ,用这个编写好处我就不说了,你也可以用其他IDE,现在开始我们的入坑之路吧。 首先我们打开百度地图API中德WebApi服务中的 轻量级路线规划 ,最开始编译的时候可以选取一个API开始,后面再进行增添 你点击一个,你会发现必须输入哪些参数,和可选哪些参数,首先必须输入的是开发者AK(就是你自己申请的Key),还有起点经纬度和终点经纬度,其他可以不用填,我们在Python中的写法: url = 'http://api.map.baidu.com/direction/v2/transit?' #步行 params = { 'ak':'ZWiWngbeBeGe6ncQz6eFdEp2jGCeGjqH',

高德地图行政区划获取

隐身守侯 提交于 2019-11-30 01:18:35
  做公司项目的时候需要在地图放大缩小后查看那个区域的数据,刚开始想到根据高德地图的缩放比例尺来判断经纬度坐标精确度应该精确带几位,但是后面看到高德地图API里面有个获取地区当前行政区的实例,发现这个实例可以用上来,比我自己想的简单了很多。废话不多说上链接: https://lbs.amap.com/api/javascript-api/example/map/get-current-administrative-region   效果如下图所示: //获取并展示当前城市信息 function logMapinfo(){ map.getCity( function(info){ var node = new PrettyJSON.view.Node({ el: document.querySelector("#map-city"), data: info }); citycode = info.citycode; district = info.district; }); } //绑定地图移动事件 map.on('moveend', logMapinfo);   获取了区县名称跟城市编码后跟行政区编码与城市编码表去匹配就可以找到对应的地市和省份,如果没有这个表可以去下载高德的Excel文件后导入数据,下载链接: https://lbs.amap.com/api/javascript

百度地图WEB端判断用户是否在网格范围内

£可爱£侵袭症+ 提交于 2019-11-29 23:43:42
在pc端设置商家的配送范围,用户在下单时,根据用户设置的配送地点判断是否在可配送范围内,并给用户相应的提示。 下面说下我的实现思路: 1.用百度地图在PC端设置配送范围,可拖拽选择 2.根据用户设置的配送地址判断是否在配送范围内 一、百度地图PC端获取范围 改动百度地图官网的demo,设置配送范围。 思路:获取多边形的顶点,以json的形式保存到数据库。 百度API关于多边形覆盖物: 构造函数: Polygon(points:Array[, opts:PolygonOptions]) 创建多边形覆盖物 方法: setPath(path:Array) none 设置多边型的点数组(自1.2新增) getPath() Array 返回多边型的点数组(自1.2新增) 实现: //设置配送范围 function setRange(_point, _ppoints) { var polygon = new BMap.Polygon(_ppoints, { strokeColor: "blue", strokeWeight: 2, strokeOpacity: 0.5 }); //创建多边形 map.addOverlay(polygon); //增加多边形 polygon.enableEditing(); //允许编辑 polygon.addEventListener("lineupdate"

百度地图WEB端判断用户是否在网格范围内

二次信任 提交于 2019-11-29 23:42:00
在pc端设置商家的配送范围,用户在下单时,根据用户设置的配送地点判断是否在可配送范围内,并给用户相应的提示。 下面说下我的实现思路: 1.用百度地图在PC端设置配送范围,可拖拽选择 2.根据用户设置的配送地址判断是否在配送范围内 一、百度地图PC端获取范围 改动百度地图官网的demo,设置配送范围。 思路:获取多边形的顶点,以json的形式保存到数据库。 百度API关于多边形覆盖物: 构造函数: Polygon(points:Array[, opts:PolygonOptions]) 创建多边形覆盖物 方法: setPath(path:Array) none 设置多边型的点数组(自1.2新增) getPath() Array 返回多边型的点数组(自1.2新增) 实现: //设置配送范围 function setRange(_point, _ppoints) { var polygon = new BMap.Polygon(_ppoints, { strokeColor: "blue", strokeWeight: 2, strokeOpacity: 0.5 }); //创建多边形 map.addOverlay(polygon); //增加多边形 polygon.enableEditing(); //允许编辑 polygon.addEventListener("lineupdate"

引路蜂地图应用详细解说

混江龙づ霸主 提交于 2019-11-29 17:54:33
今天给大家详细介绍 引路蜂地图应用开发, 这里提供一个比较完整的引路蜂地图Android应用源码下载,基本涵盖了引路蜂地图API的所有功能,包括离线地图,路径查询,地址查询,地图模式选择等。设备上在Galaxy Nexus 和 Nexus S ,Nexus 7 Tablet 测试通过,可以做为你学习或开发引路蜂地图应用的参考,该应用提供学习使用,不得商业运作等。 主界面 搜索 ,包括: 地址查询, 本地查询,IP地图查询,经纬度查询 查询结果显示 路径查询 路径地图显示 地图模式:支持多种地图模式,并可以支持自定义地图 地址反编码 关于离线地图 应用缺省读取所有存放在SD卡guidebee 目录下所有 .map 文件,代码如下: MapTileStreamReader streamReader = SharedMapInstance.mapTileDownloadManager .getInteralMapTileStreamReader(); SharedMapInstance.worldMapFileStream = getResources() .openRawResource(R.raw.world); MapTiledZone worldmapZone = new MapTiledZone(new DataInputStream( SharedMapInstance

[置顶] 开源引路蜂地图开发包

血红的双手。 提交于 2019-11-29 17:53:35
由于时间上的问题,已经有很长时间没有对引路蜂地图开发添加功能,因此决定对引路蜂地图开发包,此外征召有兴趣的开发人员共同开发引路蜂地图包 (联系Email:james.shen@guidebee.com) 开源代码经过整理,将逐步投放在github ,目前采用GPL 开源协议。 GitHub 地址 为 https://github.com/guidebee/ 下 引路蜂地图包分为Java和.Net版本,支持移动平台和手机平台,其主要功能如下: 地图开发 提起地图开发包,Google 地图和Bing 地图主要应用于Web应用,在离线方式和移动平台上它们并没有提供足够的支持,比如在Java ME平台上使用Google地图API或是在Android,iPhone平台上使用Bing地图。如在中国,想在Windows Mobile 平台上使用 MapABC地图API都不是很方便。 引路蜂地图开发包提供了对几乎所有软件平台(桌面和移动平台)的支持,采用统一的接口使用包括Google 地图,Bing地图,MapABC地图在内多达二十多种地图类型,并在同一开发包中支持离线地图,矢量地图显示。 下图显示了引路蜂地图开发包支持的开发平台,软件包以三个不同的开发包提供对各个平台的支持: Java ME 地图开发包 MIDP/LWUIT/Blackberry Java SE 地图开发包 Android

小程序选择地图

血红的双手。 提交于 2019-11-29 17:53:05
小程序wx.chooseLocation地图选点确认地址 /** * 生命周期函数--监听页面加载 */ onLoad: function (options) { console.log(options); if (options.jumpUrl){ wx.chooseLocation({ success: function (res) { let str = `${options.jumpUrl}&latitude=${res.latitude}&longitude=${res.longitude}&address=${res.address}` wx.redirectTo({ url: `../../webView/webView?s=map&str=${encodeURIComponent(str)}` }) } }) } },   前沿 :小程序选择地图,上述功能是别的页面进来会传url地址,onLoad函数 wx.chooseLocation 选择后会有经度纬度,和详细地址参数,返回给webView页面,并把参数放在str 对应上。 一、微信小程序位置接口wx.chooseLocation 本接口使用简单,用户用户通过腾讯地图选择一个位置。 本接口能获得选择位置的简称,全称,以及坐标。 //选择地址 wx.chooseLocation({ success:

【云图】如何制作全国KTV查询系统?

倾然丶 夕夏残阳落幕 提交于 2019-11-29 14:19:46
摘要:本文以【唱吧】531麦霸音乐节为案例,详细解读了如何导入自有数据到高德云图,并进行检索和展示。最后,调起高德mobile地图来进行路线规划和周边查询。 本案例可以应用在微信开发平台,支付宝公众服务上,适合餐饮商家,汽车4S店,银行,停车场等业务。 由于使用高德云图+URI API的方式实现,开发者无需进行繁琐的数据库操作,即可实现自有数据的存储与检索。 -------------------------------------------------------------- 一、数据准备 从唱吧531麦霸节官网获得数据: http://changba.com/yunying/ktvStaticList.php 拷贝到excel,另存为CSV格式,并改成UTF-8或者GBK编码。 二、导入数据 登录云图: http://yuntu.amap.com/datamanager/index.html 点击新建地图: 导入刚才的数据: 点击预览: 出现全国KTV分布图: 三、UE设计图 1、对于KTV的展示,有列表模式和地图模式2种。 2、按照城市检索并展示KTV数据。 3、点击某个KTV,跳转到高德mobile地图,进行路线规划。 四、云图展示全国KTV 采用云图层的方法,将麻点图展示出来。 //地图-云图层 mapObj.plugin('AMap.CloudDataLayer',