多谷歌地图on Rails的

我有企业建成的列表，并需要在各自的模态显示地图，为了这个，我有这样的：多谷歌地图on Rails的

<div class="row" id="googleMap<%=enterprice.id%>" style="width 100%; height: 300px;" data1='<%=enterprice.latitud%>' data2='<%=enterprice.longitud%>'> 
</div>

这个代码是在html.erb文件。

我对加载地图功能：

<script> 
    function myMap(lat, long) { 
    var uluru = { lat: lat, lng: long}; 
    var map = new google.maps.Map(document.getElementById('googleMap'), { 
     zoom: 4, 
     center: uluru 
    }); 
    var marker = new google.maps.Marker({ 
     position: uluru, 
     map: map 
    }); 
    } 
</script>

而且一个jQuery帮手传递数据

$(document).on("ready", function() { 
       $('#googleMap<%=enterprice.id%>').each(function (index, element) { 
        var $this = $(element); 
        myMap($this.attr("data1"), $this.attr("data2")); 
       }); 
       });

问题是地图上只装上模态的第一个单元格，但没有实际显示任何地图。

而其他单元格不会加载地图。

来源

2017-10-12 arc_pwr

首先，你不需要每个地图和模态。你可以有一个使用JS来改变它们。这样你就不会超载你的页面中的元素，你将只使用一系列的元素，但不能并行使用。

无论何时页面准备就绪，您都可以在模态中定义地图。

<script> 
     var map; 
     var old_marker; 

     function initMap() { 
     var point = {lat: 0, lng: 0}; 

     map = new google.maps.Map(document.getElementById('map'), { 
      zoom: 12, 
      center: point, 
      mapTypeId: 'terrain' 
     }); 

     // This event listener will call addMarker() when the map is clicked. 
     map.addListener('click', function(event) { 
      addMarker(event.latLng); 
     }); 

     // Adds a marker at the center of the map. 
     addMarker(point); 
     } 

     // Adds a marker to the map and push to the array. 
     function addMarker(location) { 
     var marker = new google.maps.Marker({ 
      position: location, 
      map: map 
     }); 
     if(old_marker){ 
      old_marker.setMap(null) 
     } 
     old_marker = marker 
     markers.push(marker); 
     map.setCenter(location); 
     } 
</script>

现在我们只需点击它们就可以为每个企业添加一个标记。我建议增加一定的阶级对他们

$(document).on("ready", function() { 
    initMap(); 
    $(.enterprise).click(function(){ 
    addMarker($this.attr("data1"), $this.attr("data2")); 
    }); 
});

通过这种方式，标记将有关各企业增加点击和地图将围绕该位置。现在你需要做的就是展示Modal。

参考文献：https://developers.google.com/maps/documentation/javascript/examples/marker-remove

来源

2017-10-12 23:20:15

多谷歌地图on Rails的

回答

相关问题