Wie bekomme ich Breiten- und Längengrad von Marker

bitte ich arbeite im Projekt und ich möchte Breiten- und Längengrad vom Marker bekommen ... Ich suche, wie man Text von Eingabe und zeigen Sie den Marker, aber ich möchte Breite und Länge bekommen in Datenbank einfügen ... wie Breite und Länge in diesem Code könntenWie bekomme ich Breiten- und Längengrad von Marker

<!DOCTYPE html> 
<html> 
    <head> 
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no"> 
    <meta charset="utf-8"> 
    <title>Places Searchbox</title> 
    <style> 

     #map { 
     height: 100%; 
     } 

     html, body { 
     height: 100%; 
     margin: 0; 
     padding: 0; 
     } 
     #description { 
     font-family: Roboto; 
     font-size: 15px; 
     font-weight: 300; 
     } 

     #infowindow-content .title { 
     font-weight: bold; 
     } 

     #infowindow-content { 
     display: none; 
     } 

     #map #infowindow-content { 
     display: inline; 
     } 

     .pac-card { 
     margin: 10px 10px 0 0; 
     border-radius: 2px 0 0 2px; 
     box-sizing: border-box; 
     -moz-box-sizing: border-box; 
     outline: none; 
     box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3); 
     background-color: #fff; 
     font-family: Roboto; 
     } 

     #pac-container { 
     padding-bottom: 12px; 
     margin-right: 12px; 
     } 

     .pac-controls { 
     display: inline-block; 
     padding: 5px 11px; 
     } 

     .pac-controls label { 
     font-family: Roboto; 
     font-size: 13px; 
     font-weight: 300; 
     } 

     #pac-input { 
     background-color: #fff; 
     font-family: Roboto; 
     font-size: 15px; 
     font-weight: 300; 
     margin-left: 12px; 
     padding: 0 11px 0 13px; 
     text-overflow: ellipsis; 
     width: 400px; 
     } 

     #pac-input:focus { 
     border-color: #4d90fe; 
     } 

     #title { 
     color: #fff; 
     background-color: #4d90fe; 
     font-size: 25px; 
     font-weight: 500; 
     padding: 6px 12px; 
     } 
     #target { 
     width: 345px; 
     } 
    </style> 
    </head> 
    <body> 
    <input id="pac-input" class="controls" type="text" placeholder="Search Box"> 
    <div id="map"></div> 
    <script> 

     function initAutocomplete() { 
     var map = new google.maps.Map(document.getElementById('map'), { 
      center: {lat: -33.8688, lng: 151.2195}, 
      zoom: 13, 
      mapTypeId: 'roadmap' 
     }); 


     var input = document.getElementById('pac-input'); 
     var searchBox = new google.maps.places.SearchBox(input); 
     map.controls[google.maps.ControlPosition.TOP_LEFT].push(input); 


     map.addListener('bounds_changed', function() { 
      searchBox.setBounds(map.getBounds()); 
     }); 

     var markers = []; 

     searchBox.addListener('places_changed', function() { 
      var places = searchBox.getPlaces(); 

      if (places.length == 0) { 
      return; 
      } 

      markers.forEach(function(marker) { 
      marker.setMap(null); 
      }); 
      markers = []; 
      var bounds = new google.maps.LatLngBounds(); 
      places.forEach(function(place) { 
      if (!place.geometry) { 
       console.log("Returned place contains no geometry"); 
       return; 
      } 
      var icon = { 
       url: place.icon, 
       size: new google.maps.Size(71, 71), 
       origin: new google.maps.Point(0, 0), 
       anchor: new google.maps.Point(17, 34), 
       scaledSize: new google.maps.Size(25, 25) 
      }; 

      markers.push(new google.maps.Marker({ 
       map: map, 
       icon: icon, 
       title: place.name, 
       position: place.geometry.location 
      })); 

      if (place.geometry.viewport) { 
       bounds.union(place.geometry.viewport); 
      } else { 
       bounds.extend(place.geometry.location); 
      } 
      }); 
      map.fitBounds(bounds); 
     }); 
     } 

    </script> 
    <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyD4DvaNOnpTRUFASvy6lyY0DDVcfXytvnY&libraries=places&callback=initAutocomplete" 
     async defer></script> 
    </body> 
</html>

Quelle

2017-05-12 Eslam Elkhafagy

Sie tun, wie etwas zu bekommen:

// This will contain all markers positions 
var savedPositions = []; 

function initAutocomplete() { 
    var map = new google.maps.Map(document.getElementById('map'), { 
     center: {lat: -33.8688, lng: 151.2195}, 
     zoom: 13, 
     mapTypeId: 'roadmap' 
    }); 


    var input = document.getElementById('pac-input'); 
    var searchBox = new google.maps.places.SearchBox(input); 
    map.controls[google.maps.ControlPosition.TOP_LEFT].push(input); 


    map.addListener('bounds_changed', function() { 
     searchBox.setBounds(map.getBounds()); 
    }); 

    var markers = []; 

    searchBox.addListener('places_changed', function() { 
     var places = searchBox.getPlaces(); 

     if (places.length == 0) { 
     return; 
     } 

     markers.forEach(function(marker) { 
     marker.setMap(null); 
     }); 
     markers = []; 
     var bounds = new google.maps.LatLngBounds(); 
     places.forEach(function(place) { 
     if (!place.geometry) { 
      console.log("Returned place contains no geometry"); 
      return; 
     } 
     var icon = { 
      url: place.icon, 
      size: new google.maps.Size(71, 71), 
      origin: new google.maps.Point(0, 0), 
      anchor: new google.maps.Point(17, 34), 
      scaledSize: new google.maps.Size(25, 25) 
     }; 

     markers.push(new google.maps.Marker({ 
      map: map, 
      icon: icon, 
      title: place.name, 
      position: place.geometry.location 
     })); 

     // Here you can keep all markers positions 
     savedPositions.push({ 
      name: place.name, 
      lat: place.geometry.location.lat(), // latitude 
      lng: place.geometry.location.lng() // longitude 
     }); 

     if (place.geometry.viewport) { 
      bounds.union(place.geometry.viewport); 
     } else { 
      bounds.extend(place.geometry.location); 
     } 
     }); 
     map.fitBounds(bounds); 
    }); 
    }

und dann jederzeit können Sie den „savedPositions“ Inhalt in der Datenbank speichern.

Oder Sie können Daten aus dem searchBox-Listener direkt in Ihrer Datenbank mit einem AJAX-Aufruf speichern.

Quelle

2017-05-12 07:46:03

Wie bekomme ich Breiten- und Längengrad von Marker

Antwort

Verwandte Themen