高德地图插件的简单使用

1：首先是资源

高德开放平台 | 高德地图API (amap.com)

点进去后>点击控制台登录

2：点击开发支持会有详细的入门这里就不一一解释了

3：工具

坐标拾取器：可以帮你解决不知道地图的坐标问题

其他的就是生成地图的

下面是一个简单的地图：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script type="text/javascript"src="https://webapi.amap.com/maps?v=2.0&key=346e4aa4dc6444f5a7f69bf1ff66ca1a"></script><style>* {margin: 0;padding: 0;}#container {width: 100%;height: 100vh;}/* .qwe {} */</style>
</head><body><div id="container"></div>
</body>
<script>var map = new AMap.Map('container', {zoom: 16,//级别center: [113.978255, 35.281454],//中心点坐标viewMode: '3D'//使用3D视图});let data = [{name: "十点半",tel: 123456789,posi: [113.98, 35.28]}, {name: "阿迪斯",tel: 45678909876,posi: [113.92, 35.29]}, {name: "盎司九百",tel: 0987656789876,posi: [113.93, 35.28]}]for (let i = 0; i < data.length; i++) {// 以 icon URL 的形式创建一个途经点var viaMarker = new AMap.Marker({position: new AMap.LngLat(data[i].posi[0], data[i].posi[1]),// 将一张图片的地址设置为 iconicon: './img/位置.png',// 设置了 icon 以后，设置 icon 的偏移量，以 icon 的 [center bottom] 为原点offset: new AMap.Pixel(-13, -30)});viaMarker.on('click', function () {infoWindow = new AMap.InfoWindow({content: `<div class="qwe"><h3>${data[i].name}</h3><p>tel:${data[i].tel}</p></div>`,offset: new AMap.Pixel(4, 0)});infoWindow.open(map, data[i].posi);})// 将 markers 添加到地图map.add(viaMarker);}</script></html>

这里我用了地图的功能创建出来一个信息弹窗

教程的

下面有各种各样的功能实现跟着步骤去做就能实现

高德地图插件的简单使用相关推荐

flutter引入高德地图_玩玩Flutter Web —— 实现高德地图插件
Red Deer 1.啰嗦几句去年写了一个功能简单的高德地图插件给flutter_deer使用,当时支持了Android与iOS两端.前一阵子有一个issue问是否会支持Flutter Web,当时 ...
64.qt quick-qml使用高德地图插件实现V2版本(新增:位置搜索、路径规划、轨迹编辑等)
在61.章节里我们学习了如何实现一个map插件.所以本章来扩展内容.实现轨迹编辑等 bilibili视频预览: bilibili链接 (之前的老版本,后面优化增加谷歌卫星了) 1.效果图展示使用公 ...
Antv/L7中使用高德地图插件
L7可以使用高德地图作为底图,也可以使用高德地图提供的插件,如工具栏,缩放条等. 官方文档中的引入方式如下 const sc = new Scene({id: 'xxxx-map',logoVisib ...
67-Flutter中高德地图插件的使用
1.注册和建立高德API应用高德网站:https://lbs.amap.com/ 控制台-应用管理-创建应用在创建 Key 2.获得SHA1 进入Flutter项目中的android文件夹内,打开 ...
高德地图插件使用汇总（干货-从注册到熟练使用）
概述针对公司项目用到的高德地图播件,及用到的方法(缩放层级显示不同层级点.默认点显示.点聚合.定位当前点位置.位置选择获取经纬度). 通用文件 // 说明: JSON文件示例 [[118 94655 ...
高德地图定位的简单实现
1.要实现高德地图的定位,首先要下载高德地图的SDK以及高德地图定位的SDK 下载地址:http://lbs.amap.com/api/android-sdk/download/ http://lbs ...
flutter引入高德地图_Flutter引入高德地图插件黑屏/白屏
|:-| totem 1.黑屏缺少相关的"地图资源assert" 2.白屏无网络举例说明 1.黑屏 buildTypes 配置: buildTypes { debug { / ...
flutter引入高德地图_Flutter高德地图插件
ai_amap |:-| totem Effect 地图.jpg 定位.jpg 导航.jpg 导航.jpg 1.安装使用当前包作为依赖库 1. 依赖此库在文件 'pubspec.yaml' 中添加 ...
高德地图变相实现简单的地理围栏技术
代码地址: 前端:https://github.com/poemp/geo-fencing-frontend 后端:https://github.com/poemp/geo-fencing-backe ...

高德地图插件的简单使用

高德地图插件的简单使用相关推荐

最新文章

热门文章