javascript - 如何将多个标记添加到谷歌地图?
问题描述
我为我的 Rails 应用程序使用了带有一个标记的谷歌地图:
<script>
function initMap(lat, lng) {
var myCoords = new google.maps.LatLng(lat, lng);
var mapOptions = {
center: myCoords,
zoom: 14
};
var map = new google.maps.Map(document.getElementById('map'), mapOptions);
var marker = new google.maps.Marker({
position: myCoords,
map: map
});
}
</script>
<script>
$('#map').prepend(initMap(<%= @location.latitude %>, <%= @location.longitude %>));
</script>
但是如何将多个标记转移到地图上?
我试过了,但它不起作用:
<% @locations.each do |location| %>
<script>
$('#map').prepend(initMap(<%= location.latitude %>, <%= location.longitude %>));
</script>
<% end %>
然后我创建一个数组:
array = []
@locations.each do |location|
array.push([location.latitude, location.longitude])
end
看起来像这样:
[[50.0874654, 14.4212535], [49.4447888, 32.0587805], [49.42105565, 32.1004058189433]]
并尝试传递给 js:
<script>
$('#map').prepend(initMap(<%= array %>));
</script>
但它也没有奏效。
解决方案
您需要添加一个重载函数 initMap ,它接受如下数组:
<script>
function initMap(lat, lng) {
var myCoords = new google.maps.LatLng(lat, lng);
var mapOptions = {
center: myCoords,
zoom: 14
};
var map = new google.maps.Map(document.getElementById('map'), mapOptions);
var marker = new google.maps.Marker({
position: myCoords,
map: map
});
}
function initMap(locationArr) {
for (var i = 0; i < locationArr.length; i++) {
var myCoords = new google.maps.LatLng(locationArr[i][0], locationArr[i][1]);
var mapOptions = {
center: myCoords,
zoom: 14
};
var map = new google.maps.Map(document.getElementById('map'), mapOptions);
var marker = new google.maps.Marker({
position: myCoords,
map: map
});
}
}
</script>
推荐阅读
- javascript - 正确使用链接
- xsd - CXF 从 wsdl 生成 SEI 和 java 类
- assembly - 如何打印用户输入的字符串
- python - 更新打印文本
- ios - CoreBluetooth:在 writeValue() 之后不调用 didWriteValueFor()
- swagger-ui - Swagger UI 隐藏 api-docs URL
- reactjs - 如何在页面刷新时保留状态值
- package - 为什么我不能更新到最新版本的 Query.jl 包?
- java - Java G1 垃圾收集器占用大量内存
- bash - 尝试将带有分隔符的参数解析为 shell 脚本中的数组时出错