Google 地图 - 获取坐标

Question

<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>

对于我的一生，我试图从标记中获取 google 地图的坐标，以供以后在数据库中使用......

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

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

但总的来说....

非常感谢您的帮助！！！

Answer 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>

Answer 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>

Google 地图 - 获取坐标

Google Map - Getting co-ords out

google-maps

google-maps-api-3

google-maps-markers