移动端H5实现手动选择地图点的一种解决方案

一、准备

文中所用地图应用为高得地图v1.4.15版，代码开发环境为Vue.js框架+webpack+node.js。

二、需求

移动端H5实现类似打车软件中在地图界面手动选择目的地功能。效果如图。

这里面有两个关键点是必须要解决的：1、如何实现地点标记在地图上移动进行选点，2、如何实现获取到点标记图标选择的点的坐标（经纬度）。

三、解决方案

首先来解决第一个问题。在打车软件中我们选择地图中的点的时候看似是选择图标在地图界面上移动，其实我们也可以反过来看，如果选择图标固定不动，手指移动的是地图，那么效果也是一样的。所以，我们可以这样来实现这个功能效果。把选择图标固定在一个固定的位置，然后通过地图的移动来实现地点选择。这里也产生一个新的问题，图标的固定点是哪个一个点，怎么样选择这个固定点。在高德地图的api中有一个可以获取地图中心点经纬度的api，同时为了选择地图点后获取该点经纬度的便利性，可以确定选择图标的固定位置为地图的中心点。

移动端H5实现手动选择地图点的一种解决方案相关推荐

移动端h5页面打开高德地图或者百度地图实现导航
需求场景:用户会收到一条短信,短信带着链接,点击链接跳转h5页面,h5页面实现跳转地图并实现导航. 方法:1.a标签直接打开地图,地图在浏览器支持跳转. 高德: <a href="ht ...
移动端h5调起高德地图、百度地图实现路线及路况查询
//html<a href="https://uri.amap.com/marker?position=经度,纬度&name=所在的位置名称">高德地图< ...
移动端h5 页面底部有一条白线的解决方案
一般这种情况是由于img标签自带的属性导致,,,如果不是因为img导致的请另行百度 img标签自带有3px的空隙解决方案大致分为以下三种: img {font-size:0} img {displa ...
android h5 多图上传源码,JS移动端/H5同时选择多张图片上传并使用canvas压缩图片...
最近在做一个H5的项目,里边涉及到拍照上传图片的功能以及识别图片的功能,这里对识别图片的功能不做赘述,不属本文范畴.我在做完并上线项目后,同事跟我提了一个要求是可不可以同时选择多张图片上传,我做的时候 ...
JQ----移动端h5页面通过地址调起通讯录以及高德地图、百度地图定位导航
JQ----移动端h5页面通过地址调起通讯录以及高德地图.百度地图定位导航通讯录: 可先加meta标签 <a href="tel:13838383838" class=&q ...
微信端H5使用百度地图定位获取当前位置安卓定位不准
微信端H5使用百度地图定位获取当前位置安卓定位不准的问题解决如下: 使用微信端定位,签名方法看微信接口文档: <script type="text/javascript"&g ...
移动端h5实现手机拍照上传图片，相册选择上传图片input type=file
移动端h5实现手机拍照上传图片,相册选择上传图片input type=file 有不足或者不对的在下方留言,有不明白的也请在下方留言,虽然我不一定能看到,话不多说上代码,注释都写好了 <!doc ...
一个数字键盘引发的血案——移动端H5输入框、光标、数字键盘全假套件实现...
https://juejin.im/post/5a44c5eef265da432d2868f6 为啥要写假键盘? 还是输入框.光标全假的假键盘? 手机自带的不用非得写个假的,吃饱没事干吧? 装逼?炫技 ...
移动端H5页面编辑器开发实战--原理结构篇
一.前言在去年10月份左右,接到了需求:开发一个H5移动端页面编辑器的任务,目的主要是解放公司内在制作这类网页的所投入的人力以及解决使用外部H5编辑器所涉及到的版权问题. 因此,一款能够与市面上已经 ...

移动端H5实现手动选择地图点的一种解决方案

一、准备

二、需求

三、解决方案

移动端H5实现手动选择地图点的一种解决方案相关推荐

最新文章

热门文章