从数据库加载多个纬度/经度点到谷歌地图标记的好方法？
[英]Good way to load multiple lat/long points from a database into google map markers?
问题描述
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. 
我有一个包含多个地址的表格，包括他们的Lat / Long坐标，我想使用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 good way 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 already had 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? 如果我已经创建了我的集合，那么在渲染时将其推送到页面的html中是一种不错的方式，而无需调用外部脚本？ (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? （将复杂的过滤器参数传递给脚本会很复杂，所以我宁愿避免这种情况。）我是否应该使用stringbuilder来构造包含正确的json数组的javascript函数，然后将该函数附加到页面？ That would work, but it doesn't seem quite proper. 这可行，但似乎不太合适。
4 个解决方案
解决方案1
6 已采纳 2010-07-16 06:44:41
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. 您只需要从服务器端数据集生成数组文字['Bondi Beach', -33.890542, 151.274856] ... ，因为其余部分是静态的。 Make sure that the last element does not end with a comma. 确保最后一个元素不以逗号结尾。
解决方案2
1 2010-07-16 04:24:43
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. 这是我之前从谷歌地图API v3群中获得的，用于处理数万个点 - 具体来说，看看Paul Kulchenko在一起的内容。 It's pretty awesome. 这太棒了。
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
解决方案3
0 2010-07-16 04:23:45
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. 初始化映射后，您可以对脚本发出异步请求，该脚本生成一个lat长坐标的JSON数组。 Iterate over that list placing a marker at each coordinate, or hand off each marker to the marker manager as suggested by Steve. 迭代该列表，在每个坐标处放置一个标记，或者按照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. 然后，您的任务是决定何时触发异步请求，该异步请求将为地图的给定子集添加标记。
解决方案4
0 2018-04-15 05:36:24
I think generateMarkers function should call like this. 我认为generateMarkers函数应该像这样调用。 because if i call locations[i][1] in generateMarkers function it will only gives me first character of passed argument. 因为如果我在generateMarkers函数中调用locations [i] [1]，它只会给我传递参数的第一个字符。 so, i had to convert my normal array to json. 所以，我必须将我的正常数组转换为json。 It worked for me. 它对我有用。
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}
]);
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.