html前端使用高德地图入门教程,并在地图上标记位置
准备工作注册Key首先，注册开发者账号，成为高德开放平台开发者登陆之后，在进入「应用管理」 页面「创建新应用」为应用添加 Key，「服务平台」一项请选择「 Web 端 ( JSAPI ) 」记住这个Key，等会要用，以后可能也会用，一定要记住。页面上的准备新建一个DIV，作为地图的容器（这一步和使用其他插件一样，必...
·
准备工作
注册Key
-
首先，注册开发者账号，成为高德开放平台开发者
-
登陆之后，在进入「应用管理」 页面「创建新应用」
-
为应用添加 Key，「服务平台」一项请选择「 Web 端 ( JSAPI ) 」
-
记住这个Key，等会要用，以后可能也会用，一定要记住。
页面上的准备
- 新建一个DIV，作为地图的容器（这一步和使用其他插件一样，必须新建一个挂载点）。
- 给这个新建的div设置好宽高（这里提醒一下，可以使用弹性布局，没有影响）。
- 在body后面引入高德地图的js。
- 最后，异步初始化高德地图插件，一定要异步，使用window.onLoad。(去获取标记点的经纬度)
【注】 高德地图Api入门指南
<!-- 二、设置宽和高-->
<head>
<style>
#container{
width: 500px;
height: 500px;
}
</style>
</head>
<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: 15, //设置地图显示的缩放级别
center: [116.44927, 39.9584] //设置地图中心点坐标
});
// 创建一个 Marker 实例：（标记点）
var marker = new AMap.Marker({
position: new AMap.LngLat(116.44927, 39.9584), // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
title: "位置标题"
});
// 将创建的点标记添加到已有的地图实例：
map.add(marker);
}
</script>
好了，现在你的页面上已经出现了高德地图
权威｜前沿｜技术｜干货｜国内首个API全生命周期开发者社区
更多推荐
28
0- 0
已为社区贡献1条内容
所有评论(0)