1

如何将 Google Places API 返回的数据存储到我的数据库中？

这是 HTML 代码

<!DOCTYPE HTML>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Creating a Custom jQuery Plugin</title>
    <link type="text/css" rel="stylesheet" href="jquery.accordion.css" />
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script type="text/javascript" src="jquery.accordion.js"></script>
    <script type="text/javascript">
    $(document).ready(function() {
        $('dl#my-accordion').accordion({open:true});
    });
    </script>

    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?libraries=places&sensor=false"></script>
    <script src="js/script.js"></script>
</head>

<body>
    <div id="container"></div>
    <div id="gmap_canvas"></div>
    <div class="actions">
        <div class="button">
            <label for="gmap_where">Where:</label>
            <input id="gmap_where" type="text" name="gmap_where" /></div>
        <div id="button2" class="button" onclick="findAddress(); return false;">Search for address</div>
        <form action="save.php" method="post">
            <div class="button">
                <label for="gmap_keyword">Keyword (optional):</label>
                <input id="gmap_keyword" type="text" name="gmap_keyword" /></div>
            <div class="button">
                <label for="gmap_type">Type:</label>
                <select id="gmap_type">
                    <option value="art_gallery">art_gallery</option>
                    <option value="atm">atm</option>
                    <option value="bank">bank</option>
                    <option value="bar">bar</option>
                    <option value="cafe">cafe</option>
                    <option value="food">food</option>
                    <option value="hospital">hospital</option>
                    <option value="police">police</option>
                    <option value="store">store</option>
                </select>
            </div>
            <div class="button">
                <label for="gmap_radius">Radius:</label>
                <select id="gmap_radius">
                    <option value="500">500</option>
                    <option value="1000">1000</option>
                    <option value="1500">1500</option>
                    <option value="5000">5000</option>
                </select>
            </div>
            <input type="hidden" id="lat" name="lat" value="40.7143528" />
            <input type="hidden" id="lng" name="lng" value="-74.0059731" />
            <div onclick="findplaces(); return false;"><input type="submit" value="Search for objects"class="button" id="button1" /></div>
        </form>
    </div>

</body>
</html>

这是脚本

var geocoder;
var map;
var markers = Array();
var infos = Array();

function initialize() {
    // prepare Geocoder
    geocoder = new google.maps.Geocoder();

    // set initial position (New York)
    var myLatlng = new google.maps.LatLng(40.7143528,-74.0059731);

    var myOptions = { // default map options
        zoom: 14,
        center: myLatlng,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    map = new google.maps.Map(document.getElementById('gmap_canvas'), myOptions);
}

// clear overlays function
function clearOverlays() {
    if (markers) {
        for (i in markers) {
            markers[i].setMap(null);
        }
        markers = [];
        infos = [];
    }
}

// clear infos function
function clearInfos() {
    if (infos) {
        for (i in infos) {
            if (infos[i].getMap()) {
                infos[i].close();
            }
        }
    }
}

// find address function
function findAddress() {
    var address = document.getElementById("gmap_where").value;

    // script uses our 'geocoder' in order to find location by address name
    geocoder.geocode( { 'address': address}, function(results, status) {
        if (status == google.maps.GeocoderStatus.OK) { // and, if everything is ok

            // we will center map
            var addrLocation = results[0].geometry.location;
            map.setCenter(addrLocation);

            // store current coordinates into hidden variables
            document.getElementById('lat').value = results[0].geometry.location.lat();
            document.getElementById('lng').value = results[0].geometry.location.lng();

            // and then - add new custom marker
            var addrMarker = new google.maps.Marker({
                position: addrLocation,
                map: map,
                title: results[0].formatted_address,
                icon: 'marker.png'
            });
        } else {
            alert('Geocode was not successful for the following reason: ' + status);
        }
    });
}

// find custom places function
function findPlaces() {

    // prepare variables (filter)
    var type = document.getElementById('gmap_type').value;
    var radius = document.getElementById('gmap_radius').value;
    var keyword = document.getElementById('gmap_keyword').value;

    var lat = document.getElementById('lat').value;
    var lng = document.getElementById('lng').value;
    var cur_location = new google.maps.LatLng(lat, lng);

    // prepare request to Places
    var request = {
        location: cur_location,
        radius: radius,
        types: [type]
    };
    if (keyword) {
        request.keyword = [keyword];
    }

    // send request
    service = new google.maps.places.PlacesService(map);
    service.search(request, createMarkers);
}

// create markers (from 'findPlaces' function)
function createMarkers(results, status) {
    if (status == google.maps.places.PlacesServiceStatus.OK) {

        // if we have found something - clear map (overlays)
        clearOverlays();

        // and create new markers by search result
        for (var i = 0; i < results.length; i++) {
            createMarker(results[i]);
        }
    } else if (status == google.maps.places.PlacesServiceStatus.ZERO_RESULTS) {
        alert('Sorry, nothing is found');
    }
}

// creare single marker function
function createMarker(obj) {

    // prepare new Marker object
    var mark = new google.maps.Marker({
        position: obj.geometry.location,
        map: map,
        title: obj.name
    });
    markers.push(mark);

    // prepare info window
    var infowindow = new google.maps.InfoWindow({
        content: '<img src="' + obj.icon + '" /><font style="color:#000;">' + obj.name +
        '<br />Rating: ' + obj.rating + '<br />Vicinity: ' + obj.vicinity + '</font>'
    });

    // add event handler to current marker
    google.maps.event.addListener(mark, 'click', function() {
        clearInfos();
        infowindow.open(map,mark);
    });
    infos.push(infowindow);
}

// initialization
google.maps.event.addDomListener(window, 'load', initialize);

我只需要了解如何将 Google Places API 返回的数据转储到数据库中。谢谢！

4

2 回答 2

0

虽然可以通过 Javascript 与数据库交互，但不建议这样做。

正如 Quentin 评论的“低安全环境不是网络编程”

所以最好的方法是使用Web 服务（通过 API）

  • 看来您需要将 lat/lon 存储到数据库中（如果需要，请解析 Google API 返回的 lat/lon）。

  • 然后从中创建 JSON 对象。

  • 接下来了解Ajax，它将异步（在后台）向服务器发送数据和从服务器检索数据，而不会干扰现有页面的显示和行为。

希望你能理解。

于 2013-08-02T05:57:17.917 回答
0

您应该将您从 google map API 获得的结果发布到您自己的服务器，也许使用您自己的 API，并将其存储在您的服务器上。

于 2013-08-02T02:53:24.690 回答