【Uniapp】手把手教你高德地图的接入、定位、自定义标点与信息窗体使用
一、前言
因为公司的业务需求，需要实现一个接入高德地图的数据大屏，并根据坐标实现地图标点渲染，自定义信息窗体，点击定位等功能。查阅高德地图官方文档时发现使用的是原生 JavaScript ，且网上 uniapp 接入使用的教程较少，我自己摸索之后解决了不少问题，欢迎大佬补充纠正。
二、准备工作
1、参考博客以及相关地址
高德开发平台：平台地址
注册参考博客：博客地址
2、注册高德开发平台账号
我们需要先在高德开放平台注册一个账号，以申请获取 key 等权限信息。注册流程很简单，就不赘述了，获取成功后点击此处：
点击创建新应用，至于里面的内容就是随便填都可以：
点击添加 Key ，创建你的 Key 值，我们后面都需要使用，具体你是哪个开发平台就勾选哪一个：
下面是最后生成的 Key。在参考博客中是直接使用 key 获取并本地导入下载的SDK，而我使用的是动态导入，大家可以尝试一下哪个更适合你的开发。
三、导入以及使用
以下内容较多篇幅较长，大家可以根据目录选择阅读，我会结合官方文档以及参考文档详细说明每一个方法的使用以及具体实现，但最好还是按顺序看下去。
1、参考博客与文档以及相关地址
高德官方文档：地址
开发参考博客：地址（不是我的博客）
- 实际上该博客相当于官方文档的导读摘要，大家可以看看哪些是你需要的，去官方文档再详细看就好了
2、导入SDK
在导入这一块我尝试了很多种方法，最终实现的是这个方法：怎么引入高德地图 ，通过这个方法可以定义一个全局的地图实例供我们调用高德API。
效果
代码
<template><!-- 地图底框 --><view id="wrapper"></view>
</template>
<script>let mapObj = null; // 生成地图实例window.mapInit = function() {mapObj = new AMap.Map('wrapper', {center: [113.382, 22.5211],layers: [new AMap.TileLayer.Satellite(), // 卫星new AMap.TileLayer.RoadNet() // 路网],zoom: 13});// 在这里可以做一些回调处理 定位 标记点 等等 或者把amap弄成一个全局变量// 引入单个插件AMap.plugin('AMap.ToolBar', function() { // 异步加载插件var toolbar = new AMap.ToolBar();map.addControl(toolbar);});};export default {data() {}，onLoad() {// #ifdef H5this.loadScrpit();// #endif},methods: { loadScrpit() { // 挂载动态jsvar script = document.createElement('script');script.src = 'https://webapi.amap.com/maps?v=1.4.15&key=（这里是你申请的KEY）&callback=mapInit';document.body.appendChild(script);},}}
</script>
代码讲解
首先是在 onLoad() 在页面加载阶段内调用动态挂载函数，熟悉原生 JavaScript 的朋友都应该可以明白这是一个创建 <script></script> 标签，并把它插入 body 内的操作。关键是在标签的属性上，我们需要传入 Key 值和回调函数。
【Uniapp】手把手教你高德地图的接入、定位、自定义标点与信息窗体使用相关推荐
- 基于Android studio开发高德地图之连续定位、标点、画线
目录 获取key值 创建地图 layout文件 Activity 源码:https://github.com/zzjdreams/gaode_map_track 截图:(这个是我叫我弟截图的,所以不是 ...
- 高德地图实现多点标注marker和动态信息窗体
先说一下项目对地图的需求:在后台新增地图管理模块,要求,每一辆车都在地图上有标注,而且点击标注时要显示出车辆的相关信息,比如车牌和车辆的当前状态. 下图就是实现的效果. 当然从高德地图api也能查看到 ...
- 高德地图如何同时显示多个InfoWindow信息窗体
效果如下图: 众所周知,高德的 Infowindow 只能同时显示一个,想要通过Infowindow来实现图中的效果是不行的.但是覆盖物是可以显示多个的,比如说marker.所以下面的思路就是,给定一 ...
- 高德开放平台实现批量自定义marker和信息窗体显示
上篇博客提到云图无法实现文本标签标记marker,这篇博客着重实现在marker点文本标记以及自定义按钮窗体显示. 1.效果: 2.代码实现 <!doctype html> <htm ...
- uniapp 打包app 引入高德地图sdk
uniapp 打包app 引入高德地图sdk 1. 注册高德地图开放平台账号并添加应用,在应用中添加key 2. 生成自有证书(windows系统) 3. 高德地图key生成 并配置到项目中 4. 地 ...
- uniapp App端使用高德地图
uniapp App端使用高德地图 第一步: 先去高德官网申请keyhttps://console.amap.com/dev/key/app 关于SHA1生成方法如下:https://lbs.amap ...
- uniapp 小程序唤醒高德地图或腾讯地图进行导航
uniapp 小程序唤醒高德地图或腾讯地图进行导航 methods: {mapFun(){uni.openLocation({latitude: 29.58832234563708,//纬度longi ...
- vue+高德地图实现多边形范围内标点
vue+高德地图实现多边形范围内标点 具体实现: 一.安装并引入高德地图: 二.创建一个aMap地图文件: 三.aMap上创建多边形围栏: 四.配置围栏.地图点击事件: 五.地图点击标点事件: 本篇文 ...
- 手把手教你用python爬取人人贷网站借款人信息
P2P是近年来很热的一个行业,由于这个行业在国内兴起才不久,国内的很多学者对这个行业都兴趣盎然,在大学研究互联网金融的学者更是有一大群.小编是学金融出身,深知数据在做学术研究的重要性,之前有不少学互联 ...
最新文章
- javascript 之 面向对象【理解对象】
- X-Frame-Options防止自己的网页放被在别人iframe中
- jzoj100042-保留道路【最小生成树,图论】
- [系统安全]使用OD编写连连看外挂
- primefaces_轻量级Web应用程序：PrimeFaces（JSF）+ Guice + MyBatis（第1部分）
- 中南大学王斌计算机学院,中南大学 信息科学与工程学院,长沙 410083
- json里面的list数据取不出来_[工具]用kaggle API下载数据集
- 速记 封装案例 银行取款功能 1210
- [INS-20802] Oracle Net Configuration Assistant failed
- 【RQNOJ86】智捅马蜂窝【最短路】
- java crc8_Crc8算法
- Pytorch 操作整理
- Android 9.0 10.0 手动安装Persistent app失败的解决方案
- 读后感：《走出软件作坊》51：幽幽一缕香
- 新浪微博架构和FEED架构分析--人人架构
- java.lang.NumberFormatException: null的解决方法
- openwrt消息通知方式linux,openwrt路由器也享受时钟报时快感编码过程
- OO系统分析员之路--用例分析系列（4）--业务建模一般步骤和方法[整理重发]
- can口通信的软件测试,CAN网络一致性测试和UDS测试设备
- 汇编语言(王爽第三版)实验一
热门文章