javascript - 将谷歌地图自动填充地址API插入mysql数据库-6ren

javascript - 将谷歌地图自动填充地址API插入mysql数据库

转载作者：行者123 更新时间：2023-11-29 07:01:53

我已经尝试了几个小时才能使其正常工作，并且非常感谢您的帮助，因为我认为这是一个我看不到的小错字。我正在创建一个地址搜索栏，当有人搜索时，它会将他们的地址添加到数据库中，但是每次我搜索时，数据库中都会添加一个空白行，这让我认为变量是空的，但我无法弄清楚我的生活如何来填充它们。

https://pastebin.com/4CmY1CHt

<!DOCTYPE html>
<html>
  <head>
    <title>Place Autocomplete Address Form</title>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <style>
      /* Always set the map height explicitly to define the size of the div
       * element that contains the map. */
      #map {
        height: 100%;
      }
      /* Optional: Makes the sample page fill the window. */
      html, body {
        height: 100%;
        margin: 0;
        padding: 0;
      }
    </style>
    <style>
      #locationField, #controls {
        position: relative;
        width: 480px;
      }
      #autocomplete {
        position: absolute;
        top: 0px;
        left: 0px;
        width: 99%;
      }
      .label {
        text-align: right;
        font-weight: bold;
        width: 100px;
        color: #303030;
      }
      #address {
        border: 1px solid #000090;
        background-color: #f0f0ff;
        width: 480px;
        padding-right: 2px;
      }
      #address td {
        font-size: 10pt;
      }
      .field {
        width: 99%;
      }
      .slimField {
        width: 80px;
      }
      .wideField {
        width: 200px;
      }
      #locationField {
        height: 20px;
        margin-bottom: 2px;
      }
    </style>
  </head>

  <body>
      <?php 

        $host = 'localhost';
        $user = 'root';
        $pass = '';
        $database = 'addressTest';
        $con = mysqli_connect($host, $user, $pass, $database);
        if ($con){
            echo 'successfully connected';
        }

      $number = $street = $town = $county = $country = '';

      if ($_SERVER["REQUEST_METHOD"] == "POST") {

        $number = $_POST["street_number"];  
        $street = $_POST["route"];
        $town = $_POST["locality"];
        $county = $_POST["administrative_area_level_1"];
        $country = $_POST["country"];

        $sql = "INSERT INTO address (Number, Street, City, State, Country) VALUES ('$number', '$street', '$town', '$county', '$country')";
            $insert = mysqli_query($con, $sql);
            if ($insert){
                echo "inserted successfully";     
        }
      }

      ?>

    <div id="locationField">
        <form name=addressField  action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]); ?>" method="post">
            <input id="autocomplete" placeholder="Enter your address"
                   onFocus="geolocate()" type="text" name="address"></input>

    </div>

            <table id="address">
            <tr>
              <td class="label">Street address</td>

              <td class="slimField"><input class="field" id="street_number" name=street_number
                    disabled="true"></input></td>

              <td class="wideField" colspan="2"><input class="field" id="route"
                    disabled="true"></input></td>
            </tr>
            <tr>
              <td class="label">City</td>

              <!-- Note: Selection of address components in this example is typical.
                   You may need to adjust it for the locations relevant to your app. See
                   https://developers.google.com/maps/documentation/javascript/examples/places-autocomplete-addressform
              -->
              <td class="wideField" colspan="3"><input class="field" id="locality"
                    disabled="true"></input></td>
            </tr>
            <tr>
              <td class="label">State</td>
              <td class="slimField"><input class="field"
                    id="administrative_area_level_1" disabled="true"></input></td>
              <td class="label">Zip code</td>
              <td class="wideField"><input class="field" id="postal_code"
                    disabled="true"></input></td>
            </tr>
            <tr>
              <td class="label">Country</td>
              <td class="wideField" colspan="3"><input class="field"
                    id="country" disabled="true"></input></td>
            </tr>
          </table>
        <input type="submit" value="Submit" onclick="validateForm()">
      </form>

    <script>
      // This example displays an address form, using the autocomplete feature
      // of the Google Places API to help users fill in the information.

      // 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">

      var placeSearch, autocomplete;
      var componentForm = {
        street_number: 'short_name',
        route: 'long_name',
        locality: 'long_name',
        administrative_area_level_1: 'short_name',
        country: 'long_name',
        postal_code: 'short_name'
      };

      function initAutocomplete() {
        // Create the autocomplete object, restricting the search to geographical
        // location types.
        autocomplete = new google.maps.places.Autocomplete(
            /** @type {!HTMLInputElement} */(document.getElementById('autocomplete')),
            {types: ['geocode']});

        autocomplete.setComponentRestrictions(
            {'country': ['irl']});

        // When the user selects an address from the dropdown, populate the address
        // fields in the form.
        autocomplete.addListener('place_changed', fillInAddress);
      }

      function fillInAddress() {
        // Get the place details from the autocomplete object.
        var place = autocomplete.getPlace();

        for (var component in componentForm) {
          document.getElementById(component).value = '';
        }

        // Get each component of the address from the place details
        // and fill the corresponding field on the form.
        for (var i = 0; i < place.address_components.length; i++) {
          var addressType = place.address_components[i].types[0];
          if (componentForm[addressType]) {
            var val = place.address_components[i][componentForm[addressType]];
            document.getElementById(addressType).value = val;
          }
        }
      }

      // Bias the autocomplete object to the user's geographical location,
      // as supplied by the browser's 'navigator.geolocation' object.
      function geolocate() {
        if (navigator.geolocation) {
          navigator.geolocation.getCurrentPosition(function(position) {
            var geolocation = {
              lat: position.coords.latitude,
              lng: position.coords.longitude
            };
            var circle = new google.maps.Circle({
              center: geolocation,
              radius: position.coords.accuracy
            });
            autocomplete.setBounds(circle.getBounds());
          });
        }
      }
    </script>
    <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAygtLX9ROxE1TF6RJ9KG6yWJ_zTv5IZG4&libraries=places&callback=initAutocomplete"
        async defer></script>
  </body>

