使用带有自定义数据的Google Maps Places Library

Question

这里是半简单问题;我正在构建一个简单的移动Web应用程序，并希望能够将不同的业务与定制信息（评论，评级等）一起存储在数据库中。

我也希望用户能够在他们周围找到这些业务，比方说在一个半径内。我一直在寻找谷歌的Places图书馆，这似乎很好 - 尤其是雷达搜索。

我的问题是;结合这些概念是否可行？例如，如果我通过Places的API从我身边获取10个不同的业务，我是否可以同时获取我存储的有关每个业务的数据？ （这些位置不一定会在Google地图上注册，我也不想使用任何地图数据）。

让我们来看看一个可能的场景：假设我得到3处从雷达搜索

[ 
    {location1: {lat: 38.434, long: 34.439, ...}}, // I'm assuming a response would be 
    {location2: {lat: 38.549, long: 34.998, ...}}, // something like this 
    {location3: {lat: 38.684, long: 34.834, ...}} 
] 

概念返回，在此基础上的反应应该怎么我的应用程序检索我的数据库中的数据？ lat/long是可靠的​​查找标准吗？

我想确保我要做的是我的应用程序的合理解决方案 - 有没有人对此做过类似的任务？

感谢您的任何帮助/反馈/批评！

Answer 1

是的，可以在感兴趣的地方放置商业标记。

1>数据应该包含的位置（纬度，经度）与业务类型和其他数据

2>在搜索页面必须有对景点输入一起（以纬度，经度），其中业务必须通过业务类型和其他过滤器进行搜索

3>以关注区域（lat，lng）获取radius内的所有业务进行查询。

4>查询的结果用于感兴趣

Fiddle link半径与填充查询业务与默认与半径所有地方的静态数据演示。

all_locations应该来自databsae

JS代码

var map = null; 
var radius_circle; 
var markers_on_map = []; 
var geocoder; 
var infowindow; 

//all_locations is just a sample, you will probably load those from database 
var all_locations = [{ 
    type: "Restaurant", 
    name: "Restaurant 1", 
    lat: 40.723080, 
    lng: -73.984340 
}, { 
    type: "School", 
    name: "School 1", 
    lat: 40.724705, 
    lng: -73.986611 
}, { 
    type: "School", 
    name: "School 2", 
    lat: 40.724165, 
    lng: -73.983883 
}, { 
    type: "Restaurant", 
    name: "Restaurant 2", 
    lat: 40.721819, 
    lng: -73.991358 
}, { 
    type: "School", 
    name: "School 3", 
    lat: 40.732056, 
    lng: -73.998683 
}]; 

//initialize map on document ready 
$(document).ready(function() { 
    var latlng = new google.maps.LatLng(40.723080, -73.984340); //you can use any location as center on map startup 
    var myOptions = { 
    zoom: 1, 
    center: latlng, 
    mapTypeControl: true, 
    mapTypeControlOptions: { 
     style: google.maps.MapTypeControlStyle.DROPDOWN_MENU 
    }, 
    navigationControl: true, 
    mapTypeId: google.maps.MapTypeId.ROADMAP 
    }; 
    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); 
    geocoder = new google.maps.Geocoder(); 
    google.maps.event.addListener(map, 'click', function() { 
    if (infowindow) { 
     infowindow.setMap(null); 
     infowindow = null; 
    } 
    }); 
}); 

function showCloseLocations() { 
    var i; 
    var radius_km = $('#radius_km').val(); 
    var address = $('#address').val(); 

    //remove all radii and markers from map before displaying new ones 
    if (radius_circle) { 
    radius_circle.setMap(null); 
    radius_circle = null; 
    } 
    for (i = 0; i < markers_on_map.length; i++) { 
    if (markers_on_map[i]) { 
     markers_on_map[i].setMap(null); 
     markers_on_map[i] = null; 
    } 
    } 

    if (geocoder) { 
    geocoder.geocode({ 
     'address': address 
    }, function(results, status) { 
     if (status == google.maps.GeocoderStatus.OK) { 
     if (status != google.maps.GeocoderStatus.ZERO_RESULTS) { 
      var address_lat_lng = results[0].geometry.location; 
      radius_circle = new google.maps.Circle({ 
      center: address_lat_lng, 
      radius: radius_km * 1000, 
      clickable: false, 
      map: map 
      }); 
      if (radius_circle) map.fitBounds(radius_circle.getBounds()); 
      for (var j = 0; j < all_locations.length; j++) { 
      (function(location) { 
       var marker_lat_lng = new google.maps.LatLng(location.lat, location.lng); 
       var distance_from_location = google.maps.geometry.spherical.computeDistanceBetween(address_lat_lng, marker_lat_lng); //distance in meters between your location and the marker 
       if (distance_from_location <= radius_km * 1000) { 
       var new_marker = new google.maps.Marker({ 
        position: marker_lat_lng, 
        map: map, 
        title: location.name 
       }); 
       google.maps.event.addListener(new_marker, 'click', function() { 
        if (infowindow) { 
        infowindow.setMap(null); 
        infowindow = null; 
        } 
        infowindow = new google.maps.InfoWindow({ 
        content: '<div style="color:red">' + location.name + '</div>' + " is " + distance_from_location + " meters from my location", 
        size: new google.maps.Size(150, 50), 
        pixelOffset: new google.maps.Size(0, -30), 
        position: marker_lat_lng, 
        map: map 
        }); 
       }); 
       markers_on_map.push(new_marker); 
       } 
      })(all_locations[j]); 
      } 
     } else { 
      alert("No results found while geocoding!"); 
     } 
     } else { 
     alert("Geocode was not successful: " + status); 
     } 
    }); 
    } 
} 

的Html

<body style="margin:0px; padding:0px;"> 
    <input id="address" value="Second Steet, New York" placeholder="Input Address" /> 
    <select id="radius_km"> 
    <option value=1>1km</option> 
    <option value=2>2km</option> 
    <option value=5>5km</option> 
    <option value=30>30km</option> 
    </select> 
    <button onClick="showCloseLocations()">Show Locations In Radius</button> 
    <div id="map_canvas" style="width:500px; height:300px;"> 
</body> 

希望这给足够的思想

对不起，我英文不好

免责声明 里面捣鼓代码为Answer