我如何使用AUTOCOMPLETE谷歌地图v3坐标插入到mysql(lat,lng)

时间:2013-11-18 21:43:49

标签: mysql google-maps google-maps-api-3 map autocomplete

此代码不起作用。

    <html>
    <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
    <title>Google Maps JavaScript API v3 Example: Map Simple</title>
    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false&libraries=places"></script>
    <script type="text/javascript">

      var placeSearch,autocomplete;
      var component_form = {
        'street_number': 'short_name',
        'route': 'long_name',
        'locality': 'long_name',
        'country': 'long_name',
        'postal_code': 'short_name',
        //'location':'lat',
        //'location':'lng'
      };

      function initialize() {
        autocomplete = new google.maps.places.Autocomplete(document.getElementById('autocomplete'), { types: [ 'geocode' ] });
        google.maps.event.addListener(autocomplete, 'place_changed', function() {
          fillInAddress();
        });
      }

      function fillInAddress() {
        var place = autocomplete.getPlace();
        //var lat = place.geometry.location.lat();
        //var lng = place.geometry.location.lng();
        for (var component in component_form) {
          document.getElementById(component).value = "";
          document.getElementById(component).disabled = false;

        }

        for (var j = 0; j < place.address_components.length; j++) {
          var att = place.address_components[j].types[0];
          if (component_form[att]) {
            var val = place.address_components[j][component_form[att]];
            document.getElementById(att).value = val;
          }
        }
      }

      function geolocate() {
          var place = autocomplete.getPlace();
        //var lat = place.geometry.location.lat();
        //var lng = place.geometry.location.lng();

        if (navigator.geolocation) {
          navigator.geolocation.getCurrentPosition(function(position) {
            var geolocation = new google.maps.LatLng(position.coords.latitude,position.coords.longitude);
            autocomplete.setBounds(new google.maps.LatLngBounds(geolocation, geolocation));
          });
        }
      }

    </script>
    <style>
    body {
      font-family: sans-serif;
      margin: 0px;
      padding: 0px;
    }
    #locationField, #controls {
      position: relative;
      width: 480px;
    }
    #autocomplete {
      position: absolute;
      top: 0px;
      left: 0px;
      width: 100%;
    }
    .label {
      text-align: right;
      font-weight: bold;
      width: 100px;
      color: #303030;
    }
    #address {
      border: 1px solid #000090;
      background-color: #f0f0ff;
      width: 480px;
    }
    #address td {
      font-size: 10pt;
    }
    .field {
      width: 100%;
    }
    .slimField {
      width: 80px;
    }
    .wideField {
      width: 200px;
    }
    #locationField {
      height: 20px;
      margin-bottom: 2px;
    }
    </style>
    </head>
    <body onload="initialize()">
      <div id="locationField">
        <input id="autocomplete" placeholder="Adresinizi Giriniz" onFocus="geolocate()" type="text"></input>
      </div>
      <table id="address">
        <tr>
          <td class="label">Sokak Adresi</td>
          <td class="slimField"><input class="field" id="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"></td>
          <td class="wideField" colspan="3"><input class="field" id="locality" disabled="true"></input></td>
        </tr>
        <tr>
          <td class="label">Posta Kodu</td>
          <td class="wideField"><input class="field" id="postal_code" disabled="true"></input></td>
        </tr>
        <tr>
          <td class="label">Ülke</td>
          <td class="wideField" colspan="3"><input class="field" id="country" disabled="true"></input></td>
        </tr>
            <tr>
          <td class="label">Lat</td>
          <td class="wideField" colspan="3"><input class="field" id="location" disabled="true"></input></td>
        </tr>
                <tr>
          <td class="label">Lng</td>
          <td class="wideField" colspan="3"><input class="field" id="location" disabled="true"></input></td>
        </tr>

      </table>
    </body>
    </html>

/ * 示例Reg:mysql_query(“插入到gmap值(Null,$ _ POST [lat],$ _ POST [lng])”); ...等等 * /

原始链接: Gmaps v3 autocomplete form (Not showing lat lng)

请帮助......

0 个答案:

没有答案