javascript变量在地图中传递给php

Question

我想将我的地图的经纬度或搜索位置的 url 传递给 PHP 变量，并将地图中的搜索字符串传递给 PHP 变量。谁能建议如何做到这一点？我想插入在我从 javascript 获得的 php 变量中搜索了类似“Mirpur Stadium,Dhaka”之类的字符串，并将该搜索地点的位置 url “http://......” 搜索到我的数据库中。我可以通过获取PHP 变量中的 JS 变量。谁能帮助我对我的代码进行必要的编辑？

// This example requires the Places library. Include the libraries=places
// parameter when you first load the API. For example:
// <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places">

function initAutocomplete() {
var map = new google.maps.Map(document.getElementById('map'), {
  center: {lat: 23.685, lng: 90.3563},
  zoom: 11,
  mapTypeId: google.maps.MapTypeId.ROADMAP
});

google.maps.event.addListener(map, 'idle', savecoordinates);

function savecoordinates() {
  curcoordinates = map.getBounds();
  console.log(curcoordinates);
}

// Create the search box and link it to the UI element.
var input = document.getElementById('pac-input');
var searchBox = new google.maps.places.SearchBox(input);
map.controls[google.maps.ControlPosition.TOP_LEFT].push(input);

// Bias the SearchBox results towards current map's viewport.
map.addListener('bounds_changed', function() {
  searchBox.setBounds(map.getBounds());
});

var markers = [];
// Listen for the event fired when the user selects a prediction and retrieve
// more details for that place.
searchBox.addListener('places_changed', function() {
  var places = searchBox.getPlaces();

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

  // Clear out the old markers.
  markers.forEach(function(marker) {
    marker.setMap(null);
  });
  markers = [];

  // For each place, get the icon, name and location.
  var bounds = new google.maps.LatLngBounds();
  places.forEach(function(place) {
    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)
    };

    // Create a marker for each place.
    markers.push(new google.maps.Marker({
      map: map,
      icon: icon,
      title: place.name,
      position: place.geometry.location
    }));

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

setMarkers(map);
 }

 // Data for the markers consisting of a name, a LatLng and a zIndex for the
 // order in which these markers should display on top of each other.
 var beaches = [
['Dhaka', 23.777176, 90.399452, 4],
['Mirpur 10', 23.8375, 90.3753, 5],
['Shahbag', 23.7381, 90.3954, 3],
['Dhanmondi 5', 23.7459, 90.3852, 2],
['MIST Mirpur', 23.8383, 90.3606, 1]
];

function setMarkers(map) {
// Adds markers to the map.

// Marker sizes are expressed as a Size of X,Y where the origin of the image
// (0,0) is located in the top left of the image.

// Origins, anchor positions and coordinates of the marker increase in the X
// direction to the right and in the Y direction down.
var image = {
  url: 'map_icon.png',
  // This marker is 20 pixels wide by 32 pixels high.
  size: new google.maps.Size(20, 32),
  // The origin for this image is (0, 0).
  origin: new google.maps.Point(0, 0),
  // The anchor for this image is the base of the flagpole at (0, 32).
  anchor: new google.maps.Point(0, 32)
};
// Shapes define the clickable region of the icon. The type defines an HTML
// <area> element 'poly' which traces out a polygon as a series of X,Y points.
// The final coordinate closes the poly by connecting to the first coordinate.
var shape = {
  coords: [1, 1, 1, 20, 18, 20, 18, 1],
  type: 'poly'
};
for (var i = 0; i < beaches.length; i++) {
  var beach = beaches[i];
  var marker = new google.maps.Marker({
    position: {lat: beach[1], lng: beach[2]},
    map: map,
    icon: image,
    shape: shape,
    title: beach[0],
    zIndex: beach[3]
  });
}
}

Answer 1

您不能将 Javascript 变量直接传递给 PHP，但您可以使用 AJAX 请求来完成。例如

xhttp.open("GET", "insert.php?lat="+beach[1]+"&lng="+beach[2]+"&url="+encodeURI(input.value), true);
xhttp.send();

在 insert.php 中，您可以使用 $_GET['lat']、$_GET['lng'] 等检索数据并将其插入数据库。

编辑

完整示例：

var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
   if (xhttp.readyState == 4 && xhttp.status == 200) {
       console.log(xhttp.responseText);
   }
};
xhttp.open("GET", "insert.php?lat="+beach[1]+"&lng="+beach[2]+"&url="+encodeURI(input.value), true);
xhttp.send();