Question

我为新手问题道歉。我还在搞清楚Google Maps API V3以及选择Rails。每当用户从下拉列表中选择不同的城市时，我都会尝试更改Google地图的中心。例如，如果用户选择纽约市，则地图以NYC为中心，如果他们然后选择芝加哥则更改为芝加哥。我能够为星巴克这样的地方做标记但是对于城市而言似乎无法做到。目前，当我加载页面时没有地图出现 - 但是，如果我删除了getCityOnSelect ：function（）{ - 然后出现地图我列出了下面的所有相关代码。非常感谢你的帮助。

_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(){
});

Answer 1

您要将地图的中心设置为function，getCityOnSelect，而不是google.maps.LatLng或lat / lng文字对象。我相信你打算调用那个函数，顺便说一下，它似乎没有被正确定义，也没有返回任何东西。

Google地图更改中心基于Rails城市应用程序列表 - 下拉菜单

1 个答案: