高德地图定位学习 Day1

最新推荐文章于 2023-02-24 19:26:59 发布

乾复道

最新推荐文章于 2023-02-24 19:26:59 发布

阅读量346

点赞数

分类专栏：高德地图api使用文章标签：高德api教程高德api学习高德定位

本文链接：https://blog.csdn.net/Long861774/article/details/84942144

版权

高德地图api使用专栏收录该内容

6 篇文章 0 订阅

订阅专栏

这是学习使用高德地图的第一天，关于高德地图的基础（创间高德开发者账号以及获取key值）就不一一赘述了，今天是第一天，以下为今日学习内容，望与各位共勉。

创建一个简单的demo，展示出高德地图

<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8" />
    <link rel="shortcut icon" href="/logo.ico" type="image/x-icon" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>test</title>
    <style>
        #container {width:300px; height: 180px; }  
    </style>
</head>
//引入高德地图api
<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.11&key=申请的高德key值"></script>

<body>
    <div>
        <div id="container"></div>
    </div>
</body>
<script>
    // 构造地图对象的方法一：使用地图容器ID创建
    var map = new AMap.Map('container');
    // 构造地图对象的方法二：使用地图容器对象创建
    // var map = new AMap.Map(document.getElementById("container"));
</script>

</html>

效果图：

如下代码所示，我们可以设置地图的缩放级别，地图中心点，图层，地图样式等等；

var map = new AMap.Map('container', {
        zoom: 10,  //设置地图显示的缩放级别
        center: [113.666509,34.752185],//设置地图中心点坐标
        // layers: [new AMap.TileLayer.Satellite()],  //设置图层,可设置成包含一个或多个图层的数组
        mapStyle: 'amap://styles/normal',  //设置地图的显示样式 //whitesmoke为实景地图 normal
        // viewMode: '2D',  //设置地图模式
        lang: 'zh_cn',  //设置地图语言类型
    });

效果图：

展示2D实景地图，将viewMode设置为'3D'，可以获取到有阴影的3D图

var map = new AMap.Map('container', {
        zoom: 10,  //设置地图显示的缩放级别
        center: [113.666509,34.752185],//设置地图中心点坐标
        layers: [new AMap.TileLayer.Satellite()],  //设置图层,可设置成包含一个或多个图层的数组
        mapStyle: 'amap://styles/whitesmoke',  //设置地图的显示样式 //whitesmoke为实景地图 normal为标准地图
        viewMode: '2D',  //设置地图模式
        lang: 'zh_cn',  //设置地图语言类型
    });

效果图：

乾复道

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
高德地图定位学习 Day1

这是学习使用高德地图的第一天，关于高德地图的基础（创间高德开发者账号以及获取key值）就不一一赘述了，今天是第一天，以下为今日学习内容，望与各位共勉。创建一个简单的demo，展示出高德地图&lt;!DOCTYPE html&gt;&lt;html lang="zh"&gt;&lt;head&gt; &lt;meta charset="UTF-8" /&gt; &l
复制链接

扫一扫