java高德地图api开发平台_【高德地图API】从零开始学高德JS API(一)地图展现...
摘要:关于地图的显示,我想大家最关心的就是麻点图,自定义底图的解决方案了吧。在过去,marker大于500之后,浏览器开始逐渐卡死,大家都开始寻找解决方案,比如聚合marker啊,比如麻点图啊。聚合marker里面还有一些复杂的算法,而麻点图,最让大家头疼的,就是如何生成麻点图,如何切图,如何把图片贴到地图上,还有如何定位图片的位置吧。以前那么复杂的一系列操作,居然让云图的可视化操作一下子解决了。现在只要点一点鼠标,麻点图就自动生成了。真是广大LBS开发者的福音。
以前写过从零开始学百度地图API系列,写得比较浅显。如今,自己在LBS领域成长了几年,学到比较多的专业知识,所以此次再次写到”从零系列”,希望加上更多功能,更多想法。比如这期的地图展现,不单单只是告诉大家,一张2D地图如何用代码写出来,同时,还会加上3D地图,卫星图,街景,交通流量图,麻点图,仙剑奇侠传地图等。也希望借此可以和大家更多的交流。
一、万物的首先第一步,当然是申请一个key。
登录之后,点新建地图,就有一个自动的key了。
key在右上角密钥管理处
二、 2D地图
2D地图,就是一张普通的高德地图。只需要简单几句话就可以实现。
var mapObj;
var point = new AMap.LngLat(120.148373,30.290422);
function mapInit(){ //初始化地图对象,加载地图。
mapObj = new AMap.Map("iCenter",{
center : point, //地图中心点
level : 15 //地图显示的缩放级别
});
}
其中,level指的是地图级别,默认为[3,18]。3为世界地图,18为街道级地图。
2D效果图:
三、实时路况
添加实时路况,只需要两句话
var trafficLayer = new AMap.TileLayer.Traffic({zIndex:10}); //实时路况图层
trafficLayer.setMap(mapObj); //添加实时路况图层
消除实时路况有2种方法,一是隐藏hide方法,二是重置地图setMap(null)
trafficLayer.setMap(null); //隐藏实时路况图层
trafficLayer.hide(); //隐藏实时路况图层
实时路况效果:
四、路网,卫星图
路网、卫星图,都跟实时路况路况差不多,只是换了个类名。
添加路网、卫星图,只需要两句话
var roadNetLayer = new AMap.TileLayer.RoadNet({zIndex:10}); //实例化路网图层
roadNetLayer.setMap(mapObj); //在map中添加路网图层
var satellLayer = new AMap.TileLayer.Satellite({zIndex:10}); //实例化卫星图
satellLayer.setMap(mapObj); //在map中添加卫星图
消除路网、卫星图,有2种方法,一是隐藏hide方法,二是重置地图setMap(null)
roadNetLayer.setMap(null); //隐藏路网
roadNetLayer.hide(); //隐藏路网
satellLayer.setMap(null); //隐藏卫星图
satellLayer.hide(); //隐藏卫星图
路网、卫星图效果:
五、3D地图
3D地图,是在地图比较详细的级别17-18的时候,有三维楼块效果的地图。
所以,要看到3D效果,必须把地图级别调整到17-18才可以看到。
var buildingLayer = new AMap.Buildings(); //实例化3D地图图层
buildingLayer.setMap(mapObj); //在map中添加3D图层
mapObj.setZoom(18); //改变地图级别到17-18
3D地图没有hide方法,所以隐藏他,需要重置地图。
buildingLayer.setMap(null);
3D地图效果:
六、麻点图
(记得以前研究百度地图API的时候,麻点图的制作很苦难,要自己去对准坐标,自己生成麻点图,然后自己切片……实在费力……)
高德地图API最好用的就是麻点图。不用自己生成麻点图,不用自己切图。只需要在云图上点一点,就可以完成所有操作。
新建或打开已有的地图:
点右上角的按钮,可以手工一个一个标注你自己的麻点。
当然也可以批量导入你的数据。
数据填充完毕后,记录下你的tableid。这就是你的云图层(麻点图)的id,放到下面的代码里。
//加载云图层插件
mapObj.plugin('AMap.CloudDataLayer', function () {
var layerOptions = {
query:{keywords: ''},
clickable:true
};
var cloudDataLayer = new AMap.CloudDataLayer('【您的tableid】', layerOptions); //实例化云图层类
cloudDataLayer.setMap(mapObj); //叠加云图层到地图
});
云图层,就是麻点图,是实时渲染的,你在云图管理台操作之后,立马在你的前台得到显示。
这真是我用过最好用的麻点图了。marker大于500之后,终于有如此方便的解决方案了。
更多关于云图的教程,可以看我以前发过的教程
七、仙剑地图
这个算是投机取巧,将仙剑地图直接覆盖在高德地图上,属于图片覆盖物。
图片覆盖物需要指定一个显示范围,取左下角和右上角。
显示范围设定后,不管地图放大缩小,图片都只在这个范围中显示。
这样的图片覆盖物,比较适合制作校园地图,厂区地图,小区地图等。
而且,跟云图一样,图片覆盖物不需要切图。
(又想感叹一句!真真是开发者的福音!为何高德API做得那么好,之前我都不知道!!)
var bounds = new AMap.Bounds(new AMap.LngLat(120.120993,30.271596), new AMap.LngLat(120.184593,30.309171)),
groundImageOpts = {
opacity: 1, //图片透明度
clickable: true,//图片相应鼠标点击事件,默认:false
map: mapObj //图片叠加的地图对象
};
//实例化一个图片覆盖物对象
var groundImage = new AMap.GroundImage('xianjian.jpg', bounds, groundImageOpts);
仙剑地图效果:
八、自定义地图
这里用谷歌的底图作为例子,将高德底图直接换为谷歌底图。跟上一段的内容不一样,不是图片覆盖物那么简单哦。
高德的切图方式,和谷歌的一样。所以,在网上找的谷歌地图的切图工具,都可以适用于高德地图。
google = new AMap.TileLayer({
tileUrl:"http://mt{1,2,3,0}.google.cn/vt/lyrs=m@142&hl=zh-CN&gl=cn&x=[x]&y=[y]&z=[z]&s=Galil"//图块取图地址
});
google.setMap(mapObj);
谷歌地图:
九、街景
高德地图街景覆盖城市共33个,分别为:杭州,南京,成都,西安,拉萨,昆明,烟台,沈阳,哈尔滨,长春,常州,南通,林芝,泰安,日照,那曲,东营,日喀则,德州,滨州,聊城,莱芜,郑州,洛阳,平顶山,开封,安阳,信阳,新乡,焦作,商丘,周口,驻马店。
使用街景,必须将您的网页文件传到服务器上。
var opts = {
pov: {
heading:270,
pitch:0
},
position: point
};
var panorama = new AMap.Panorama('iCenter',opts);
position,就是街景的位置,必须在33个城市有街景的范围内,才能看到街景哦。
可以先到amap上看一眼,哪里有街景,然后再设置您的街景位置。高德地图 http://www.amap.com/
街景效果:
十、全部源代码,请点击这里:
View Code
示例demo在线看:
java高德地图api开发平台_【高德地图API】从零开始学高德JS API(一)地图展现...相关推荐
- 地图API开发平台大比拼
八大地图API开发平台大比拼 http://www.enet.com.cn/gps/ 2011年12月07日14:08 来源:eNet硅谷动力 [文章摘要]在平台适用性方面,除MapBar和51地图只 ...
- 【高德地图API】从零开始学高德JS API(一)地图展现——仙剑地图,麻点图,街景,室内图...
原文:[高德地图API]从零开始学高德JS API(一)地图展现--仙剑地图,麻点图,街景,室内图 摘要:关于地图的显示,我想大家最关心的就是麻点图,自定义底图的解决方案了吧.在过去,marker大于 ...
- 【高德地图API】从零开始学高德JS API(四)搜索服务——POI搜索|自动完成|输入提示|行政区域|交叉路口|自有数据检索
原文地址为: [高德地图API]从零开始学高德JS API(四)搜索服务--POI搜索|自动完成|输入提示|行政区域|交叉路口|自有数据检索 摘要:地图服务,大家能想到哪些?POI搜素,输入提示,地址 ...
- 转载:高德地图API学习 从零开始学高德JS API(一)地图展现
原文地址:https://www.cnblogs.com/milkmap/p/3687855.html [高德地图API]从零开始学高德JS API(一)地图展现--仙剑地图,麻点图,街景,室内图 摘 ...
- 【高德地图API】从零开始学高德JS API(三)覆盖物——标注|折线|多边形|信息窗口|聚合marker|麻点图|图片覆盖物
原文地址为: [高德地图API]从零开始学高德JS API(三)覆盖物--标注|折线|多边形|信息窗口|聚合marker|麻点图|图片覆盖物 摘要:覆盖物,是一张地图的灵魂.有覆盖物的地图,才是完整的 ...
- API开发平台,专注API无代码快速发布
RestCloud API开发平台是RestCloud完全自主研发的基于微服务架构的专注API高效开发的专业化平台,平台相比于传统API开发模式具有更轻量级.更快速.更全面.更低代码量.更易于学习等特 ...
- openjweb1.8 java web应用快速开发平台产品白皮书
因图片较多,需要图片请到资源中下载,不需要资源分. OpenJWeb(1.8) Java Web应用快速开发平台 产品白皮书 编者:OpenJWeb ...
- JAVA SpringBlade 微服务开发平台框架,企业级的SaaS多租户微服务平台,基于Spring Boot 2.7
SpringBlade微服务开发平台 完整代码下载地址:JAVA SpringBlade 微服务开发平台框架,企业级的SaaS多租户微服务平台 采用前后端分离的模式,前端开源两个框架:Sword (基 ...
- OpenJWeb(1.6) Java Web应用快速开发平台技术白皮书
OpenJWeb中国开源组织(http://blog.csdn.net/baozhengw) 苏州创智科技有限公司(http://www.cmissoft.com) QQ:29803446 Msn:b ...
最新文章
- 每天一道算法题(24)——自定义幂函数pow
- 设计模式之八大设计原则
- 计算机话筒接口,电脑麦克风插口是哪个哪位知道?
- 统计函数——汇总统计时间类数据
- 正则表达式来判断Sql语句中Select到from之间使用了*而不是字段名
- css标签resolution,html/css to fit all screen resolution
- python判断天数_python判断输入日期是该年的第几天
- (44)VHDL实现多路复用器(if-else)
- 如何判断数组所有数都不等于一个数_工程师编程,C语言学习,关于数组方面的一些总结...
- BUU BRUTE 1
- PDMS二次开发(十三)——Pipeline Tool升级到E3D版本
- 实现memcmp函数
- 关于QT出现“error: undefined reference to XXXX”问题
- html中日期下拉选怎么设置,html中option标签(下拉列表选项)的详细介绍
- Hadoop性能测试工具
- kotlin 仿照setOnclickListener写法
- [转载]Matlab绘图-很详细,很全面(包含各种标示符的输入方法)
- 铁路 计算机系统维护,成都市计算机学校计算机系统维护就业前景
- 多目标跟踪算法JDE在 UA-DETRAC数据集上训练
- 概率论与数理统计之全概率公式