地图api

Web地图呈现原理

丶灬走出姿态 提交于 2019-12-25 10:58:43
【推荐】2019 Java 开发者跳槽指南.pdf(吐血整理) >>> 以下内容转载自木的树的文章《Web地图呈现原理》 作者: 木的树 链接: https://www.cnblogs.com/dojo-lzz/p/9250637.html 来源:博客园 著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。 本篇内容为大家揭开地图呈现原理,大家可通过 腾讯位置服务 官网了解地图并体验! 地图投影 对于接触互联网地图的同学来说,最开始接触的恐怕就是坐标转换的过程了。由于地球是个近似椭球的形状,有各种各样的椭球模型来模拟地球,最著名的也就是GPS系统使用的WGS84椭球了。但是这些椭球体的坐标使用的是经纬度,单位是角度。目前我们的地图大多是二维平面上展示,使用角度为基础来计算多有不便,所以有众多数学家提出各种不同的转换方式来将经纬度表示的位置转换成平面坐标,这个转换过程地图学上成为投影。投影的方式多种多样,对我们做互联网地图的来说,最重要的就是墨卡托投影的变体——Web墨卡托投影。我们先来看一下墨卡托投影的转换过程 (以赤道本初子午线为原点) 投影完毕后的结果就是: 先不要头疼数学公式,已经有很多类库做好了代码实现,比如leaflet: L.Projection.Mercator = { R: 6378137, R_MINOR: 6356752.314245179,

如何利用【百度地图API】,制作房产酒店地图?(下)——结合自己的数据库

≯℡__Kan透↙ 提交于 2019-12-25 06:57:39
摘要:应广大API爱好者要求,写了一篇利用自己数据库标点的文章…… --------------------------------------------------------- 一、先按照前两篇文章那样,做好静态文件。 请看两篇文章: 1、 制作自定义标注和自定义信息窗口 http://www.cnblogs.com/milkmap/archive/2011/08/04/2127663.html 2、 使用右侧列表打开信息窗口 http://www.cnblogs.com/milkmap/archive/2011/08/09/2132308.html 二、建立自己的数据库。 需要存入以下信息:经纬度、名称、地址、电话、价格等。 API爱好者们还可以添加其他数据,按照相同的办法储存和读取。 1. 创建数据表: y_map SQL 语句: CREATE TABLE IF NOT EXISTS `y_map` ( `id` int(11) NOT NULL, `point` varchar(128) NOT NULL, `title` varchar(128) NOT NULL, `address` varchar(128) NOT NULL, `price` float NOT NULL, `tel` varchar(20) NOT NULL, `level` int(11)

Redis geojson实现地图聚合效果

青春壹個敷衍的年華 提交于 2019-12-24 13:50:41
目录 地图聚合API Java Redis示例 地图聚合API https://openlayers.org/en/latest/examples/cluster.html 通过地图平移缩放事件控制地图四至范围内地图刷新和加载详细点控制。最终实现效果如下: Java Redis示例 添加geojson数据: /** * 更新GEOHASH值 * @param dwCode * @param coordinate * @param memberName "HLYID-score" */ public static void positonToGeohash(String dwCode,String hlyId,GeoCoordinate coordinate,String memberName){ String storeKey=XHT_ZZJG_GEOPOSITION+dwCode; String expireKey=XHT_ZZJG_GEOEXPIRE+dwCode; RedisUtil.geoadd(storeKey, coordinate, memberName); // 设置超时过期 RedisUtil.zadd(expireKey,System.currentTimeMillis(),memberName); Set<String> expiredKeys =

百度地图API详解之地图坐标系统

