移动地图时搜索答案

【问题标题】：Search When I Move the Map移动地图时搜索
【发布时间】：2015-02-13 06:36:44
【问题描述】：

我在许多城市都有组织，我的数据库中有完整的地址。我使用geocoding 在地图上放置标记，并在页面中显示组织列表。然后我尝试使用geolocation 定位用户。

我的问题是如何仅在用户位置附近显示组织并在用户移动地图时自动更新组织列表（当我说移动地图时，我的意思是像 airbnb 一样移动）。

【问题讨论】：

使用FusionTable 层。它会做你想做的一切。

标签： javascript html google-maps-api-3

【解决方案1】：

在Earth3DMap.com 工作期间，我回答了你的问题。

Live demo is here.

不要忘记加载 Places API。检查演示的 HTML 代码。

这里是javascript代码：

var map;
var infowindow;
var service;
var request;
var currentLocation;
var newLat;
var newLng;
var newCurrLocation;
var latlngArray;
var marker;
var markers;
function initialize() {
  map = new google.maps.Map(document.getElementById('map-canvas'), {
    center: new google.maps.LatLng(48.1293954,11.556663), // Munich Germany
    zoom: 15
  });
  getMoveData()
    google.maps.event.addListener(map,'dragend',getMoveData) // All events are here https://google-developers.appspot.com/maps/documentation/javascript/examples/full/map-events
}

function getMoveData() {
    clearMarkers()
    currentLocation = map.getCenter()
    newCurrLocation = currentLocation.toString();
    newCurrLocation = newCurrLocation.replace('(', '');
    newCurrLocation = newCurrLocation.replace(')', '');

    latlngArray = new Array();
    latlngArray = newCurrLocation.split(",")
    for (a in latlngArray) {
            latlngArray[a] = parseFloat(latlngArray[a]);
    }
    newLat = latlngArray[0]
    newLng = latlngArray[1]
    map.setCenter({
        lat : newLat,
        lng : newLng
    });
    showPlaces()
}

function showPlaces(){
   request = {
    location: currentLocation,
    radius: 500,
    types: ['store'] // All types are here: https://developers.google.com/places/documentation/supported_types
  };
  infowindow = new google.maps.InfoWindow();
  service = new google.maps.places.PlacesService(map);
  service.nearbySearch(request, callback);
}
function callback(results, status) {
  if (status == google.maps.places.PlacesServiceStatus.OK) {
    for (var i = 0; i < results.length; i++) {
      createMarker(results[i]);
    }
  }
}
markers = [];
function createMarker(place) {
  var placeLoc = place.geometry.location;
  marker = new google.maps.Marker({
    map: map,
    position: place.geometry.location
  });
  markers.push(marker);

  google.maps.event.addListener(marker, 'click', function() {
    infowindow.setContent(place.name);
    infowindow.open(map, this);
  });
}

function clearMarkers() {
  for (var i = 0; i < markers.length; i++) {
    markers[i].setMap(null);
  }
  markers = [];

}

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

【讨论】：

【解决方案2】：

我试图给出一个简单的方法来解决这个问题。

有一个函数getBounds()（在places库下）。使用此功能，您始终可以获得活动窗口的 (lat,lon) 范围。

下面给出一个例子-

var map;
function initialize()
{
var mapOpt = {
  center:new google.maps.LatLng(51.508742,-0.120850),
  zoom:6,
  mapTypeId:google.maps.MapTypeId.ROADMAP
  };
map=new google.maps.Map(document.getElementById("googleMap"),mapOpt);
}

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

<script src="http://maps.googleapis.com/maps/api/js"></script>

<button onclick="alert(map.getBounds());">Get bounds</button>
<br><br>
<div id="googleMap"style="width:400px;height:300px;"></div>

更新-

要在地图缩放和拖拽后添加事件，请查看-

认为这会帮助你更多:)

【讨论】：