javascript 将多个经纬度点从数据库加载到谷歌地图标记的好方法？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3261853/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Good way to load multiple lat/long points from a database into google map markers?
提问by tbone
I have a table containing multiple addresses, including their Lat/Long coordinates, and I want to place many of these markers onto a google map at once, using asp.net webforms and Google Maps Javascript API V3.
我有一个包含多个地址的表格，包括它们的纬度/经度坐标，我想使用 asp.net webforms 和 Google Maps Javascript API V3 将许多这些标记一次放置到谷歌地图上。
The tutorials show how to add one marker:
http://code.google.com/apis/maps/documentation/javascript/overlays.html#Markers
教程展示了如何添加一个标记：http:
//code.google.com/apis/maps/documentation/javascript/overlays.html#Markers
var myLatlng = new google.maps.LatLng(-25.363882,131.044922);
var myOptions = {
zoom: 4,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title:"Hello World!"
});
My question is, after I've loaded the set of multiple addresses server side (codebehind), what is a goodway to output this set into the html such that client side javascript can iterate the collection and place markers onto the map.
我的问题是，在我加载了一组多地址服务器端（代码隐藏）之后，有什么好方法可以将此组输出到 html 中，以便客户端 javascript 可以迭代集合并将标记放置到地图上。
Update
更新
If I alreadyhad created my set, what would be a decent way of pushing that out into the page's html at render time, without calling an external script? (Passing the complex filter parameters to the script would be complicated so I'd rather avoid this.) Should I literally just use a stringbuilder to construct a javascript function containing the proper json array and then append that function to the page? That would work, but it doesn't seem quite proper.
如果我已经创建了我的集合，那么在渲染时将其推送到页面的 html 中而不调用外部脚本的体面方法是什么？（将复杂的过滤器参数传递给脚本会很复杂，所以我宁愿避免这种情况。）我应该直接使用 stringbuilder 来构造一个包含正确 json 数组的 javascript 函数，然后将该函数附加到页面吗？这会奏效，但似乎不太合适。
回答by Daniel Vassallo
You could go with the approach you are suggesting.
您可以采用您建议的方法。
This is a very simple example showing how easy it is to plot multiple markers with the v3 API:
这是一个非常简单的示例，展示了使用 v3 API 绘制多个标记是多么容易：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<title>Google Maps Multiple Markers</title>
<script src="http://maps.google.com/maps/api/js?sensor=false"
type="text/javascript"></script>
<script type="text/javascript">
var map;
// Cretes the map
function initialize() {
map = new google.maps.Map(document.getElementById('map'), {
zoom: 10,
center: new google.maps.LatLng(-33.92, 151.25),
mapTypeId: google.maps.MapTypeId.ROADMAP
});
}
// This function takes an array argument containing a list of marker data
function generateMarkers(locations) {
for (var i = 0; i < locations.length; i++) {
new google.maps.Marker({
position: new google.maps.LatLng(locations[i][1], locations[i][2]),
map: map,
title: locations[i][0]
});
}
}
</script>
</head>
<body>
<div id="map" style="width: 500px; height: 400px;"></div>
</body>
</html>
Then to generate the markers you can dump the following script anywhere within your <body>tags.
然后要生成标记，您可以在标记中的任何位置转储以下脚本<body>。
<body>
<div id="map" style="width: 500px; height: 400px;"></div>
<script type="text/javascript">
window.onload = function () {
initialize();
generateMarkers(
['Bondi Beach', -33.890542, 151.274856],
['Coogee Beach', -33.923036, 151.259052],
['Cronulla Beach', -34.028249, 151.157507],
['Manly Beach', -33.800101, 151.287478],
['Maroubra Beach', -33.950198, 151.259302]
);
};
</script>
</body>
You would simply need to generate the array literal ['Bondi Beach', -33.890542, 151.274856] ...from your server-side data set, since the rest is static. Make sure that the last element does not end with a comma.
您只需['Bondi Beach', -33.890542, 151.274856] ...要从服务器端数据集生成数组文字，因为其余部分是静态的。确保最后一个元素不以逗号结尾。
回答by Matt Ball
Here's what I was able to get from the Google Maps API v3 Group a while back, for working with tens of thousands of points - specifically, check out what Paul Kulchenko threw together. It's pretty awesome.
这是我不久前从 Google Maps API v3 Group 获得的，用于处理数万个点 - 具体来说，请查看 Paul Kulchenko 拼凑的内容。真是太棒了。
http://groups.google.com/group/google-maps-js-api-v3/browse_thread/thread/59a52aecec860e75?pli=1
http://groups.google.com/group/google-maps-js-api-v3/browse_thread/thread/59a52aecec860e75?pli=1
回答by user365363
I think that the obvious approach will work fine. After you initialize the map you can make an asynchronous request to a script that produces a JSON array of lat long coordinates. Iterate over that list placing a marker at each coordinate, or hand off each marker to the marker manager as suggested by Steve.
我认为显而易见的方法会奏效。初始化地图后，您可以向脚本发出异步请求，该脚本生成经纬度坐标的 JSON 数组。迭代该列表，在每个坐标处放置一个标记，或者按照 Steve 的建议将每个标记交给标记管理器。
If you have too many markers to make this approach feasible, then you should load the markers incrementally. Your task will then be to decide when to trigger the asynchronous request which will add the markers for a given subset of the map.
如果您有太多的标记使这种方法可行，那么您应该增量加载标记。然后，您的任务将是决定何时触发异步请求，该请求将为地图的给定子集添加标记。
回答by Ashish v
I think generateMarkers function should call like this. because if i call locations[i][1] in generateMarkers function it will only gives me first character of passed argument. so, i had to convert my normal array to json. It worked for me.
我认为 generateMarkers 函数应该像这样调用。因为如果我在 generateMarkers 函数中调用locations[i][1]，它只会给我传递参数的第一个字符。所以，我不得不将我的普通数组转换为 json。它对我有用。
generateMarkers([
{'0':'Bondi Beach', '1':-33.890542, '2':151.274856},
{'0':'Coogee Beach', '1':-33.923036, '2':151.259052},
{'0':'Cronulla Beach', '1':-34.028249, '2':151.157507},
{'0':'Manly Beach', '1':-33.800101, '2':151.287478},
{'0':'Maroubra Beach', '1':-33.950198, '2':151.259302}
]);
回答by vnsharetech Phong Nguyen
Update to get markers:
更新以获取标记：
<script type="text/javascript">
var arr = [
['Bondi Beach', -33.890542, 151.274856],
['Coogee Beach', -33.923036, 151.259052],
['Cronulla Beach', -34.028249, 151.157507],
['Manly Beach', -33.800101, 151.287478],
['Maroubra Beach', -33.950198, 151.259302]
]
window.onload = function () {
initialize();
generateMarkers(arr);
};
</script>
