使用Google地图将库包含在自定义数据中

时间:2017-02-27 05:30:22

标签: javascript google-maps

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

我还希望用户能够在半径范围内找到这些商家。我一直在研究Google的Places图书馆,这似乎做得很好 - 尤其是雷达搜索。

我的问题是;将这些概念结合起来是否可行?例如,如果我通过[ {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, ...}} ] '在我周围获取10个不同的商家。 API,我可以同时获取我存储的有关每个业务的数据吗? (这些地点不一定会在Google地图上注册,也不想使用任何Map的数据)。

让我们看看一个可能的场景:假设我从雷达搜索中返回3个位置

if (SipManager.IsApiSupported(Application.Context) &&
    SipManager.IsVoipSupported(Application.Context))
{
    logstuff("Registring with sip server");
    sipmanager = SipManager.NewInstance(Application.Context);

    SipProfile.Builder builder = new SipProfile.Builder("0123456", "sip00.mynetfone.com.au");
    builder.SetPassword("*******"); // sorry, not sharing :)


    Intent intent = new Intent();
    intent.SetAction("android.SipDemo.INCOMING_CALL");
    PendingIntent pendingIntent = PendingIntent.GetBroadcast(this, 0, intent, (Android.App.PendingIntentFlags)Android.Content.FillInFlags.Data);

    this.sipProfileLocal = builder.Build();
    regListnener = new MyRegistrationListener();
    sipmanager.Open(this.sipProfileLocal);
    sipmanager.Register(this.sipProfileLocal, 100, regListnener);
    sipmanager.SetRegistrationListener(this.sipProfileLocal.UriString, regListnener);

}
else
{
     logstuff("This device does not support VoIP !! )");
}

从概念上讲,我的应用程序应该如何根据此响应从我的数据库中检索数据? lat / long是一个可靠的查找标准吗?

我想确保我所申请的内容对我的应用程序来说是一个合理的解决方案 - 是否有人对此做过类似的任务?

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

1 个答案:

答案 0 :(得分:1)

是的,可以在感兴趣的地方使用商家标记。

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

2>在搜索页面中,必须输入感兴趣的地方(采用lat,lng),其中必须使用业务类型和其他过滤器搜索业务

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