必威体育Betway必威体育官网
当前位置:首页 > IT技术

高德地图API的调用

时间:2019-10-29 20:43:18来源:IT技术作者:seo实验室小编阅读:52次「手机版」
 

高德地图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

相关阅读

高德起诉滴滴教唆员工跳槽,微三云给你一个好榜样

正所谓&ldquo;树大招风&rdquo;,滴滴最近惹上了不少麻烦事。高德表示&ldquo;滴滴&rdquo;伙同高德公司内部高级经理,拉拢掌握核心机密

Android开发中Google地图选点页面打开闪退的问题

Android开发中Google地图选点页面打开闪退的问题使用release签名构建出来的release包,通过adb install 安装一切正常。但是发布到G

调用bing上地图

smmUtility::mapIt(LogisticsPostalAddress::findByLocation(logisticsLocation.RecId));

百度(高德、GG歌)离线地图开发环境搭建【离线地图开发

1.说明 离线地图开发环境支持谷歌地图、百度地图、高德地图等等所有常用地图类型,支持在局域网内的地图部署、二次开发。 2.实现

windows API 分类

WIndows API分类 基础服务  (Base Services) 提供对windows系统可用的基础资源的访问接口: 他们都是以dll方式提供 大家都

分享到:

栏目导航

推荐阅读

热门阅读