Question

我正在开展一个项目，在该项目中，我在用户必须标记特定位置的页面上有Google地图。在非触摸设备上，拖放时返回坐标的可拖动标记可以解决此问题。

但是，我正在创建的项目要求此功能也能在移动设备上实现最佳效果。有没有人想过拖放以获取地图坐标的好方法？

请注意，所选的位置与地址无关，因此我无法撤消地理编码地址。

感谢任何帮助。

TL;博士;我需要一种触摸友好的方式，以便用户在Google地图上标记特定位置以获取其坐标。

Answer 1

正如geocodezip指出的那样，标准拖动事件仍可在移动设备上运行。但是，我更喜欢不同的方法。在触摸设备上使用拖动事件感觉反直觉。用户拇指在指针上，他们无法看到它们放在哪里。用户需要拖动地图，并拖动指针，这在小屏幕上很麻烦。

我找到了一个带有居中图像叠加层的解决方案，而不使用图像。

我的地图的HTML如下：

<div id="map">
    <div id="map_canvas" style="width:100%; height:400px"></div>
    <div id="cross"></div>
</div>

然后我将十字格子放在地图上，如下所示：

#map {
  position: relative;
}

#cross {
  z-index: 9999 !important;
  position: absolute;
  top: 50%;
  width: 100px;
  height: 100px;
  left: 50%;
  margin-left: -50px;
  margin-top: -50px;
  display: block;
}

然后我用一些CSS魔法创建一个十字准线：

#cross:before, #cross:after {
  content: "";
  position: absolute;
  z-index: -1;
  background: #d00;
  opacity: .5;
}

#cross:before {
  left: 50%;
  width: 30%;
  margin-left: -15%;
  height: 100%;
  opacity: .5;
}

#cross:after {
  top: 50%;
  height: 30%;
  margin-top: -15%;
  width: 100%;
  opacity: .5;
}

通过在CSS中使用'pointer-events：none'，任何鼠标或触摸事件都应该直接通过。尚未在旧版浏览器中测试过。

#cross, #cross:before, #cross:after {
  pointer-events: none;
}

请在此处找到我的完整解决方案： http://jsfiddle.net/4vrzgrx1/2/

我的回答建立在这个相关的问题上： Google Maps transparent image overlay

希望这对某些人有用。

拖拽放弃谷歌地图在触摸设备上的替代方案

1 个答案: