在Google地图上动态显示标记-Rails 3.2
我有一个工作代码，使用geocoder器在谷歌地图上显示多个标记，例如@nearbys = Place.near("#{params[:address]}", 5,:order => "distance",:units => :km) @nearbys.first(5)并使用以下代码显示标记
function initialize() { var map; var bounds = new google.maps.LatLngBounds(); var mapOptions = { mapTypeId: 'roadmap' }; // Display a map on the page map = new google.maps.Map(document.getElementById("map-canvas-guest"), mapOptions); map.setTilt(45); // adding Multiple Markers from ruby object var markers = [ ['', '',''], ['', '',''], ['', '',''], ['', '',''] , ['', '',''] ]; // adding Info Window Content var infoWindowContent = [ ['' + '' +''+ '' + ''], ['' + '' + '' + ''], ['' + '' +''+ '' + ''], ['' + '' +''+ '/p>' + '
'], ['' + '' +''+ '' + ''] ]; // Display multiple markers on a map var infoWindow = new google.maps.InfoWindow(), marker, i; // Loop through our array of markers & place each one on the map for( i = 0; i < markers.length; i++ ) { var position = new google.maps.LatLng(markers[i][1], markers[i][2]); bounds.extend(position); marker = new google.maps.Marker({ position: position, map: map, title: markers[i][0] }); // Allow each marker to have an info window google.maps.event.addListener(marker, 'click', (function(marker, i) { return function() { infoWindow.setContent(infoWindowContent[i][0]); infoWindow.open(map, marker); } })(marker, i)); // Automatically center the map fitting all markers on the screen map.fitBounds(bounds); } // Override our map zoom level once our fitBounds function runs (Make sure it only runs once) var boundsListener = google.maps.event.addListener((map), 'bounds_changed', function(event) { this.setZoom(14); google.maps.event.removeListener(boundsListener); }); }//initialize ends
但问题是： – 如果@nearbys少于5个计数，那么这个代码就失败了。我一直试图使用jquery数组使其动态，但它不起作用，因为我认为我的代码缺少动态工作的东西。 它应该是这样的..
var array=; var markers=[]; var infowindows=[]; array.each(function(index){ markers.push('', '',''); infowindows.push(''+'' +''+ ''+''); })
..SO我怎么能实现这个……..使这个动态，以便上面的工作代码不会破坏新添加的代码。
在与jquery arrays和json斗争之后，我能够找到这个最佳解决方案…这在所有场景中都有效，我需要的是处理空和空条件，我已经做了它并且按照我需要的方式工作。希望这有助于某人
我的控制器
def show_nearby_locations @nearbys = Place.near("#{params[:address]}", 5,:order => "distance",:units => :km) @nearbys.first(10) end
在我的视图文件中
<%= javascript_tag do%> window.nearbys= <%=raw @nearbys.to_json %>; <%end%>
这是我的脚本里面的视图
function initialize() { var map; var bounds = new google.maps.LatLngBounds(); var mapOptions = { mapTypeId: 'roadmap' }; // Display a map on the page map = new google.maps.Map(document.getElementById("map-canvas-guest"), mapOptions); map.setTilt(45); var markers=[]; var infoWindowContent=[]; $.each(nearbys, function(index) { console.log( data[0][index].latitude,data[0][index].longitude ); markers.push([nearbys[index]['title'], nearbys[index]['latitude'],nearbys[index]['longitude']]); infoWindowContent.push(['' + ''+nearbys[index]['title']+'
' +''+ ''+nearbys[index]['about']+'
' + '']); }); // Display multiple markers on a map var infoWindow = new google.maps.InfoWindow(), marker, i; // Loop through our array of markers & place each one on the map for( i = 0; i < markers.length; i++ ) { var position = new google.maps.LatLng(markers[i][1], markers[i][2]); bounds.extend(position); marker = new google.maps.Marker({ position: position, map: map, title: markers[i][0] }); // Allow each marker to have an info window google.maps.event.addListener(marker, 'click', (function(marker, i) { return function() { infoWindow.setContent(infoWindowContent[i][0]); infoWindow.open(map, marker); } })(marker, i)); // Automatically center the map fitting all markers on the screen map.fitBounds(bounds); } // Override our map zoom level once our fitBounds function runs (Make sure it only runs once) var boundsListener = google.maps.event.addListener((map), 'bounds_changed', function(event) { this.setZoom(14); google.maps.event.removeListener(boundsListener); }); }//initialize ends
你好朋友通过谷歌地图使用Rails我已经搜索了谷歌地图网站和Gmaps4rails的信息我已经做了多个标记和信息窗口她是代码
我的控制器
@users = User.all @hash = Gmaps4rails.build_markers(@users) do |user, marker| marker.lat user.latitude marker.lng user.longitude marker.infowindow user.title` end
在我看来
window.onload = function () { var markers = <%=raw @hash.to_json %>; var mapOptions = { center: new google.maps.LatLng(markers[0].lat, markers[0].lng), zoom: 15, mapTypeId: google.maps.MapTypeId.ROADMAP }; var infoWindow = new google.maps.InfoWindow(); var map = new google.maps.Map(document.getElementById("map"), mapOptions); for (i = 0; i < markers.length; i++) { var data = markers[i] var myLatlng = new google.maps.LatLng(data.lat, data.lng); marker = new google.maps.Marker({ position: myLatlng, map: map, title: data.title }); (function (marker, data) { google.maps.event.addListener(marker, "click", function (e) { infoWindow.setContent(data.description); infoWindow.open(map, marker); }); })(marker, data); } }