</html>

如果有任何帮助，我们将不胜感激，如果很明显，我们深表歉意。

最佳答案

这些都是问题

所有表单输入字段都没有 name 属性，这是表单字段发布所必需的
删除 disable 属性，禁用的属性字段值永远不会发布，而是使用 readonly 属性

使用 print_r($_POST); 查看提交表单后发布的值。

这是完整的代码

<body>
  <?php

    $host = 'localhost';
    $user = 'root';
    $pass = '';
    $database = 'addressTest';
    $con = mysqli_connect($host, $user, $pass, $database);
    if ($con){
        echo 'successfully connected';
    }

  $number = $street = $town = $county = $country = '';



  if ($_SERVER["REQUEST_METHOD"] == "POST") {
  //print_r($_POST); use this to debug POST data 
    $number = $_POST["street_number"];  
    $street = $_POST["route"];
    $town = $_POST["locality"];
    $country = $_POST["country"];

    $sql = "INSERT INTO address (Number, Street, City, State, Country) VALUES ('$number', '$street', '$town', '$county', '$country')";
        $insert = mysqli_query($con, $sql);
        if ($insert){
            echo "inserted successfully";    
    }
  }

  ?>

<div id="locationField">
    <form name=addressField  action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]); ?>" method="post">
        <input id="autocomplete" placeholder="Enter your address"
               onFocus="geolocate()" type="text" name="address"></input>

</div>

        <table id="address">
        <tr>
          <td class="label">Street address</td>

          <td class="slimField"><input class="field" id="street_number" name="street_number"
                readonly="true"></input></td>

          <td class="wideField" colspan="2"><input class="field" id="route" name="route"
                readonly="true"></input></td>
        </tr>
        <tr>
          <td class="label">City</td>

          <!-- Note: Selection of address components in this example is typical.
               You may need to adjust it for the locations relevant to your app. See
               https://developers.google.com/maps/documentation/javascript/examples/places-autocomplete-addressform
          -->
          <td class="wideField" colspan="3"><input class="field" id="locality" name="locality"
                readonly="true"></input></td>
        </tr>
        <tr>
          <td class="label">State</td>
          <td class="slimField"><input class="field"
                id="administrative_area_level_1" readonly="true"></input></td>
          <td class="label">Zip code</td>
          <td class="wideField"><input class="field" id="postal_code" name="postal_code"
                readonly="true"></input></td>
        </tr>
        <tr>
          <td class="label">Country</td>
          <td class="wideField" colspan="3"><input class="field"
                id="country" name="country"readonly="true"></input></td>
        </tr>
      </table>
    <input type="submit" value="Submit" onclick="validateForm()">
  </form>

