使用带有自定义数据的 Google 地图地点库

Question

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

我还希望用户能够在他们周围找到这些商家，比如在半径范围内。我一直在研究 Google 的 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, ...}}
]

从概念上讲，我的应用应如何根据此响应从我的数据库中检索数据？纬度/经度是可靠的查找标准吗？

我想确保我要为我的应用程序提供一个合理的解决方案 - 有没有人做过类似的任务？

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

Answer 1

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

1>数据库应包含位置 (lat,lng) 以及业务类型和其他数据

2>在搜索页面中必须输入感兴趣的地方（以纬度，经度），其中必须使用业务类型和其他过滤器搜索业务

3> 取感兴趣区域(lat,lng) 获取radius 内的所有业务进行查询。

4> 查询结果用于填充查询业务的感兴趣半径

Fiddle link 用于演示默认所有具有半径的位置的静态数据。

all_locations 应该来自数据库

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