H5页面,百度地图点击事件
需求:用户点击地图的时候获取地址街道,编码等详细信息。
然后看百度API文档,看到了click事件,关键时候还是需要看文档的。

实现

这样子虽然在浏览器的手机模拟器下是没有问题的

但是放在机器上测试的时候就出现问题了,有时候点击不到,我一直以为是我手机的问题,然后我在代码的第一行加上了alert但是发现电脑上没问题,但是手机上不行,我用的是安卓,alert时有时无。然后就百度找了一下,https://www.jianshu.com/p/153cd2471576
实例:
var xArr = [];//存放横坐标
var yArr = [];//存放纵坐标
//点击事件获取地址信息start------------------------
//手指触摸屏幕的时候清空两个数组
map.addEventListener("touchstart", function(e){
xArr.length = 0;
yArr.length = 0;
});
//如果滑动了屏幕,xArr和yArr将各存入两个坐标值,即始末坐标值
map.addEventListener("touchmove",function(e){
xArr.push(e.targetTouches[0].pageX);
yArr.push(e.targetTouches[0].pageY);
});
map.addEventListener('touchend',function(e){
var far;
var flag = true;
//计算平移距离,区分滑动事件和点击事件
if((xArr.length > 1) && (yArr.length > 1)){
far = (Math.abs(xArr[0]-xArr[1]))^2 + (Math.abs(yArr[0]-yArr[1]))^2;
if(far > 0){
flag = false;
}
}
if(flag){ map.clearOverlays(); //清除地图上所有覆盖物
map.centerAndZoom(new BMap.Point(e.point.lng, e.point.lat), 18);
map.addOverlay(new BMap.Marker(new BMap.Point(e.point.lng, e.point.lat))); //添加标注
var pt = e.point;
gc.getLocation(pt, function(rs){
lon=rs.point.lng;//经度
lat=rs.point.lat;//纬度
streetName = rs.addressComponents.street;//获取街道名称
myValue=rs.address;
$("#addrId").html(rs.address);//当前位置
});
}
});
//点击事件获取地址信息end------------------------
这样就可以解决问题了
H5页面,百度地图点击事件的更多相关文章
- 在iOS APP中使用H5显示百度地图时如何支持HTTPS?
现象: 公司正在开发一个iOSAPP,使用h5显示百度地图,但是发现同样的H5页面,在安卓可以显示出来,在iOS中就显示不出来. 原因分析: 但是现在iOS开发中,苹果已经要求在APP中的所有对外连接 ...
- ios h5 app avalon tap点击事件失效及点击延迟300ms问题解决方法
1.ios h5 app avalon tap事件失效 使用MUI制作app界面,使用avalon.js渲染数据,发现在(Android上正常)ios上运行时容器div的avalon的ms-on-ta ...
- 完整版百度地图点击列表定位到对应位置并有交互动画效果demo
1.前言 将地图嵌入到项目中的需求很多,好吧,我一般都是用的百度地图.那么今天就主要写一个完整的demo.展示一个列表,点击列表的任一内容,在地图上定位到该位置,并有动画效果.来来来,直接上demo ...
- 百度地图点击地图显示地址详情的默认方法怎么关闭,去掉百度地图api图标信息
去掉百度地图api图标信息 调用百度地图API时,如果想去掉百度的logo,只需要在css里设置: <style> .anchorBL{display:none} </style&g ...
- asp.net 页面上的点击事件
asp.net 页面上 服务器端控件Button 有两个click事件如 <asp:Button ID="Button1" runat="server" ...
- 微信小程序tips集合:无法输入文字/随时查看页面/元素审查/点击事件/数据绑定
1:编辑文档无法输入文字 出现这种情况一般是因为之前编辑的文档未保存,所有在其他文档输入的时候会自动输入到未保存的文档中,在文档暂时编辑完毕后要ctrl+s随手保存,不然会出现无法打字情况 2: 随时 ...
- echarts的地图点击事件
1.echarts的地图展示,有时候展示出的数据,虽然鼠标点击上去某个省份或者某个地方会有数据显示,但是点击一下地图没有任何动态效果,如何添加地图点击效果呢,这里自己也是坐下笔记,方便以后使用. 参考 ...
- H5调用百度地图导航
template <div class="map"> <div class="content_flex"><img src=&qu ...
- 有关鼠标在页面body获取点击事件的问题
首先说到这个问题我们先来谈谈body的高度问题,关于body高度的设置. 有些小伙伴可能就会说这个是多么的简单,直接进行如下操作不就可以了 body{ height:100%; } 这个设置虽然是想法 ...
随机推荐
- swoole 监控文件改动
<?php /** * 场景: * 进程监控文件改动 */ date_default_timezone_set('PRC'); echo '进程id:' . posix_getpid() . P ...
- Codeforces Round #594 (Div. 2) - C. Ivan the Fool and the Probability Theory(思维)
题意:给n*m的网格涂黑白两种颜色,保证每个格子上下左右的四个格子中最多只有一个格子与自己颜色相同,问有多少种涂法?结果$mod1000000007$ 思路:先只考虑一行有多少种涂法 $dp[i][0 ...
- 5(计算机网络)从物理层到MAC层
故事就从我的大学宿舍开始讲起吧.作为一个八零后,我要暴露年龄了. 我们宿舍四个人,大一的时候学校不让上网,不给开通网络.但是,宿舍有一个人比较有钱,率先买了一台电脑.那买了电脑干什么呢? 首先,有单机 ...
- Servlet对用户输入的数据进行读取
逻辑代码: package com.zyb.test; import java.io.IOException; import java.util.Enumeration; import javax.s ...
- PHP开发者该知道的5个Composer小技巧
Composer 是新一代的PHP依赖管理工具.本文介绍使用Composer的五个小技巧,希望能给你的PHP开发带来方便. 1. 仅更新单个库 只想更新某个特定的库,不想更新它的所有依赖,很简单 co ...
- 02-01 Android学习进度报告一
前两天,刚刚安装好有关Android开发有关的软件并配好了环境,有一些体会想要发表. 首先我了解到有一款专门用于Android开发的软件,叫做Android Studio ,是一个IDE集成软件 于是 ...
- div 浮动
浮动 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <titl ...
- day16-Python运维开发基础(os / os.path / shutil模块)
1. OS模块与shutil模块 os :新建/删除shutil: 复制/移动 # ### os模块 与 shutil模块 """ os 新建/删除 shutil 复制/ ...
- linux打包解压包(.tar .gz .tar.gz .zip)
01-.tar格式 解包:[*******]$ tar xvf FileName.tar 打包:[*******]$ tar cvf FileName.tar DirName(注:tar是打包,不是压 ...
- 如何更改placeholder属性中文字颜色
如何更改placeholder属性中文字颜色 placeholder这个属性是HTML5中新增的属性,该属性的作用是规定可描述输入字段预期值的简短的提示信息,该提示会在用户输入之前显示在输入字段中,会 ...