在点击谷歌地图javascript api上放置标记

时间:2016-01-28 05:23:12

标签: google-maps google-maps-api-3 google-maps-markers

我在JS Apis编写了一个谷歌地图。

我想要实现的是,无论用户点击何处,它都会将标记放在那里并输出其Lat和Lng。

我所取得的成就是无论我在哪里点击,它都会输出Lat和Lng,而不会在那里拖动标记。

这里是小提琴 - http://jsfiddle.net/sarthakbatra1991/87v0obb4/#&togetherjs=3aTj11AiwO

dependencies {
        classpath 'com.android.tools.build:gradle:1.5.0' 
        // Lowest version for useLibrary is 1.3.0
        // Android Studio will notify you about the latest stable version
        // See all versions: http://jcenter.bintray.com/com/android/tools/build/gradle/
    }

请看一下,帮助我。

干杯!

1 个答案:

答案 0 :(得分:6)

点击侦听器中未定义

latlng。这应该有效:

google.maps.event.addListener(map, 'click', function (event) {
  document.getElementById("lat").value = event.latLng.lat();
  document.getElementById("long").value = event.latLng.lng();
  marker.setPosition(event.latLng);
});

updated fiddle

代码段

function initialize() {
  var myLatlng = new google.maps.LatLng(40.713956, -74.006653);

  var myOptions = {
    zoom: 8,
    center: myLatlng,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };
  var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

  var marker = new google.maps.Marker({
    draggable: true,
    position: myLatlng,
    map: map,
    title: "Your location"
  });

  google.maps.event.addListener(marker, 'dragend', function(event) {
    document.getElementById("lat").value = event.latLng.lat();
    document.getElementById("long").value = event.latLng.lng();
  });

  google.maps.event.addListener(map, 'click', function(event) {
    document.getElementById("lat").value = event.latLng.lat();
    document.getElementById("long").value = event.latLng.lng();
    marker.setPosition(event.latLng);
  });
}
google.maps.event.addDomListener(window, "load", initialize());
<style> html,
body,
#map_canvas {
  margin: 0;
  padding: 0;
  height: 100%
}
</style>
<script src="https://maps.googleapis.com/maps/api/js"></script>
Lat:
<input id="lat" name="lat" val="40.713956" />Long:
<input id="long" name="long" val="74.006653" />
<br />
<br />
<div id="map_canvas" style="width: 500px; height: 250px;"></div>