痞子三分冷 提交于 2019-12-21 04:38:48
  我们都知道地球是圆的,电脑显示器是平的,要想让位于球面的形状显示在平面的显示器上就必然需要一个转换过程,这个过程就叫做 投影 (Projection)。在地球上我们通过经纬度来描述某个位置,而经过投影之后的地图也有自己的坐标系统,这篇文章就来详细介绍在百度地图API中涉及的各种坐标体系。 在百度地图API中,你需要了解如下坐标系: 经纬度:通过经度(longitude)和纬度(latitude)描述的地球上的某个位置。 平面坐标:投影之后的坐标(用x和y描述),用于在平面上标识某个位置。 像素坐标:描述不同级别下地图上某点的位置。 图块坐标:地图图块编号(用x和y描述)。 可视区域坐标:地图可视区域的坐标系(用x和y描述)。 覆盖物坐标:覆盖物相对于容器的坐标(用x和y描述)。 别被这么多的坐标系吓着,看完了后面的讲解相信你会逐渐理解它们。 经纬度 这个就不多说了,不熟悉的可以翻翻地理书。但需要注意的是即便同是经纬度坐标也可能属于不同的坐标体系。一般GPS设备获取的经纬度属于WGS84坐标系,这是一个比较通用的坐标体系。由于某些原因国内不能直接使用WGS84坐标,因此百度地图API的经纬度是经过加密偏移的。 平面坐标 前面说过,球面上的形状需要经过投影才能变换为平面上的形状,变换后就需要有一个平面坐标系统来描述地图上某个位置。百度地图API默认使用墨卡托投影(Mercator

百度地图定位获取当前位置

本小妞迷上赌 提交于 2019-12-21 04:21:10
1.百度地图api地址: http://lbsyun.baidu.com/index.php?title=jspopular 该项目中使用的是JavaScript API v2.0 先在百度地图的控制台创建应用,选择相应的权限,创建成功后就能得到相应的密钥 在public的index.html中用script标签直接引入百度地图的js <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=你的密钥"></script> //通过百度地图获取当前定位 var geolocation = new BMap.Geolocation(); var geoc = new BMap.Geocoder(); geolocation.getCurrentPosition(function(r){ // r为当前位置的获取到的对象,里面有各类属性 console.log(r) geoc.getLocation(r.point, function(rs){ var addComp = rs.addressComponents; //打印当前位置的省、市、区、街道、街道号 // console.log(addComp.province + ", " + addComp.city + ", " + addComp

Google Map 谷歌地图

痞子三分冷 提交于 2019-12-16 14:41:27
<script> var map; function initMap() { var position = new google.maps.LatLng(1.539187, 103.647115), map = new google.maps.Map(document.getElementById('map'), { center: position, zoom: 15, styles: [去网站弄] }); var marker = new google.maps.Marker({ position: position, map: map, animation: google.maps.Animation.DROP, // BOUNCE, DROP, lo, no icon: 'http://www.zoominn.com.my/i/ModuleMap_icon.png' }); marker.addListener('click', function () { var ttc = document.getElementById('mapContent').cloneNode(true); var infoWindow = new google.maps.InfoWindow; infoWindow.setPosition(position); infoWindow

干货 | 使用pyecharts绘制交互式动态地图

早过忘川 提交于 2019-12-15 03:19:20
干货 | 使用pyecharts绘制交互式动态地图 说到pyecharts,相信很多人不会陌生,一个优秀的python可视化包。 pyecharts是中国人开发的,相比较matplotlib、seaborn等老牌可视化库,pyecharts是十分符合国内用户习惯的,尤其在地理空间图表方面。 本文是想试探一下pyecharts在绘制地理图表方面的功底如何,那就开始吧! 安装pyecharts pyecharts支持pip、conda安装,快捷方便,推荐在jupyter notebook环境下愉快的玩耍。 pip install pyecharts 本文python版本为3.6,演示环境为jupyter notebook。 pyecharts地理图表可视化 1、导入相关模块 pyecharts库中负责地理坐标系的模块是 Geo ,负责地图的模块是 Map ,负责百度地图的模块是 BMap ,负责图表配置的模块是 options 。在 pyecharts 中,图表的一切皆通过 options来修饰调整。 另提一句,因为需要用到案例数据,这里还需要导入样本库-sample from example . commons import Faker from pyecharts import options as opts from pyecharts . charts import Geo

在vue项目中调用百度地图API及其基本用法

北城以北 提交于 2019-12-11 23:10:54
调用步骤 申请百度地图密钥 在index.html中添加百度地图JavaScript API接口 在webpack.base.conf.js配置文件中配置BMap 创建vue文件map.vue,然后各种引用 。。。。 一、申请百度地图密钥 JavaScript API v1.4以及以前的版本无序申请秘钥(ak),自v1.5版本开始需要先申请秘钥(ak),才可以使用,如需获取更高的配额,需要申请 认证企业用户。 链接: 百度地图API 链接地址: 在这里我遇到一个坑: 选择服务器端跟选择浏览器端密钥有所区别,大家按照自己的需求选,要是没选择正确后面会说你的百度密钥未授权使用地图API,那只需要重新申请一个密钥就是了,白名单我是直接填 (用来练习而已)。 * 二、在index.html中添加百度地图JavaScript API接口 <script type="text/javascript" src="http://api.map.baidu.com/api?ak=yourkey&v=2.0&services=false"></script> 二、在webpack.base.conf.js配置文件中配置BMap module.exports = { entry: { app: './src/main.js' }, // 下面才是我们所要配置的 externals: { 'BMap':

百度地图调用加载显示Marker,并添加点击事件

扶醉桌前 提交于 2019-12-11 00:40:01
百度地图调用加载显示Marker,并添加点击事件 注册百度开发者账号,申请应用AK 百度地图开发平台官网 点击右上角控制台,选择创建应用 创建应用,勾选浏览器端,白名单填写* 注:如上线更改为公网IP,如浏览器端显示调用选择浏览器端,如服务端调用数据接口开发则选择服务端,按需创建即可。此处为浏览器端加载显示地图,故选择浏览器端 点击确认,获取AK 返回控制台-我的应用即可查看应用AK 网页端标签引入 < script type = "text/javascript" src = "http://api.map.baidu.com/api?v=2.0&ak=申请的ak" > < / script > 页面声明 声明div容器加载显示地图,注div要有宽高,id为加载绑定地图的要素 < div class = "map-box" id = "map" > < / div > 调用api加载显示地图 var map ; //Map实例 //地图中心坐标 var mapCenterX = 126.534943 ; var mapCenterY = 45.808585 ; //加载显示marker数组 var markerArr ; function map_init ( ) { //传入绑定的地图容器id map = new BMap . Map ( "map" ) ; //初始化地图

高德地图Web端JavaScript API开发(一)---地图显示

不羁岁月 提交于 2019-12-07 06:31:26
之前做过与高德地图有关的项目开发,高德地图的API使用起来很方便。 高德地图 JavaScript API,是由 JavaScript 语言编写的应用程序接口,它能够帮助您在网站或移动端中构建功能丰富、交互性强的地图应用程序。除了基本地图功能的接口外,JavaScript API还提供了诸如地点搜索、路线规划、定位、地址解析、行政区查询等数据服务,您可以根据自己的需要进行选择性使用。目前,最新版本为 JavaScript API V1.4.0 。 好东西要大家分享,现将高德的开发过程整理一下,与各位互相交流学习 。 首先总结一下地图引用的基本流程,完成这些流程即可完成地图的引入。话不多说,Let's Go! 在官网申请JSAPI的开发者Key; ---> 登录高德账号,完成key申请 引入高德JavaScript API入口脚本 <script type="text/javascript" src="http://webapi.amap.com/maps?v=1.4.0&key=您申请的key值"></script> 创建地图容器 ,在页面的body中添加一个div容器 <div id="container"></div> 可以使用CSS样式控制地图容器的大小,可以不设置 #container {width:300px; height: 180px; } 创建地图 var map