将标记数据保存到db中 [英] saving marker data into db

问题描述

如何将谷歌地图标记数据保存到mysql数据库？使用PHP。
是否可以防止将该标记拖出某个国家？或者在点击提交时验证数据是否超出了通缉国的范围。

解决方案

是的，没问题。将不得不自己做。我为你提供'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; 
} 
？> 
  

index.php

 < div id =map-canvas>< / div> 
< div class =controls> 
< input type =buttonvalue =SAVEid =save_marker> 
< / div> 
< div id =display>< / div> 
 
< script type =text / javascriptsrc =http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js><<< ; /脚本> 
< script src =http://maps.googleapis.com/maps/api/js?libraries=geometry&sensor=false>< / script> 
< script> 
 /////////////////////// 
 // Ajax /上传部分
 $（document）.ready（function（ ）{
 //初始化Google Maps 
 initialize（）; 
 //将标记保存到数据库
 $（'＃save_marker'）。click（function（）{
 //我们读取标记的位置并通过AJAX 
 var position = marker.getPosition（）; 
 $ .ajax（{
 url：'ajax.php'，
 type：'post'，
 data：{
 lat：position.lat（），
 lng：position.lng（）
}，
成功：function（response）{
 //我们将INSERT查询打印到#display 
 $（'＃display'）。html（response）; 
} 
}）; 
}）; 
 
}）; 
 
 /////////////////////// 
 // Google地图部分
 var map = null; 
 var marker = null; 
 var country ='BE'; //比利时。随意在任何其他国家使用此脚本
 
 // Google Maps 
函数initialize（）{
 var startDragPosition = null; 
 var mapOptions = {
 zoom：8，
 center：new google.maps.LatLng（50.5，4.5），// Over Belgium 
 mapTypeId：google.maps.MapTypeId。地形
}; 
 map = new google.maps.Map（document.getElementById（'map-canvas'），mapOptions）; 
 //设置新标记
 marker = new google.maps.Marker（{
 position：new google.maps.LatLng（50.5,4.5），
 map：map， 
 draggable：true 
}）; 
 
 var myGeocoder = new google.maps.Geocoder（）; 
 
 //设置拖动开始和结束的回调
 google.maps.event.addListener（marker，'dragstart'，function（event）{
 // //请记住标记开始的位置
 //如果标记在其他国家/地区丢弃，我们会将标记设置回此位置
 startDragPosition = marker.getPosition（）; 
 }）; 
 google.maps.event.addListener（marker，'dragend'，function（event）{
 //现在我们必须查看该国是否是正确的国家
 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）{
 //我们设置标记返回
 marker.setPosition（startDragPosition）; 
} 
} 
 else {
 // geocoder没有找到任何东西，所以让我们假设位置是无效的
 marker.setPosition（startDragPosition）; 
} 
}）; 
}）; 
} 
 
 / ** 
 * geocodeResponse是一个充满地址数据的对象。 
 *这个函数会为正确的值钓鱼
 * 
 *例如：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 （var i = 0; i< geocodeResponse.address_components.length; i ++）{
 for（var j = 0; j< geocodeResponse.address_components [i]如果（shortName）{
返回geocodeResponse.address_components [i] .types.length; j ++）{
 if（geocodeResponse.address_components [i] .types [j] == type） 。简称; 
} 
 else {
 return geocodeResponse.address_components [i] .long_name; 
} 
} 
} 
} 
 return''; 
} 
< / script> 
< style> 
＃map-canvas {
 height：400px; 
} 
< / style> 
  

How to save a google maps marker data into mysql DB ? using php . And is it possible to prevent dragging that marker out of a certain country ? or maybe validating if the data is out of the wanted country when clicking on submit for example.

解决方案

Yes, no problem.

The database part, you will have to do yourself. I provide you 'ajax.php'; where you receive the POST data. All I do, is print the SQL-string.

The country is Belgium, feel free to change this (now on line 39). When ever the client drops the marker anywhere but in Belgium, the marker is sent back to the position where the client started dragging

ajax.php

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

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

这篇关于将标记数据保存到db中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！