Question

＆＃13;

<link href="bower_components/froala-wysiwyg-editor/css/froala_editor.min.css" rel="stylesheet" type="text/css" />. 
<link href="bower_components/froala-wysiwyg-editor/css/froala_style.min.css" rel="stylesheet" type="text/css" />. 
<script type="text/javascript" src="bower_components/froala-wysiwyg-editor/js/froala_editor.min.js"></script>.

＆＃13;

对于我的生活，我试图从标记中获取谷歌地图的坐标，以便以后在数据库中使用......

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

这个超级大脑帮助某人得到了一个更新的标记 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>

谷歌地图 - 获取合作

2 个答案: