基于 Cities on Rails 应用程序列表的 Google 地图更改中心 - 下拉菜单答案

【问题标题】：Google Maps Changing Center based on a list of Cities on Rails App - Drop Down Menu基于 Cities on Rails 应用程序列表的 Google 地图更改中心 - 下拉菜单
【发布时间】：2017-01-24 05:00:34
【问题描述】：

对于新手的问题，我深表歉意。我仍在研究 Google Maps API V3 以及学习 Rails。每次用户从下拉列表中选择不同的城市时，我都会尝试更改 Google 地图的中心。例如，如果用户选择纽约市，则地图以纽约市为中心，如果他们随后选择芝加哥，则地图将变为芝加哥。在标记方面，我能够在星巴克等地点完成这项工作，但似乎无法为城市做到这一点。目前，当我加载页面时，没有地图出现 - 但是，如果我删除 getCityOnSelect: 函数(){ - 然后出现地图 我在下面列出了所有相关代码。非常感谢您的帮助。

_form.html.erb

<div class="field">
<%= f.label :city %><br>
<select name="item[city_id]" id="item_city_id">
    <option></option>
    <% City.all.each do |city| %>
        <option value="<%= city.id %>" data-lat1="<%= city.latitude %>" data-lng1="<%= city.longitude %>"><%= city.name %></option>
    <% end %>
</select>
</div>
<div class="field">
<%= f.label :location %><br>
<select name="item[location_id]" id="item_location_id">
    <option></option>
    <% Location.all.each do |location| %>
        <option value="<%= location.id %>" data-lat="<%= location.latitude %>" data-lng="<%= location.longitude %>"><%= location.name %></option>
    <% end %>
</select>

seeds.rb

City.destroy_all
nyc = City.create!(name:"New York City", latitude: 40.7128, longitude: -74.0059)
sf = City.create!(name:"San Francisco", latitude: 37.7749, longitude: -122.4194)
austin = City.create!(name:"Austin", latitude: 30.2672, longitude: -97.7431)
la = City.create!(name:"Los Angeles", latitude: 34.0522, longitude: -118.2437)
Location.destroy_all
starbuck = nyc.locations.create!(name: "Starbucks", latitude: 40.7435331, longitude: -73.9182956)
thinkcofee = nyc.locations.create!(name: "Think Coffee", latitude: 40.751, longitude: -73.992)

coffeeController.js

CoffeeController = {

initialize: function() {
this.createMap();
this.getLocationOnSelect();
this.getCityOnSelect(); 
},

markers: [],    
createMap: function(){
    getCityOnSelect: function(){
    $("#item_city_id").change(function(e){
        console.log(e);

    $( "select option:selected" ).each(function() {
    lng = parseFloat($( this ).data('lng1'))
    lat = parseFloat($( this ).data('lat1'))        
    });
    })  
},
map = new google.maps.Map(document.getElementById('map'),{
center: getCityOnSelect,
zoom: 11,
mapTypeControl: false
});
},

getLocationOnSelect: function(){
$("#item_location_id").change(function(e){
console.log(e);

    $( "select option:selected" ).each(function() {
    lng = parseFloat($( this ).data('lng'))
    lat = parseFloat($( this ).data('lat'))
    CoffeeController.createmarker(lat, lng)
});
})
},
destroyMarkers: function(){
    for(var i=0; i< this.markers.length; i++){
        this.markers[i].setMap(null)
    }   
},
createmarker: function(lat, lng){
    this.destroyMarkers();
        var marker = new google.maps.Marker({
      position: { lat: lat, lng: lng},
      map: map

    });
CoffeeController.markers.push(marker)
}
}
function initMap(){
CoffeeController.initialize();
}
$(document).ready(function(){
});

【问题讨论】：

标签： javascript jquery ruby-on-rails google-maps google-maps-api-3

【解决方案1】：

您将地图的中心设置为函数 getCityOnSelect，而不是 google.maps.LatLng 或 lat/lng 文字对象。我相信您的意思是调用该函数，顺便说一句，该函数似乎没有正确定义，也没有返回任何内容。

【讨论】：