在谷歌地图中用鼠标移动标记答案

【问题标题】：Move marker with mouse in google maps在谷歌地图中用鼠标移动标记
【发布时间】：2013-12-10 16:42:57
【问题描述】：

我想在谷歌地图上通过鼠标移动事件移动标记。

以下是我在谷歌地图上添加标记的代码。

<!DOCTYPE html>
<html>
<head>
 <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<title>Simple markers</title>
<style>
  html, body, #map-canvas {
    height: 100%;
    margin: 0px;
    padding: 0px
  }
</style>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<script>
function initialize() {
 var myLatlng = new google.maps.LatLng(-25.363882,131.044922);
 var mapOptions = {
   zoom: 4,
  center: myLatlng
 }
 var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);

 var marker = new google.maps.Marker({
  position: myLatlng,
  map: map,
  title: 'Hello World!'
 });
 }

 google.maps.event.addDomListener(window, 'load', initialize);

</script>
</head>
<body>
<div id="map-canvas"></div>
</body>

这是一个取自https://developers.google.com/maps/documentation/javascript/examples/marker-simple的简单标记示例

在鼠标移动时，我想用鼠标移动标记。但我不知道该怎么做

【问题讨论】：

您确定没有使标记可拖动吗？ var marker = new google.maps.Marker({ position: myLatlng, map: map, title: 'Hello World!', draggalbe: true });

标签： javascript google-maps google-maps-api-3

【解决方案1】：

 var marker = new google.maps.Marker({
                position: map.getCenter(),
                map: map,
                title: 'Click to zoom'
            });

            google.maps.event.addListener(map, 'mousemove', function(e) {
                marker.setPosition(e.latLng);
            });

使用此代码，我们可以在谷歌地图上用鼠标移动标记

【讨论】：

google.maps.Marker.setPosition 有这个签名：setPosition(latlng:LatLng)。它不以 mas 作为参数。在您的示例地图中将被忽略！
那么，您回答了自己的问题？这真的是你想要的吗？我可以知道你想要这个在哪个应用程序中吗？你想达到什么目标？
问一个问题然后自己回答是perfectly acceptable

【解决方案2】：

如果我理解您希望能够用鼠标移动标记。不一定要在mousemouve 事件中移动它。为了能够做到这一点，您只需将标记的draggable 属性设置为true。

考虑以下示例：

<!DOCTYPE html>
<html>
<head>
 <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<title>Simple markers</title>
<style>
  html, body, #map-canvas {
    height: 100%;
    margin: 0px;
    padding: 0px
  }
</style>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<script>
function initialize() {
 var myLatlng = new google.maps.LatLng(-25.363882,131.044922);
 var mapOptions = {
   zoom: 4,
  center: myLatlng
 }
 var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);

 var marker = new google.maps.Marker({
  position: myLatlng,
  map: map,
  title: 'Hello World!',
  draggable: true
 });
 }

 google.maps.event.addDomListener(window, 'load', initialize);

</script>
</head>
<body>
<div id="map-canvas"></div>
</body>

要引用标记已读取的所有属性：MarkerOptions

【讨论】：

【解决方案3】：

请参阅this 以获取 Google 地图中的事件侦听器

【讨论】：

它没有鼠标移动事件