我正在尝试将多个 Google map 附加到一页。但我好像遇到了一些麻烦。
这将是我用来(使用 Handlebars.js )多次创建相同 block 的模板,大约 50 次:
<script type="text/x-handlebars-template">
{{#each productListing}}
<div class="product-listing-wrapper">
<div class="product-listing">
<div class="left-side-content">
<div class="thumb-wrapper" data-image-link="{{ThumbnailUrl}}">
<i class="thumb">
<img src="{{ThumbnailUrl}}" alt="Thumb">
<span class="zoom-image"></span>
</i>
</div>
<div class="google-maps-wrapper">
<div class="google-coordonates-wrapper">
<div class="google-coordonates">
<p>{{LatLon.Lat}}</p>
<p>{{LatLon.Lon}}</p>
</div>
</div>
<div class="google-maps-button">
<a class="google-maps" href="#">Google Maps</a>
</div>
</div>
</div>
<div class="right-side-content">
<div class="map-canvas-wrapper">
<div id="map-canvas" class="map-canvas" data-latitude="{{LatLon.Lat}}" data-longitude="{{LatLon.Lon}}"></div>
</div>
<div class="content-wrapper"></div>
</div>
</div>
</div>
{{/each}}
我正在尝试将 map 附加到#map-canvas
id。我使用以下代码块进行绘图:
Cluster.prototype.initiate_map_assembling = function() {
return $(this.map_canvas_wrapper_class).each(function(index, element) {
var canvas = $(element).children();
var latitude = $(canvas).attr('data-latitude');
var longitude = $(canvas).attr('data-longitude');
var coordinates = new google.maps.LatLng(latitude, longitude);
var options = {
zoom: 9,
center: coordinates,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map($(canvas), options);
var marker = new google.maps.Marker({
position: coordinates,
map: map
});
});
};
这样我就“循环”了我试图将 map 附加到的 id 的所有父类,但 map 只会附加到第一个 id。我尝试以其他方式将其附加到所有 id,但结果相同。
那么你建议我做什么才能让它按我的预期工作,将 map 附加到每个 id 上?
最佳答案
假设您正在使用像 jQuery 这样的库,然后进行更改
var map = new google.maps.Map($(canvas), options);
至
var map = new google.maps.Map($(canvas)[0], options);
这可能有效,否则演示的链接会很有帮助。
关于javascript - 将多个谷歌地图绘制到页面,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/11108555/