快速掌握Web高德地图开发

本文章致力于帮助对Web高德地图开发感兴趣的朋友快速掌握开发要领，如果能对屏幕前的您有所助益，我将十分荣幸。

如何快速掌握Web高德地图开发？

要领如下：

一、首先要知道高德地图本身有提供开放的地图API对开发者进行支持，网址附上：概述-地图 JS API v2.0 | 高德地图API。

高德开放平台不只有Web端开发教程，还有Android、iOS等的支持。在实际开发中学会配合使用高德地图API能达到事半功倍的效果。

二、高德地图API的使用：首先需要注册账号并申请key，在【准备】一栏有详细介绍。这里就不细说。

创建新应用成功后便可获得key和安全密匙，注意2.0版本一点要配合安全密匙一起使用，否则有可能遇到加载出错问题。

三、开始开发

1. 加载地图

加载地图非常简单，只需以下几行代码

其中css文件我是自己重新建了一个css文件，然后将高德地图官方的css文件复制过来，官方文件是这段代码 <link rel="stylesheet" href="https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css" />。如果想用官方定义的css文件的话需要添加下面一段代码

<style>

html,

body,

#container {

width: 100%;

height: 100%;

}

</style>

因此在我看来还是自己新建一个css文件再将官方的css代码复制过来更好，毕竟后面开发过程中还需要添加其他css样式代码，统一在一个自己的文件方便查看修改。注意一开始自己定义css文件的时候别忘了把上面的<style>标签内的代码添加进去，否则地图无法加载出来。

2. 功能开发

高德地图API提供了很多功能开发的引导，有点标记、图层、路线规划、地理编码、定位等等。如何快速实现一个功能的开发很容易，按照高德API的教学流程走就可以很快完成。但高德API只是给一个示例，而该实例对于实际开发要求来说是不匹配的，即达不到需求。这时如果我们想按照自己的要求开发一个功能的话，就可以按照以下步骤进行。

首先点开【示例中心】选择自己想要实现的功能点开，这里以点标记为例

可以看到这里对于每个功能都有实现示例，点开右边蓝色箭头

可以看到有实现功能的源代码，这里就是精华部分，参考代码可以少走很多弯路。点标记最好配合事件系统中的其他事件一起使用，可以达到自由标记多个点的效果。

对于功能实现模块还有一点可以注意的是【参考手册】和【全部属性和方法】

这里是每个功能高德定义的属性和方法，如果想添加某一事件或者属性可以在此查看对应的方法。我个人偏向于点击【全部属性和方法】，因为它是中文的容易看。如下：

其实点开之后它展示的是API1.4版本的参考手册，但是基本上所有方法属性2.0版本都可以使用，少数可能更换或废弃，具体细节自己留意2.0版本的参考手册。

到这里，相信屏幕前的您已经入门了，当您成功开发一个功能出来的时候，后面其他功能都是类似步骤。如何完善就得看自己造化了。

快速掌握Web高德地图开发相关推荐

高德地图开发之地图配置及vue上初始化创建地图
开门见山地说,现如今地图相关的开发业务在工作中越来越常见,目前市面上主流的地图开发还是以百度和高德为主,今天就来讲一下高德地图的配置和在vue上的初始化创建,帮助大家更好更快的了解高德地图开发相关的 ...
高德地图开发（三、地图marker点标记）
高德地图开发(三.地图marker自定义点标记) 一.默认点标记二.自定义点标记一.默认点标记 // 创建一个 Marker 实例:var marker = new AMap.Marker({po ...
高德地图开发学习Demo
高德地图开发学习Demo 提供者:sannas 开源项目地址: https://github.com/851151582/NaviLocXf.git Demo实现地图定位.搜索及导航功能,通过关键字可 ...
Android高德地图开发详解
这段时间开发的时候用到了高德地图,对高德地图开发有心得体会,现在分享给大家,对我开发过百度地图的我来说,总体来说高德地图Demo,没有百度讲解的详细个人更偏向于使用百度地图,但是没办发,项目需要使用 ...
安卓高德地图开发之引入导航功能
高德地图导航添加需要添加特定的navi包. 高德地图开发中添加导航功能的简单实现原理是引入自定义起点和终点数据后调用官方给出的demo代码. 首先需要一个baseactivity类,给出代码: pac ...
高德地图开发（四、点聚合）
高德地图开发(四.点聚合) 一.设置点聚合二.点聚合中添加删除标记三.方法和事件一.设置点聚合只截取了部分代码,几个方法都处于一个类中. let markers = []; // 点聚合数组 ...
基于高德地图开发 Web 应用
文章目录写在前面为什么选择高德地图?对比腾讯.百度.OpenLayers OpenLayers 腾讯地图百度地图高德地图基本的开发步骤,开始实现自己的地图应用快速掌握 API 模块.架构. ...
java wed高德地图开发_java接入高德地图常用WEB API
1.先看一下高德地图WEB API都有哪些内容 2.根据经经纬度查询高德地图省市区数据 /** *根据经纬度获取省市区 * @param lat * @return */ public static ...
web离线地图开发（开发工具+接口文档+示例代码）
相关教程: 1.如何搭建离线地图开发环境视频教程 2.下载离线地图数据(金字塔瓦片数据) 视频教程 ...

快速掌握Web高德地图开发

快速掌握Web高德地图开发相关推荐

最新文章

热门文章