高德地图开发(一、引入地图)
百度地图无法满足开发需求,因此开始研究高德地图怎么使用,因为要从头开始,所以开了一个系列做个记录,每篇的前半段会包括原生,然后再是vue实现方式。首先是高德地图如何调用以及设置
·
vue调用高德地图(一、引入高德地图)
项目可能要用到3D地图,而百度地图不支持,因此开始了解高德地图,为了以后方便使用,把使用高德地图的方法在博客里记下来。
1、原生js使用
1.1、引入js
去高德开发者平台创建一个自己key,具体步骤官网有。
<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=您申请的key值"></script>
1.2、设置地图容器
随便叫什么都好,这里id就叫container
<div id="container"></div>
这是个全屏地图
html, body{
width:100%;
height: 100%;
margin: 0;
padding: 0;
font-size: 16px;
}
#container {
width:100%;
height: 100%;
}
1.3、设置地图初始位置
到这一步,地图已经可以看到了,地图引入就算成功了。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link href="map.css" rel="stylesheet" type="text/css">
<title>高德地图</title>
</head>
<body>
<div id="container"></div>
<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=您申请的key值"></script>
<script>
var map = new AMap.Map('container', {
zoom:12, // 级别
center: [113.397428, 23.2], // 中心点坐标,广州
});
</script>
</body>
</html>
更多推荐
已为社区贡献10条内容
所有评论(0)