php - 将标记数据保存到数据库中

Question

如何将谷歌地图标记数据保存到 mysql 数据库中？使用 php 。是否有可能阻止将该标记拖出某个国家？或者在点击提交时验证数据是否在想要的国家之外。

Answer 1

是的，没问题。

数据库部分，你得自己做。我为您提供“ajax.php”；您接收 POST 数据的位置。我所做的就是打印 SQL 字符串。

国家/地区是比利时，请随意更改(现在在第 39 行)。当客户端在比利时以外的任何地方放下标记时，标记都会被发送回客户端开始拖动的位置

ajax.php

<?php
if($_SERVER['REQUEST_METHOD'] === 'POST') {
  $sql = "INSERT INTO markers (lat, lng) VALUES (". (float) $_POST['lat'] .", ". (float) $_POST['lng'] .");";
  echo $sql;
}
?>

索引.php

<div id="map-canvas"></div>
<div class="controls">
  <input type="button" value="SAVE" id="save_marker">
</div>
<div id="display"></div>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://maps.googleapis.com/maps/api/js?libraries=geometry&sensor=false"></script>
<script>
///////////////////////
// Ajax / upload part
$(document).ready(function() {
  // initialize Google Maps
  initialize();
  // save marker to database
  $('#save_marker').click(function() {
    // we read the position of the marker and send it via AJAX
    var position = marker.getPosition();
    $.ajax({
      url: 'ajax.php',
      type: 'post',
      data: {
        lat: position.lat(),
        lng: position.lng()
      },
      success: function(response) {
        // we print the INSERT query to #display
        $('#display').html(response);
      }
    });
  });

});

///////////////////////
//Google Maps part
var map = null;
var marker = null;
var country = 'BE';  // Belgium.  Feel free to use this script on any other country

// Google Maps
function initialize() {
  var startDragPosition = null;
  var mapOptions = {
    zoom: 8,
    center: new google.maps.LatLng(50.5, 4.5),  // Over Belgium
    mapTypeId: google.maps.MapTypeId.TERRAIN
  };
  map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
  // set the new marker
  marker = new google.maps.Marker({
    position: new google.maps.LatLng(50.5, 4.5),
    map: map,
    draggable: true
  });

  var myGeocoder = new google.maps.Geocoder();

  // set a callback for the start and end of dragging
  google.maps.event.addListener(marker,'dragstart',function(event) {
    // we remember the position from which the marker started.  
    // If the marker is dropped in an other country, we will set the marker back to this position
    startDragPosition = marker.getPosition();
  });
  google.maps.event.addListener(marker,'dragend',function(event) {
    // now we have to see if the country is the right country.  
    myGeocoder.geocode({'latLng': marker.getPosition()}, function(results, status) {
      if (status == google.maps.GeocoderStatus.OK && results[1]) {
        var countryMarker = addresComponent('country', results[1], true);
        if (country != countryMarker) {
          // we set the marker back
          marker.setPosition(startDragPosition);
        }
      }
      else {
        // geocoder didn't find anything.  So let's presume the position is invalid
        marker.setPosition(startDragPosition);
      }
    });
  });
}

/**
*   geocodeResponse is an object full of address data.  
*   This function will "fish" for the right value
*   
*   example: type = 'postal_code' => 
*   geocodeResponse.address_components[5].types[1] = 'postal_code'
*   geocodeResponse.address_components[5].long_name = '1000'
* 
*   type = 'route' => 
*   geocodeResponse.address_components[1].types[1] = 'route'
*   geocodeResponse.address_components[1].long_name = 'Wetstraat'
*/
function addresComponent(type, geocodeResponse, shortName) {
  for(var i=0; i < geocodeResponse.address_components.length; i++) {
    for (var j=0; j < geocodeResponse.address_components[i].types.length; j++) {
      if (geocodeResponse.address_components[i].types[j] == type) {
        if (shortName) {
          return geocodeResponse.address_components[i].short_name;
        }
        else {
          return geocodeResponse.address_components[i].long_name;
        }
      }
    }
  }
  return '';
}
</script>
<style>
#map-canvas {
  height:400px;
}
</style>