web端与移动端高德地图接入及实例化

一、准备

文中实现的地图加载组件采用的地图版本为v1.4.15。该版本是目前高德地图v1.x版本的最新版本。

1、获取唯一标识Key

进行高德地图接入首先需要注册高德地图开发者账号并申请Key。

（1）注册开发者账号。

注册地址：https://lbs.amap.com/dev/id/choose。

（2）创建应用。

注册完成后登录并进入“应用管理”页面。在此页面点击“创建新应用”来创建自己的应用。

（3）为应用添加Key。

选择“服务平台”项，再选择“Web端（JSAPI）”，则可以为应用添加Key。

2、准备开发环境

本文前端页面搭建采用的Vue.js框架，如果想运行文中的代码请自行搭建好以Vue.js框架为基础的开发环境；采用其他技术栈的开发者可以手动移植代码到其他技术栈页面。

3、高德地图加载方式

在开始封装高德地图加载组件之前，先来看一下高德地图的加载方式有哪几种。通过高德地图JS API官方文档可以知道高德地

web端与移动端高德地图接入及实例化相关推荐

移动端h5调起高德地图、百度地图实现路线及路况查询
//html<a href="https://uri.amap.com/marker?position=经度,纬度&name=所在的位置名称">高德地图< ...
移动端h5页面打开高德地图或者百度地图实现导航
需求场景:用户会收到一条短信,短信带着链接,点击链接跳转h5页面,h5页面实现跳转地图并实现导航. 方法:1.a标签直接打开地图,地图在浏览器支持跳转. 高德: <a href="ht ...
vue（移动端）使用高德地图实现精准定位
目录效果图前提准备代码展示效果图两个页面页面一(粗略定位) 点击城市进入页面二 (粗略定位),搜索框输入具体位置(以大连理工大学为例) 点击大连理工大学,回到页面一,并展示精准位置再次点 ...
高德地图调用和添加标注
看过高德地图API的同学都知道,高德地图不同端调用是不一样的,作为一个前端菜鸟,前一阵分别在pc端和移动端分别调用了高德地图.情况是这个样子的,PC端呢我们可以用高德API的web端的javascri ...
callback用法 js vue_Vue前端开发——使用高德地图WebApi
要求: 实现关键字搜索说明: 基于Vue(2.x)+element+高德Web服务api(2.0) 高德地图2.0版本以前的实现方式需要自己封装请求方法,2.0版本提供了个请求服务WebServic ...
高德地图逆地理编码Geocoder的getlocation获取不到位置信息
问题:原生定位接口定位失败,则status返回error事件或回调error信息,获取不到位置信息产生原因:逆编码方法使用不了原因是使用的高德地图的应用方向web服务,而Geocoder属于web端 ...
高德地图 hello world
就地图而言,国内的地图就两家独大,一家是百度地图,另一家是以阿里领投的高德地图. 优缺点对比从信息含量上比较,百度城市地理信息更详细,资料较新.谷歌正好相反,偏远乡村地区资料更详细.高德等同于谷歌. ...
高德地图的简单快速使用
step1. 注册账号并申请Key 首先,注册高德地图key开发者账号,成为高德开放平台开发者登陆之后,在进入「应用管理」页面「创建新应用」为应用添加 Key,「服务平台」一项请选择「 Web ...
高德地图API调用和标准（转）
看过高德地图API的同学都知道,高德地图不同端调用是不一样的,作为一个前端菜鸟,前一阵分别在pc端和移动端分别调用了高德地图.情况是这个样子的,PC端呢我们可以用高德API的web端的javascri ...