网页显示高德地图例子

林间风雨

已于 2023-02-23 10:00:38 修改

阅读量1.2k

点赞数 1

分类专栏： HTML 文章标签： javascript 前端 html

于 2020-10-26 12:04:32 首次发布

本文链接：https://blog.csdn.net/jack_rose_me/article/details/109287279

版权

HTML 专栏收录该内容

8 篇文章 1 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
<title>高德地图</title>
</head>
<style>
#container{
width: 100%;
height: 500px;
/* height: 100vh; */
}
</style>

<body>

<!-- 一、新建一个容器 -->
<div id="container" ></div>
</body>

<!--三、引入高德地图的js-->

<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.8&key=你申请的key值"></script>

<!--四、异步初始化高德地图插件-->

<script>

//初始化地图插件

window.onload = function(){

var map = new AMap.Map("container", {

zoom: 13, //设置地图显示的缩放级别 原始值15

center: [113.362857,22.942582] //设置地图中心点坐标

});

// 创建一个 Marker 实例：（标记点）

var marker = new AMap.Marker({

// position: new AMap.LngLat(113.362857,22.942582), // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]

position: new AMap.LngLat(113.362857,22.942582), // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]

title: "广州市桥"

});

// 将创建的点标记添加到已有的地图实例：

map.add(marker);

}
</script>

</html>

api接口

轨迹回放-点标记-示例中心-JS API 示例 | 高德地图API