谷歌地图 - 找出坐标答案

【问题标题】：Google Map - Getting co-ords out谷歌地图 - 找出坐标
【发布时间】：2018-04-30 20:12:44
【问题描述】：

<Body>
<!--Button to pull out marker co-ords-->
<p><button onclick="document.getElementById('latlnginpara').innerHTML = map.marker.getBounds()">Get map bounds</button></p>

<!--This is where the co-ords will sit for now-->
<div id="latlnginpara"></div>
    
<!--This plots a slot for the map-->
<div id="map" style="width:100%;height:500px;"></div>

        
<!--Now starts the Map fun-->
<script>
function myMap() {
    
  var mapCanvas = document.getElementById("map");
  var myCenter=new google.maps.LatLng(51.508742,-0.120850);
  var mapOptions = {
                center: myCenter, 
                zoom: 5, 
                zoomControl: true,
                mapTypeControl: true,
                scaleControl: true,
                streetViewControl: true,
                overviewMapControl: true,
                rotateControl: true,
                             };
    
    
    
    
  var map = new google.maps.Map(mapCanvas, mapOptions);
    
//1 marker bit

var marker;

function placeMarker(location) {
  if ( marker ) {
    marker.setPosition(location);
  } else {
    marker = new google.maps.Marker({
      position: location,
      map: map
    });
  }
}

google.maps.event.addListener(map, 'click', function(event) {
  placeMarker(event.latLng);
});    
    
}
</script>

    
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyD5WIxyWvYfFU3vY27DM7mc-JClPwPLB0A&callback=myMap"></script>
 




    

 
    </Body>

为了我的一生，我正在尝试从标记中获取谷歌地图的坐标，以便以后在数据库中使用......

我有大部分代码，但我似乎无法让它一起工作！

这个超级大脑帮助某人获得了 1 个更新的标记 GoogleMaps v3 API Create only 1 marker on click
此代码将坐标提取到页面正文中。 https://www.w3schools.com/graphics/tryit.asp?filename=trymap_ref_getbounds

但都在一起......

非常感谢您的帮助！！！

【问题讨论】：

您可以将代码添加到问题中吗？

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

【解决方案1】：

您可以使用.lat() 和.lng() 简单地获取标记的坐标。

var marker, map;

function placeMarker(location) {
  if (marker) {
    marker.setPosition(location);
  } else {
    marker = new google.maps.Marker({
      position: location,
      map: map
    });
  }
  
  document.getElementById('location').textContent = location.toString();
  document.getElementById('lat').textContent = location.lat(); // get latitude
  document.getElementById('lng').textContent = location.lng(); // get longitude
}

function myMap() {

  var mapCanvas = document.getElementById("map");
  var myCenter = new google.maps.LatLng(51.508742, -0.120850);
  var mapOptions = {
    center: myCenter,
    zoom: 5,
    zoomControl: true,
    mapTypeControl: true,
    scaleControl: true,
    streetViewControl: true,
    overviewMapControl: true,
    rotateControl: true,
  };

  map = new google.maps.Map(mapCanvas, mapOptions);

  google.maps.event.addListener(map, 'click', function(event) {
    placeMarker(event.latLng);
  });
}

myMap();

<!--Button to pull out marker co-ords-->
<p><button onclick="document.getElementById('latlnginpara').innerHTML = map.marker.getBounds()">Get map bounds</button></p>
<p id='location'></p>
<p id='lat'></p>
<p id='lng'></p>
<!--This is where the co-ords will sit for now-->
<div id="latlnginpara"></div>

<!--This plots a slot for the map-->
<div id="map" style="width:100%;height:500px;"></div>

<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyD5WIxyWvYfFU3vY27DM7mc-JClPwPLB0A&"></script>

【讨论】：

【解决方案2】：

非常感谢！这就是答案

var marker, map;

function placeMarker(location) {
  if (marker) {
    marker.setPosition(location);
  } else {
    marker = new google.maps.Marker({
      position: location,
      map: map
    });
  }
  
  document.getElementById('location').textContent = location.toString();
  document.getElementById('lat').textContent = location.lat(); // get latitude
  document.getElementById('lng').textContent = location.lng(); // get longitude
}

function myMap() {

  var mapCanvas = document.getElementById("map");
  var myCenter = new google.maps.LatLng(51.508742, -0.120850);
  var mapOptions = {
    center: myCenter,
    zoom: 5,
    zoomControl: true,
    mapTypeControl: true,
    scaleControl: true,
    streetViewControl: true,
    overviewMapControl: true,
    rotateControl: true,
  };

  map = new google.maps.Map(mapCanvas, mapOptions);

  google.maps.event.addListener(map, 'click', function(event) {
    placeMarker(event.latLng);
  });
}

myMap();

<!--Button to pull out marker co-ords-->
<p><button onclick="document.getElementById('latlnginpara').innerHTML = map.marker.getBounds()">Get map bounds</button></p>
<p id='location'></p>
<p id='lat'></p>
<p id='lng'></p>
<!--This is where the co-ords will sit for now-->
<div id="latlnginpara"></div>

<!--This plots a slot for the map-->
<div id="map" style="width:100%;height:500px;"></div>

<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyD5WIxyWvYfFU3vY27DM7mc-JClPwPLB0A&"></script>

【讨论】：