<script>
  // This example displays an address form, using the autocomplete feature
  // of the Google Places API to help users fill in the information.

  // 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">

  var placeSearch, autocomplete;
  var componentForm = {
    street_number: 'short_name',
    route: 'long_name',
    locality: 'long_name',
    administrative_area_level_1: 'short_name',
    country: 'long_name',
    postal_code: 'short_name'
  };

  function initAutocomplete() {
    // Create the autocomplete object, restricting the search to geographical
    // location types.
    autocomplete = new google.maps.places.Autocomplete(
        /** @type {!HTMLInputElement} */(document.getElementById('autocomplete')),
        {types: ['geocode']});

    autocomplete.setComponentRestrictions(
        {'country': ['irl']});

    // When the user selects an address from the dropdown, populate the address
    // fields in the form.
    autocomplete.addListener('place_changed', fillInAddress);
  }

  function fillInAddress() {
    // Get the place details from the autocomplete object.
    var place = autocomplete.getPlace();

    for (var component in componentForm) {
      document.getElementById(component).value = '';
    }

    // Get each component of the address from the place details
    // and fill the corresponding field on the form.
    for (var i = 0; i < place.address_components.length; i++) {
      var addressType = place.address_components[i].types[0];
      if (componentForm[addressType]) {
        var val = place.address_components[i][componentForm[addressType]];
        document.getElementById(addressType).value = val;
      }
    }
  }

  // Bias the autocomplete object to the user's geographical location,
  // as supplied by the browser's 'navigator.geolocation' object.
  function geolocate() {
    if (navigator.geolocation) {
      navigator.geolocation.getCurrentPosition(function(position) {
        var geolocation = {
          lat: position.coords.latitude,
          lng: position.coords.longitude
        };
        var circle = new google.maps.Circle({
          center: geolocation,
          radius: position.coords.accuracy
        });
        autocomplete.setBounds(circle.getBounds());
      });
    }
  }
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAygtLX9ROxE1TF6RJ9KG6yWJ_zTv5IZG4&libraries=places&callback=initAutocomplete"
    async defer></script>

关于javascript - 将谷歌地图自动填充地址API插入mysql数据库，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/43163658/

文章推荐： php - 无法使用 pdo 导出到 csv

文章推荐： java - java中如何避免重复的数据库连接？

文章推荐： java - 日历不能正常工作

