高德地图api
项目中需要调用一下第三方地图的API,因为自己一直用的是高德地图,所以优先采用高德地图。事实证明我也没选错,百度地图的API使用起来确实挺麻烦。
一、申请key
二、新建项目
一般web类型的项目就可以,我习惯于SpringBoot项目的写法。结构如下:
1.修改一个端口号(改不改都行,不改默认80),我的是8088。
2.增加请求路径,因为是测试,所以直接写在启动类上。
@SpringBootAPPlication
@controller
public class AmapApplication {
public static void main(String[] args) {
SpringApplication.run(AmapApplication.class, args);
}
@GetMapping("/")
public String toIdex(){
return "index.html";
}
}
3.index.html文件。
唯一要修改的就是key值,其他几乎都是不变的。
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
<title>稚子候门</title>
<link rel="stylesheet" href="./styles/map.css" />
<script type="text/javascript" src="http://webapi.amap.com/maps?v=1.4.7&key=你的key值"></script>
</head>
<body>
<p id="container">
</p>
<script>
var map = new AMap.Map('container', {
center: [116.397428, 39.90923],
layers: [//使用多个图层
new AMap.TileLayer.Satellite(),
new AMap.TileLayer.RoadNet()
],
zooms: [4,18],//设置地图级别范围
zoom: 13
});
</script>
</body>
</html>
4.非常简单的map.css文件。#container {width:800px; height: 500px; text-align: center}
5.启动工程,浏览器访问http://localhost:8088。如下:
三、一些坑
按照高德的说明文档一步一步操作的,但是最后还是不显示地图。调试工具也没说错在哪。找了半天,是加载时机的问题。
<script>
var map = new AMap.Map('container', {
center: [116.397428, 39.90923],
layers: [//使用多个图层
new AMap.TileLayer.Satellite(),
new AMap.TileLayer.RoadNet()
],
zooms: [4,18],//设置地图级别范围
zoom: 13
});
</script>
以上内容要放在页面的下部。
因为页面是从上往下加载的。如果把这些内容放在页面上面,向高德的数据中心发出请求以后还没得到响应,页面已经加载结束了,所以不显示。
文章最后发布于: 2018-06-27 13:56:33
相关阅读
正所谓“树大招风”,滴滴最近惹上了不少麻烦事。高德表示“滴滴”伙同高德公司内部高级经理,拉拢掌握核心机密
Android开发中Google地图选点页面打开闪退的问题使用release签名构建出来的release包,通过adb install 安装一切正常。但是发布到G
smmUtility::mapIt(LogisticsPostalAddress::findByLocation(logisticsLocation.RecId));
1.说明 离线地图开发环境支持谷歌地图、百度地图、高德地图等等所有常用地图类型,支持在局域网内的地图部署、二次开发。 2.实现
WIndows API分类 基础服务 (Base Services) 提供对windows系统可用的基础资源的访问接口: 他们都是以dll方式提供 大家都