Javascript 使用谷歌地图将库放置在自定义数据中

这里的半简单问题；我正在构建一个简单的移动web应用程序，希望能够在数据库中存储不同的业务以及自定义信息（评论、评级等）

我还希望用户能够在他们周围找到这些企业，比如说在半径范围内。我一直在研究谷歌的图书馆，这似乎完成得很好——特别是雷达搜索

我的问题是,；将这些概念结合起来是否可行？例如，如果我通过

Places

”API获取周围10个不同的企业，我是否可以同时获取存储的关于每个企业的数据？（这些位置不一定会在谷歌地图上注册，我也不想使用任何地图数据）

让我们看一个可能的场景：假设我从雷达搜索中得到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是可靠的查找标准吗

我想确保我要做的是为我的应用程序提供一个合理的解决方案——有人做过类似的工作吗

---

感谢您的帮助/反馈/批评

是的，可以在感兴趣的地方设置业务标记

1> 数据库应包含位置（lat、lng）以及业务类型和其他数据

2> 在搜索页面中，必须输入感兴趣的地点（采用lat、lng），其中必须使用业务类型和其他过滤器搜索业务

3> 获取感兴趣区域（lat、lng）内的所有业务并进行查询

4> 查询结果用于在感兴趣的范围内填充查询的业务

用于使用静态数据演示默认情况下半径内的所有位置

所有位置都应来自SAE

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);
      }
    });
  }
}

var-map=null；
var半径_圆；
变量标记在映射上的值=[]；
var地理编码器；
var信息窗口；
//所有位置都只是一个示例，您可能会从数据库加载这些位置
变量所有位置=[{
类型：“餐厅”，
名称：“餐厅1”，
纬度：40.723080，
液化天然气：-73.984340
}, {
类型：“学校”，
名称:"学校一"，
拉脱维亚：40.724705，
液化天然气：-73.986611
}, {
类型：“学校”，
名称:"学校二"，
纬度：40.724165，
液化天然气：-73.983883
}, {
类型：“餐厅”，
名称：“餐厅2”，
纬度：40.721819，
液化天然气：-73.991358
}, {
类型：“学校”，
名称:"学校三",，
纬度：40.732056，
液化天然气：-73.998683
}];
//在文档准备就绪时初始化映射
$（文档）.ready（函数（）{
var latlng=new google.maps.latlng（40.723080，-73.984340）；//您可以在地图启动时使用任何位置作为中心
变量myOptions={
缩放：1，
中心：拉特林，
mapTypeControl:true，
mapTypeControlOptions：{
样式：google.maps.MapTypeControlStyle.DROPDOWN_菜单
},
导航控制：对，
mapTypeId:google.maps.mapTypeId.ROADMAP
};
map=new google.maps.map（document.getElementById（“map_canvas”），myOptions）；
geocoder=新的google.maps.geocoder（）；
google.maps.event.addListener（映射，'click'，函数（）{
如果（信息窗口）{
infowindow.setMap（空）；
infowindow=null；
}
});
});
函数showCloseLocations（）{
var i；
var radius_km=$（'#radius_km'）.val（）；
var address=$（'#address'）.val（）；
//在显示新半径和标记之前，请从地图中删除所有半径和标记
if（半径×圆）{
圆半径设置图（空）；
圆的半径=零；
}
对于（i=0；i<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>