数据库
我的问题是如何在 python 中创建一个简单的数据库。我的例子是: User = { 'Name' : {'Firstname', 'Lastname'}, 'Address' : {'Street
mysql - iOS开发。数据库？数据库？什么是最好的方法？
我需要创建一个与远程数据库链接的应用程序! mysql 是最好的解决方案吗？ Sqlite 是唯一的本地解决方案吗？我使用下面的方法，我想知道它是否是最好的方法! NSString *evento
java 应用程序无法连接到远程 MySQL 数据库，但可以连接到本地 MySQL 数据库
给定两台 MySQL 服务器，一台本地，一台远程。两者都有一个包含表 bohica 的数据库 foobar。本地服务器定义了用户 'myadmin'@'%' 和 'myadmin'@'localhos
java - 灵活查询适用于 HANA 数据库，但不适用于 HSQL 数据库
我有以下灵活的搜索查询 Select {vt:code},{vt:productcode},{vw:code},{vw:productcode} from {abcd AS vt JOIN wxyz
mysql - 从原始数据文件恢复 MySQL 数据库 [XAMPP | MySQL |数据库]
好吧，我的电脑开始运行有点缓慢，所以我重置了 Windows，保留了我的文件。因为我的大脑还没有打开，所以我忘记事先备份我的 MySQL 数据库。我仍然拥有所有原始文件，因此我实际上仍然拥有数据库，但
android - 如何将我的 Access 数据库 (.accdb) 转换为 SQLite 数据库 (.sqlite)？
如何将我的 Access 数据库 (.accdb) 转换为 SQLite 数据库 (.sqlite)？请，任何帮助将不胜感激。最佳答案 1)如果要转换 db 的结构，则应使用任何 DB 建模工具:
django - 实际上我将我的 django 数据库 sqlite3 连接到 Mysql 数据库，每当我迁移时我都会收到此错误
系统检查发现了一些问题: 警告:？:(mysql.W002)未为数据库连接“默认”设置 MySQL 严格模式提示:MySQL 的严格模式通过将警告升级为错误来修复 MySQL 中的许多数据完整性问题
django - 实际上我将我的 django 数据库 sqlite3 连接到 Mysql 数据库，每当我迁移时我都会收到此错误
系统检查发现了一些问题: 警告:？:(mysql.W002)未为数据库连接“默认”设置 MySQL 严格模式提示:MySQL 的严格模式通过将警告升级为错误来修复 MySQL 中的许多数据完整性问题
android - 如何在 phonegap 数据库中使用 android 数据库/作为 phonegap 数据库
我想在相同的 phonegap 应用程序中使用 android 数据库。更多说明: 我创建了 phonegap 应用程序，但 phonegap 应用程序不支持服务，所以我们已经在 java 中为 a
javascript - 将日期插入 mysql 数据库 [我正在使用 php 和 xampp mysql 数据库]
Time Tracker function clock() { var mytime = new Date(); var seconds
php - MySQL如何从年份(参数)、weekOfYear(参数)、时间(数据库)和dayofweek(数据库)创建时间戳？
我需要在现有项目上实现一些事件的显示。我无法更改数据库结构。在我的 Controller 中，我(从 ajax 请求)传递了一个时间戳，并且我需要显示之前的 8 个事件。因此，如果时间戳是(转换后)
performance - : {REST API, 网站} --> {数据库} 或 {网站} --> {REST API} --> {数据库} 哪个更好？
我有一个可以收集和显示各种测量值的产品(不会详细介绍)。正如人们所期望的那样，显示部分是一个数据库+建立在其之上的网站(使用 Symfony)。但是，我们可能还会创建一个 API 来向第三方公开数据
sql-server - Azure SQL 数据库 - 查询速度明显慢于 Azure VM 上的 SQL 数据库
我们将 SQL Server 从 Azure VM 迁移到 Azure SQL 数据库。 Azure VM 为 DS2_V2、2 核、7GB RAM、最大 6400 IOPS Azure SQL 数据
java - MongoDB 如何在 Java 本地测试 MongoDB 数据库，比如 H2 和 sql 数据库？
我正在开发一个使用 MongoDB 数据库的程序，但我想问在通过 Java 执行 SQL 时是否可以使用内部数据库进行测试，例如 H2？最佳答案你可以尝试使用Testcontainers Test
sql - 如何从 unix 终端连接到 Microsoft SQL Server 数据库？我必须连接 SQL Server 2008 数据库
已关闭。此问题不符合Stack Overflow guidelines 。目前不接受答案。已关闭 9 年前。此问题似乎与 a specific programming problem, a sof
python - 尝试使用 MSI 身份验证从 Azure ML 服务连接 Azure SQL 数据库(无需用户名和密码即可连接 Azure 数据库)
我正在尝试使用 MSI 身份验证(无需用户名和密码)从 Azure 机器学习服务连接 Azure SQL 数据库。我正在尝试在 Azure 机器学习服务上建立机器学习模型，目的是我需要数据，这就是我
数据库；空场似乎不空
我在我的 MySQL 数据库中使用这个查询来查找 my_column 不为空的所有行: SELECT * FROM my_table WHERE my_column != ""; 不幸的是，许多行在
数据库 |选择不同的记录
我有那个基地:http://sqlfiddle.com/#!2/e5a24/2这是 WordPress 默认模式的简写。我已经删除了该示例不需要的字段。如您所见，我的结果是“类别 1”的两倍。我喜欢
数据库。提取过滤列的数据
我有一张这样的 table : mysql> select * from users; +--------+----------+------------+-----------+ | userid
数据库 |高级分面搜索
我有表: CREATE TABLE IF NOT EXISTS `category` ( `id` int(11) NOT NULL, `name` varchar(255) NOT NULL

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

javascript - 将谷歌地图自动填充地址API插入mysql数据库