首先，我在正确显示 map 方面没有遇到问题，并且标记位于 map 上需要的位置。我的问题是，当我为一个州显示多个 map 时，如果您单击标记以在任何 map 上显示 infowindow ，则会弹出最底部 map 的 contentString 。
以下是在页面上显示 map 的代码:
<% @showrooms_nearby.each do |showroom| %>
<% address_url = "" %>
<div class="row showroom-results">
<div class="col-md-8">
<div id="<%= showroom.id %>" style="height:400px; width:100%; clear:both;"></div>
</div>
<div class="col-md-4">
<div class="card">
<div class="card-block">
<h4 class="card-title"><%= showroom.name %></h4>
<div class="showroom-info showroom-address">
<% if showroom.design_center %>
<% address_url = address_url + " #{showroom.design_center}" %>
<%= showroom.design_center %> <br>
<% end %>
<% if showroom.address1 %>
<% address_url = address_url + " #{showroom.address1}" %>
<%= showroom.address1 %> <br>
<% end %>
<% if showroom.address2 %>
<% address_url = address_url + " #{showroom.address2}" %>
<%= showroom.address2 %> <br>
<% end %>
<% if showroom.address3 %>
<% address_url = address_url + " #{showroom.address3}" %>
<%= showroom.address3 %> <br>
<% end %>
<% if showroom.city %>
<% address_url = address_url + " #{showroom.city}" %>
<%= showroom.city %>,
<% end %>
<% if showroom.state %>
<% address_url = address_url + " #{showroom.state}" %>
<%= showroom.state %>
<% end %>
<% if showroom.zip %>
<% address_url = address_url + " #{showroom.zip}" %>
<%= showroom.zip %> <br>
<% end %>
<% if showroom.country != 'US' %>
<% address_url = address_url + " #{showroom.country}" %>
<% showroom.country %> <br>
<% end %>
</div>
<div class="showroom-info showroom-contact">
<% if showroom.phone %>
Phone: <%= showroom.phone %> <br>
<% end %>
<% if showroom.fax %>
Fax: <%= showroom.fax %> <br>
<% end %>
<% if showroom.email %>
<%= mail_to showroom.email %> <br>
<% end %>
<% if showroom.website %>
<%= link_to showroom.website %> <br>
<% end %>
</div>
<div class="showroom-info showroom-brands">
<% if showroom.brands %>
Brands:<br>
<% brand_sort(showroom.brands).each_with_index do |brand, index| %>
<% if index == showroom.brands.size - 1 %>
<%= brand_pretty(brand) %>
<% else %>
<%= brand_pretty(brand) %>,
<% end %>
<% end %>
<% end %>
</div>
<div class="showroom-info showroom-links">
<a href="https://maps.google.com?daddr=<%= address_url.parameterize.gsub('-', '+') %>" target="_blank">Get Directions</a>
</div>
<script>$(window).load(function() {initMap('<%= showroom.id %>', <%= showroom.latitude %>, <%= showroom.longitude %>);});</script>
</div>
</div>
</div>
</div>
<hr class="showroom-divider">
<% end %>
这是maps.js.erb:
var map;
function initMap(id, lat, lng) {
myLatLng = {lat: lat, lng: lng};
contentString = "Brand Showroom";
map = new google.maps.Map(document.getElementById(id), {
center: myLatLng,
zoom: 15
});
infowindow = new google.maps.InfoWindow({
content: contentString
});
marker = new google.maps.Marker({
position: myLatLng,
map: map
});
marker.addListener('click', function() {
infowindow.open(map, marker);
});
}
showroom.js:
function displayShowrooms(country, state, stateName) {
var jShowroomHeader = $("span.showroom-location");
var jShowroomWrapper = $("div.showroom-wrapper");
if (jShowroomWrapper.length) {
if (country == 'US') {
var strURI_Showrooms = ("/showrooms/" + country + "/" + state);
} else {
var strURI_Showrooms = ("/showrooms/" + country);
}
$.ajax(strURI_Showrooms, {
method : "GET",
async : true ,
cache : false,
timeout: 5000 ,
headers: { "X-CSRF-Token": $("meta[name=csrf-token]").prop("content") }
}) // [ajax, get list of showrooms matching our selection]
.done(function (objData) {
jShowroomHeader.empty().append("Showrooms in " + stateName);
jShowroomWrapper.empty();
if (objData.length) {
$.each(objData, function(index, showroom) {
jShowroomWrapper.append(" \
<div class='row' id='showroom-result-" + showroom.id + "'> \
<div class='col-md-8'> \
<div id='"+ showroom.id +"' style='height:400px; width:100%; clear:both;'></div> \
</div> \
<div class='col-md-4'> \
<div class='card'> \
<div class='card-block'> \
<h4 class='card-title'>" + showroom.name +"</h4> \
<a class='showroomAddressLink' target='_blank'> \
<div class='showroom-info showroom-address'> \
</div> \
</a> \
<div class='showroom-info showroom-contact'> \
</div> \
<div class='showroom-info showroom-brands'> \
Brands:<br> \
</div> \
<div class='showroom-info showroom-links'> \
</div> \
</div> \
</div> \
</div> \
</div> \
<hr class='showroom-divider'> \
");
var jShowroomResult = jShowroomWrapper.find('#showroom-result-'+showroom.id);
var address_url = showroom.name;
if (showroom.design_center != null) {
jShowroomResult.find('.showroom-address').append(showroom.design_center + "<br>");
address_url += " " + showroom.design_center;
}
if (showroom.address1 != null) {
jShowroomResult.find('.showroom-address').append(showroom.address1 + "<br>");
address_url += " " + showroom.address1;
}
if (showroom.address2 != null) {
jShowroomResult.find('.showroom-address').append(showroom.address2 + "<br>");
address_url += " " + showroom.address2;
}
if (showroom.address3 != null) {
jShowroomResult.find('.showroom-address').append(showroom.address3 + "<br>");
address_url += " " + showroom.address3;
}
if (showroom.city != null) {
jShowroomResult.find('.showroom-address').append(showroom.city + ", ");
address_url += " " + showroom.city;
}
if (showroom.state != null) {
jShowroomResult.find('.showroom-address').append(showroom.state + " ");
address_url += " " + showroom.state;
}
if (showroom.zip != null) {
jShowroomResult.find('.showroom-address').append(showroom.zip + "<br>");
address_url += " " + showroom.zip;
}
if (showroom.country != null && showroom.country != 'US') {
jShowroomResult.find('.showroom-address').append(showroom.country + "<br>");
address_url += " " + showroom.country;
}
if (showroom.phone != null) {
jShowroomResult.find('.showroom-contact').append("Phone: " + "<a href='tel:'" + showroom.phone + ">" + showroom.phone + "</a>" + "<br>");
}
if (showroom.fax != null) {
jShowroomResult.find('.showroom-contact').append("Fax: " + showroom.fax + "<br>");
}
if (showroom.email != null) {
jShowroomResult.find('.showroom-contact').append("<a href='mailto:" + showroom.email + "'>" + showroom.email + "<br>");
}
if (showroom.website != null) {
jShowroomResult.find('.showroom-contact').append("<a href='" + showroom.website + "' target='_blank'>" + showroom.website + "<br>");
}
if (showroom.brands != null) {
$.each(showroom.brands, function (i, brand) {
if (i == (showroom.brands.length - 1)) {
jShowroomResult.find('.showroom-brands').append(brand);
} else {
jShowroomResult.find('.showroom-brands').append(brand + ", ")
}
});
}
jShowroomResult.find('.showroomAddressLink').attr("href", "https://maps.google.com/?q="+address_url.toLowerCase().replace(/[^a-z0-9]+/g,'+').replace(/(^-|-$)/g,''))
initMap(showroom.id, showroom.latitude, showroom.longitude);
}); // for [every showroom]
} // if [we have showrooms]
else {
jShowroomWrapper.append("<div class='row showroom-results'><div class='col-md-12 center'>No showrooms are located in " + stateName + ". Please search another location or call (555) 555-5555 for assistance.</div>")
}
})
}
}
showroom_controller.rb:
class ShowroomsController < ApplicationController
def landing
lat = location.latitude
lon = location.longitude
@distance = 50
@user_location = [lat, lon]
@showrooms = Showroom.all.where('? = ANY (brands)', brand(request)).order('id ASC')
@showrooms_nearby = @showrooms.near(@user_location, @distance)
end
def search
@showrooms = if params[:state]
Showroom.where(country: params[:country].upcase, state: params[:state].upcase)
else
Showroom.where(country: params[:country].upcase)
end
@showrooms.each do |showroom|
showroom.brands = brand_sort(showroom.brands)
showroom.brands.collect! { |brand|
(brand == 'brand1') ? 'Brand1' :
(brand == 'brand2') ? 'Brand2' :
(brand == 'brand3') ? 'Brand3' :
(brand == 'brand4') ? 'Brand4' :
(brand == 'brand5') ? 'Brand5' :
(brand == 'brand6') ? 'Brand6' : brand
}
end
render json: @showrooms
end
end
感谢大家的帮助!
最佳答案
事实证明很简单: map 是一个全局变量，因此当单击事件打开信息窗口时将引用最后定义的 map 。如果您将 map 设置为 initMap 函数的本地函数，那么它看起来应该可以工作。
关于javascript - 如果同一页面上有多个 Google map ，单击任何标记都会突出显示最底部的 map 标记，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/37167434/