点击谷歌地图上的标记点击javascript api [英] Place marker on click google maps javascript api

问题描述

我已经在JS Apis中编写了谷歌地图。

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

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

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

  google.maps.event .addListener（map，'click'，function（event）{
 
 
 document.getElementById（lat）.value = event.latLng.lat（）; 
 document （）; 
 marker.setMap（map）; 
 
 }）; 
  

请看看它并帮我解决问题。

干杯！

解决方案

lat and lng 没有在click监听器中定义。这应该工作：

$ p $ 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）;
}）; b


$ b

noreferrer>更新的小提琴

代码段：

  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;填充：0; < / c>< / code>

< script src =https://maps.googleapis.com/maps/api/js>< / script> Lat：< input id =latname =latval =40.713956/> Long：< input id =longname =longval =74.006653/>< br />< br />< div id =map_canvasstyle =width：500px; height：250px;>< / div>

I have coded a google map in JS Apis.

What I'm trying to achieve is that wherever the user clicks, it places the marker there and outputs its Lat and Lng.

What I have achieved is wherever I click, it outputs the Lat and Lng without dragging the marker there.

Here the Fiddle - http://jsfiddle.net/sarthakbatra1991/87v0obb4/#&togetherjs=3aTj11AiwO

google.maps.event.addListener(map, 'click', function (event) {


        document.getElementById("lat").value = event.latLng.lat();
        document.getElementById("long").value = event.latLng.lng();
        marker.setPosition(lat, lng);
        marker.setMap(map);

    });

Please look at it and help me out here.

Cheers!

解决方案

lat and lng are not defined in the click listener. This should work:

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

code snippet:

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>

这篇关于点击谷歌地图上的标记点击javascript api的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！