javascript - 百度地图v3.0如何手动写双指缩放和单指拖动事件？
使用touchstart、touchmove、touchend监听事件写百度地图api的v3.0的双指缩放和单指拖动地图的功能代码怎么写？
let map = new BMap.Map("map")
const mapContainer = document.getElementById('map')
mapContainer.addEventListener('touchmove', function(event){
})
mapContainer.addEventListener('touchstart', function(event) {
})
mapContainer.addEventListener('touchend', function(event) {
})
共有2个答案
既然你已经实现，这是一些优化，优化重绘和缩放体验的：
let map = new BMap.Map("map");
const mapContainer = document.getElementById("map");
let startZoom, firstDistance, startLng, startLat, startClientX, startClientY, startDistance, isUpdating = false;
mapContainer.addEventListener("touchstart", function (event) {
const touches = event.touches;
if (touches.length === 1) {
// 单指操作
startClientX = event.changedTouches[0].clientX;
startClientY = event.changedTouches[0].clientY;
startLng = map.getCenter().lng;
startLat = map.getCenter().lat;
startZoom = map.getZoom();
} else if (touches.length > 1) {
// 双指操作
const events1 = touches[0];
const events2 = touches[1];
startZoom = map.getZoom();
const one = { x: events1.pageX, y: events1.pageY };
const two = { x: events2.pageX, y: events2.pageY };
firstDistance = getDistance(one, two);
}
event.preventDefault();
});
mapContainer.addEventListener("touchmove", function (event) {
event.preventDefault();
if (!isUpdating) {
isUpdating = true;
requestAnimationFrame(() => {
const touches = event.touches;
if (touches.length === 1) {
// 单指操作
var x1 = event.changedTouches[0].clientX;
var y1 = event.changedTouches[0].clientY;
var x2 = startClientX;
var y2 = startClientY;
var dx = x2 - x1;
var dy = y2 - y1;
var mercatorLng = startLng + dx / Math.pow(2, map.getZoom() + 8) * 360;
var mercatorLat = startLat - dy / Math.pow(2, map.getZoom() + 8) * 360 / Math.PI * 2;
map.setCenter(new BMap.Point(mercatorLng, mercatorLat));
} else if (touches.length > 1) {
// 双指操作
const events1 = touches[0];
const events2 = touches[1];
const one = { x: events1.pageX, y: events1.pageY };
const two = { x: events2.pageX, y: events2.pageY };
const distance = getDistance(one, two);
const zoom = startZoom + Math.log2(distance / firstDistance);
map.setZoom(zoom);
}
isUpdating = false;
});
}
});
const getDistance = (start, stop) => {
return Math.sqrt(Math.pow(Math.abs(start.x - stop.x), 2) + Math.pow(Math.abs(start.y - stop.y), 2));
};
虽说有点僵硬，但是还是能用的
let map = new BMap.Map("map")
const mapContainer = document.getElementById('map')
let startZoom,firstDistance,startLng, startLat,startClientX,startClientY,startDistance;
mapContainer.addEventListener('touchstart', function(event) {
const touches = event.touches;
if (touches.length == 1) {
startClientX = event.changedTouches[0].clientX;
startClientY = event.changedTouches[0].clientY;
startLng = vm.map.getCenter().lng; // 记录地图中心点经度
startLat = vm.map.getCenter().lat; // 记录地图中心点纬度
startZoom = vm.map.getZoom(); // 记录地图缩放等级
}else if(touches.length > 1){ //判断是否是两指
const events1 = touches[0];
const events2 = touches[1];
startZoom = vm.map.getZoom();
const one = {
x:events1.pageX, //第一根手指的横坐标
y:events1.pageY, //第一根手指的横坐标
}; //第一根手指的横坐标
const two = {
x:events2.pageX, //第二根手指的横坐标
y:events2.pageY, //第二根手指的横坐标
};
firstDistance = getDistance(one,two);
}
event.preventDefault();
})
mapContainer.addEventListener('touchmove', function(event){
event.preventDefault();
const touches = event.touches;
if(touches.length>1){
const events1 = touches[0];
const events2 = touches[1];
const one = {
x:events1.pageX, //第一根手指的横坐标
y:events1.pageY, //第一根手指的横坐标
}; //第一根手指的横坐标
const two = {
x:events2.pageX, //第二根手指的横坐标
y:events2.pageY, //第二根手指的横坐标
};
const distance = getDistance(one,two);
let aa = distance / firstDistance
var zoom
if(aa<1){
zoom = startZoom-1
}else{
zoom = startZoom+1
}
// const zoom = startZoom + (distance / firstDistance)
vm.map.setZoom(zoom);
}else if(touches.length==1){
// if (event.touches.length == 0) {
// 计算结束触摸时的位置和开始触摸时的位置之间的距离和方向
var x1 = event.changedTouches[0].clientX;
var y1 = event.changedTouches[0].clientY;
var x2 = startClientX;
var y2 = startClientY;
var dx = x2 - x1;
var dy = y2 - y1;
// 根据距离和方向调整地图中心点位置
var mercatorLng = startLng + dx / Math.pow(2, vm.map.getZoom() + 8) * 360;
var mercatorLat = startLat - dy / Math.pow(2, vm.map.getZoom() + 8) * 360 / Math.PI * 2;
vm.map.setCenter(new BMap.Point(mercatorLng, mercatorLat));
// }
}
})
const getDistance = (start, stop) => { //计算两根手指之间的距离
return Math.sqrt(Math.pow(Math.abs(start.x - stop.x), 2) + Math.pow(Math.abs(start.y - stop.y), 2));
};-
我的Android应用程序允许用户打开图像，在特定区域创建标记（视觉线索），他们可以分别添加注释和在团队中交换。 例如。为了最终确定建筑计划，该应用程序允许以位图的形式打开拟议的计划，管理层可以通过在特定部分上标记并添加相应的注释来建议修改。 要求是，用户应该得到一个选择，以选择一个模式绘制在他的手指移动。 Android为绘制模式提供了哪些选项？ 我想用手指触摸上面的图案之一。
-
有两个div 想要实现.two在.one这个div里面通过滚轮缩放和鼠标拖动效果，并且拖动过程中不能完全拖离.one这个的区域，至少保留20px还在区域内(不管上下左右拖动都一样)意思大概跟下面这张图一样 而且.two初始的宽高大于.one，在打开这个页面的时候要把.two缩放到.one可显示全的大小，不知道这个效果该怎么做，搞了好久搞不出来，现在做了一部分，代码如下：
-
如何在其他地方自动触发这个marker点击事件？ 我写了一个网页把百度地图缩小放了进去 在地图外写了几个button 想做的就是通过点击button 右边标注点自动点击一次 在网上看了很多，都没有相关案例
-
本文向大家介绍移动端手指放大缩小插件与js源码，包括了移动端手指放大缩小插件与js源码的使用技巧和注意事项，需要的朋友参考一下 本文实例为大家分享了移动端手指放大缩小的具体代码，供大家参考，具体内容如下 以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持呐喊教程。
-
我希望用户能够将两个图像缩放到一起，同时保持它们之间的正确相对位置。我在其中一幅图像上使用缩放手势检测器，然后将手势扩展到另一幅图像。我的问题是，虽然我可以让图像一起移动，但一旦我尝试缩放第二个图像，翻译就会急剧下降。它们是我不知道的缩放时发生的事情吗？信息。ParentPrecords变量设置在缩放手势检测器的开头，然后再对父对象（基础图像）进行任何更改。
-
本文向大家介绍javascript实现百度地图鼠标滑动事件显示、隐藏，包括了javascript实现百度地图鼠标滑动事件显示、隐藏的使用技巧和注意事项，需要的朋友参考一下 其实现思路是给label设置样式，我们来看下具体做法吧 以上所述就是本文给大家分享的全部内容了，希望能够对大家学习javascript有所帮助。