Google Map - получение информации - PullRequest
Новая
       58

Google Map - получение информации

0 голосов
/ 30 апреля 2018 

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

Ради жизни я пытаюсь получить координаты OUT из карт Google из маркера, для последующего использования в базе данных ......

У меня большая часть кода, но я не могу заставить его работать вместе!

  1. Этот супер мозг помог кому-то получить 1 маркер, который обновляет GoogleMaps v3 API Создание только одного маркера при нажатии

  2. Этот код вытащил координаты в теле страницы. https://www.w3schools.com/graphics/tryit.asp?filename=trymap_ref_getbounds

Но все вместе ....

Ваша помощь будет принята с благодарностью !!!

Ответы [ 2 ]

0 голосов
/ 06 мая 2018

Большое спасибо! Это ответ 

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>
0 голосов
/ 01 мая 2018

Вы можете просто получить координаты маркера, используя .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>
...