html前端使用高德地图入门教程,并在地图上标记位置

准备工作

注册Key

首先，注册开发者账号，成为高德开放平台开发者
登陆之后，在进入「应用管理」页面「创建新应用」
为应用添加 Key，「服务平台」一项请选择「 Web 端 ( JSAPI ) 」
记住这个Key，等会要用，以后可能也会用，一定要记住。

页面上的准备

新建一个DIV，作为地图的容器（这一步和使用其他插件一样，必须新建一个挂载点）。
给这个新建的div设置好宽高（这里提醒一下，可以使用弹性布局，没有影响）。
在body后面引入高德地图的js。
最后，异步初始化高德地图插件，一定要异步，使用window.onLoad。(去获取标记点的经纬度)

<!-- 二、设置宽和高-->
<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>

好了，现在你的页面上已经出现了高德地图

版权声明：本文来源CSDN，感谢博主原创文章，遵循 CC 4.0 by-sa 版权协议，转载请附上原文出处链接和本声明。
原文链接：https://blog.csdn.net/qq_42445490/article/details/89155610
站方申明：本站部分内容来自社区用户分享，若涉及侵权，请联系站方删除。

发表于 2020-03-01 21:25:13
阅读 ( 1721 )
分类：前端

html前端使用高德地图入门教程,并在地图上标记位置

准备工作

注册Key

页面上的准备

好了，现在你的页面上已经出现了高德地图

你可能感兴趣的文章

精选的优质文章

0 条评论

官方社群

GO教程

推荐文章

猜你喜欢

随便看看