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

准备工作

注册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>

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

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

html页面调用高德地图,html前端使用高德地图入门教程,并在地图上标记位置-Go语言中文社区...
准备工作注册Key 首先, 登陆之后,在进入「应用管理」页面「创建新应用」为应用添加 Key,「服务平台」一项请选择「 Web 端 ( JSAPI ) 」记住这个Key,等会要用,以后可能也会 ...
【前端实例代码】Html5+css3创建新拟态新拟物风格(Neumorphism)音乐播放器+注册登录页表单图标网页效果~前端开发网页设计基础入门教程~超简单~
b站视频演示效果: [前端实例代码]Html5+css3创建新拟态新拟物风格(Neumorphism)音乐播放器+注册登录页表单图标网页效果!前端开发网页设计基础入门教程!超简单~ 效果图: 完整代码 ...
【前端实例代码】Html5+css3+JavaScript创建在线播放架子鼓电子鼓演奏网页效果！前端开发网页设计基础入门教程！超简单~
b站视频演示效果: [前端实例代码]Html5+css3+JavaScript创建在线播放架子鼓电子鼓演奏网页效果!前端开发网页设计基础入门教程!超简单~ 效果图: 完整代码: <!DOCTYP ...
【前端实例代码】Html5+css3创建拟物风格昏昏欲睡的云朵动画网页效果~前端开发网页设计基础入门教程~适合初学者~超简单~
b站视频演示效果: [前端实例代码]Html5+css3创建拟物风格昏昏欲睡的云朵动画网页效果!前端开发网页设计基础入门教程!适合初学者~超简单~ 效果图: 完整代码: <!DOCTYPE ht ...
要web开发精品教程吗？免费一百期连讲的那种-逐浪CMS前端开发100期入门教程全面开放
要web开发精品教程吗?免费无广告一百期连讲的那种-逐浪CMS前端开发100期入门教程全面开放大师主讲经验难得由逐浪CMS首席架构师发哥老师,亲自主理讲解. 历时一年精心打造, 汇聚了互联网诞生 ...
html前端使用腾讯地图入门教学：在地图上标记位置
本文教给大家如何使用JavaScript API进行基于LBS的基础开发:在地图上标记位置.提供地图服务的有高德地图.百度地图和腾讯地图,腾讯地图官网上的JavaScript API已升级到了Java ...
超详细Redis入门教程——Redis命令（上）
前言本文小新为大家带来超详细Redis入门教程--Redis命令(上) 相关知识,具体内容包括Redis 基本命令,Key 操作命令,String 型 Value 操作命令,Hash 型 Valu ...
前端开发入门教程-HTML标签（上）
本文素材来源于黑马程序员pink老师的前端教学视频.在此基础上有部分改动. 博客文章: https://blog.manchan.top/post/introduction-to-front-end- ...
关于flask入门教程-ajax+百度地图实现热力图
热力图是通过密度函数进行可视化用于表示地图中点的密度的热图.它使人们能够独立于缩放因子感知点的密度. 前文也讲了关于max.pointsize.blursize这几个值一直也没找到最合适的处理办法.所 ...

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

准备工作

注册Key

页面上的准备

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

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

最新文章

热门文章