高德地图实现canvas画板

2024-09-03

高德地图和canvas画图结合应用(一)

现在重构web项目的时候发现,以前项目中是高德画基站的扇区的时候,通过计算点来画多边形,在站点的数量比较多的时候,会增加请求,同时计算扇区的时候有大量的计算,这样会极度浪费服务器的性能,所以对这块进行了改良,直接使用的高德地图的canvas层在画基站,效果如下图所示: 其代码为: <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <met

高德地图和canvas画图结合应用(二)

上节讲述了如在在高德地图中添加canvas图层,这节就讲述下如何在canvas图层添加鼠标的事件. 在上节脚本的最后加入以下代码: var text; $('#container').on('click', 'canvas.amap-labels', function(e) { if(text) text.setMap(null); //使用勾股定理计算这个点与圆心之间的距离 var pixel = map.lnglatTocontainer(new AMap.LngLat(116.344496

从flexible.js引入高德地图谈起的移动端适配

曾几何时,前端还仅仅是PC端的.随着移动时代的兴起,h5及css3的推陈出新.前端的领域慢慢的由传统的pc端转入了移动端,这也导致了前端这一职业在风口的一段时间出尽了风头. 从开始的惶恐和无从下手,慢慢的到了有了统一的技术方案去落地实现. 从手写不同尺寸的媒体查询css到以手淘的flexible.js来进行移动端的适配,虽然过程曲折,不过效果也是十分的显著,因为有了成熟的体系以后.什么东西就有据可寻,适配也就没那么困难了. 但是,因为这次引入了高德地图,所以在适配上出现了一点意料之外的问题. 首

在高德地图上用svg.js绘制简单图形

这段时间做的一个项目,需要在地图上绘制简单的图形.在学习高德地图JS API的过程中,发现高德地图提供的点.线等API并不能满足我的需求,还好它开放了自定义图层CustomLayer,官方说自定义图层支持canvas.svg.甚至dom,这里我用的是svg,多说无益,上代码. 一.高德地图以下的步骤在官方文档中都有,而且官方文档比较齐全. 首先需要去高德API官网申请自己的key,此步略过. 拿到key后在页面中引入地图所用的js js <script type="text/javasc

[WEB地图] 2017高德地图API WEB开发（key申请，地图搭建）简约教程

前端时间因为公司需要研究了一下百度的教程然后写个简约的笔记记录一下自己学习的收获,只为了满足自己暂时的写作热情高德地图WEB开发(key申请.api)简约教程 1.首先我们需要去“高德地图开发平台” 通过“百度搜索 ”或者“谷歌搜索 ” 高德地图然后会有一个高德开发平台|高德地图apl 2.登录高德开发平台这是高德开发平台的官网,然后点击登录,没有注册就好 3.进入控制台创建新应用进入控制台之后选择“应用管理”然后点击创建新应用,一定要记得这一步哟应用的名称和类型更具

【高德地图API】地理编码与逆地理编码

一.地理编码该功能实现地理编码服务,即地址匹配,从已知的地址描述到对应的经纬度坐标的转换,即根据地址信息,查询该地址所对应的点坐标等,地址(address) 为必选项,城市(city)为可选项. <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0"> <Grid Opacity="0.8" Margin="0,0,0,608&quo

在vue中使用高德地图vue-amap

1.安装 vue-amap我安装指定版本0.5.10的版本 npm i --save vue-amap@0.5.10 2.main.js中的配置 key申请地址教程:https://lbs.amap.com/api/javascript-api/guide/abc/prepare // 高德离线地图 import VueAMap from 'vue-amap'; Vue.use(VueAMap); VueAMap.initAMapApiLoader({ // 高德key key: 'd6eabb

vue-element-admin 引入高德地图并做海量点标记

第一步: 首先在index.html入口文件中添加引入高德地图的js,并填写自己在官网申请的key.如果没有申请不填写也是可以的. plugin:项目中如果有需要引入插件则使用没有直接去掉就行. <script type="text/javascript" src="http://webapi.amap.com/maps?v=1.4.4&key=‘你申请的key’&plugin=AMap.MouseTool&plugin=AMap.Autocom

高德地图API中折线polyline不能跨越180度经度线的解决方案

1.问题最近在使用高德地图的API,有一个需求是画出对象的历史轨迹,采用了高德地图API中的折线polyline函数.但如果需要跨180度经度线的折线,会出现不能跨越的情况,如下图所示: 图中有三个标记点,从西向东坐标点依次为[135, 21],[165, 23],[195, 25].我们想要画出对象的历史轨迹方向应该一直是从西向东,依次连接三个点,由图可知第一个点到第二个点是从西向东,但是第二个点到第三个点是从东向西,绕了大半个地球到达第三个点 2.解决方案首先需要了解一下高德地图中的坐标

高德地图api实现地址和经纬度的转换(python)

利用高德地图web服务api实现地理/逆地址编码 api使用具体方法请查看官方文档文档网址:http://lbs.amap.com/api/webservice/guide/api/georegeo/ 1.利用python第三方库requests实现 Requests库文档地址:http://www.python-requests.org/en/master/ #!/usr/bin/env python3 #-*- coding:utf-8 -*- ''' 利用高德地图api实现地址和经纬度的

IOS原生地图与高德地图

原生地图 1.什么是LBS LBS: 基于位置的服务 Location Based Service 实际应用:大众点评,陌陌,微信,美团等需要用到地图或定位的App 2.定位方式 1.GPS定位 2.基站定位 3.WIFI定位 3.框架 MapKit:地图框架,显示地图 CoreLocation:定位框架,没有地图时也可以使用定位. 4.如何使用原生地图<MapKit> 和定位<CoreLocation> MapKit: 1) 初始化MapView _map

【原创】web端高德地图javascript API的调用

关于第三放地图的使用,腾讯.百度.高德具体怎么选择看你自己怎么选择了. 高德地图开放平台:http://lbs.amap.com/ 本次使用的是高德的javascript API http://lbs.amap.com/api/javascript-api/summary/ 使用方法 1.注册成为高德地图开发者,创建应用后申请key. 2.引入高德地图API <script type="text/javascript" src="http://webapi.amap.

高德地图-搜索服务-POI搜索

高德地图-搜索服务-POI搜索之前公司项目收货地址仿饿了么的收货地址,结果发现自己实现的关键字搜索和周边搜索,搜索到的poi列表跟饿了么的并不完全一样,后来考虑了下,应该是搜索的范围.类型之类的设置的不一样.后来搜索了下,也的确是这样,,现在记录下来,留给自己也留给大家. 关键字搜索周边搜索区域搜索高德地图 Android SDK 提供了千万级别的POI(Point Of Interesting,兴趣点)的搜索. 目前支持关键字搜索.周边搜索.指定区域搜索的同步.异步方法.搜索返回 PO

【krpano】高德地图导航插件（源码+介绍+预览）

简介 krpano可以利用js调用第三方网页版地图,因此可以实现导航效果,用来帮助用户导航到我们全景所在的位置. 效果截图如下,在手机端点击左侧按钮,便会对用户进行定位,跳转至高德地图进行导航使用说明插件共有3个文件,如下图所示: nv.js为js代码,主要作用为浏览器定位,生成地图调用uri等. nv.xml为样式文件,定义了krpano中按钮的位置 navigation.png为图标使用时,把上述3个文件复制到项目目录,修改xml文件中的目的地参数即可. desloc对应于目

C# GMap下提供一个高德地图

using System; using GMap.NET.Internals; using GMap.NET.Projections; namespace GMap.NET.MapProviders { public class AMapProvider : AMapProviderBase { private readonly string name = "AMap"; private readonly string language = "zh_cn"; pri

[OC][地图] 高德地图之定位初探(一)

使用前的说明高德地图开放平台的iOS定位模块网址-->http://lbs.amap.com/api/ios-location-sdk/summary/ 高德地图有Web端.android平台.iOS平台和Web服务&其他四个部分. iOS平台有地图.定位.导航等5个SDK. 准备: key是必须的:(官方文档 )控制台-->添加新Key 完成.Tip: 如何获取 Bundle Identifier:1.代码获取:NSString *bundleIdentifier = [[NSBu

Android学习十一：高德地图使用

写这篇文章主要有三个目的: 1.使用高德地图api定位 2.获取天气数据 3.编程练手文件结构清单文件信息说明: <?xml version="1.0" encoding="utf-8"?> <manifest xmlns:android="http://schemas.android.com/apk/res/android" package="org.tonny" android:versionCode

时时获得高德地图坐标 http://lbs.amap.com/console/show/picker

1.高德地图标注在做开发时,或者做高德地图标注的时候,要用到高德地图的坐标,时时获得高德地图坐标 http://lbs.amap.com/console/show/picker 老的高德地图标注地址已经废弃b.amap.com,这个已经不再使用.最新的需要使用高德云图单个或批量标注. http://yuntu.amap.com/ 2.百度地图标注 3.腾讯地图标注

（高德地图）marker定位 bug 解决总结

项目背景: 一个项目bug,项目中用到高德地图,默认打开页面会生成一个marker(下图红色icon),然后用户拖动marker到想要的位置,并且保存. 用户反映定位不准确,在当前页面编辑的位置,到后台打开位置就会有偏移. 因为后台打开时候是根据经纬度生成的marker,经过检查最终确定是前台页面,拖动marker定位获取经纬度那里出的问题. 这里不得不说下个人情况,此项目是他人开发,而开发人员已经不在公司,bug转发给我了.自己之前也没怎么使用过高德,主要使用的是谷歌地图和mapbox.

objective-c高德地图时时定位

这篇随笔是对上一遍servlet接口的实现. 一.项目集成高德地图应为我这个项目使用了cocopods这个第三方库管理工具,所以只需要很简单的步骤,就能将高德地图集成到项目中,如果你没使用过这工具,那就直接下载对应的sdk导入即可,因为这个工具的安装还是比较麻烦的,需要FQ. 既然我用的这种方式,下面我就贴相关的使用接图. 如果你项目中已经安装好了cocopods那么你只需直接在podfile中增加 pod 'Amap2DMap' 和 pod 'AmapSearch' 这两句即可, 第一个涉及

高德地图实现canvas画板

热门专题