javascript变量传递到map中的php

javascript variable pass to php in map

本文关键字:map 中的 php 变量 javascript      更新时间:2023-09-26

我想将地图的纬度和经度或搜索位置的url传递给一个PHP变量,并将地图中搜索到的字符串传递给PHP变量。有人能建议如何做到这一点吗?我想将搜索到的字符串(如"Mirpur Stadium,Dhaka")插入到我从javascript和位置url中获得的php变量中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]
  });
}
}

您不能将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['lang']等检索数据,并将其插入数据库。

编辑

完整示例:

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();