将数据库中的多个纬度/经度点加载到谷歌地图标记中的好方法？
Posted
技术标签:
【中文标题】将数据库中的多个纬度/经度点加载到谷歌地图标记中的好方法？【英文标题】：Good way to load multiple lat/long points from a database into google map markers? 【发布时间】：2011-03-16 18:24:18 【问题描述】：我有一个包含多个地址的表格，包括它们的纬度/经度坐标，我想使用 asp.net 网络表单和 Google Maps javascript API V3 一次将其中许多标记放置到谷歌地图上。
教程展示了如何添加一个标记：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!"
);
我的问题是，在我加载了服务器端（代码隐藏）的多个地址集之后，将这个集输出到 html 以便客户端 javascript 可以迭代收集并在地图上放置标记。
更新
如果我已经创建了我的集合，那么在渲染时将其推送到页面的 html 中而不调用外部脚本的好方法是什么？ （将复杂的过滤器参数传递给脚本会很复杂，所以我宁愿避免这种情况。）我是否应该直接使用字符串构建器来构造一个包含正确 json 数组的 javascript 函数，然后将该函数附加到页面？这会起作用，但它似乎不太合适。
【问题讨论】：
您使用了多少个标记？数量级很重要。 哦，没什么大不了的，我们就说 50 个标记。 【参考方案1】：您可以采用您建议的方法。
这是一个非常简单的示例，展示了使用 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>
然后，要生成标记，您可以在 <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>
您只需从服务器端数据集中生成数组文字['Bondi Beach', -33.890542, 151.274856] ...，因为其余部分是静态的。确保最后一个元素不以逗号结尾。
【讨论】：
优秀...但是，这是按原样运行还是按原样运行：generateMarkers(locations);需要在初始化（）结束时调用......并且“generateMarkers（[”实际上应该是“locations（[”，还是我弄错了？ @tbone：我之前的示例有一个小缺陷。如果您使用window.onload 作为更新的答案会更好。我已经对其进行了测试，并且可以正常工作。您可以将 window.onload 脚本块放在 HTML 中的任何位置。至于generateMarkers() 的参数，您可以使用array literal notation 传递一个“匿名”数组，如我的示例所示。【参考方案2】：
这是我不久前从 Google Maps API v3 Group 获得的信息，用于处理数以万计的点 - 具体来说，请查看 Paul Kulchenko 汇总的内容。真是太棒了。
http://groups.google.com/group/google-maps-js-api-v3/browse_thread/thread/59a52aecec860e75?pli=1
【讨论】：
【参考方案3】：我认为显而易见的方法可以正常工作。初始化地图后，您可以向生成经纬度坐标的 JSON 数组的脚本发出异步请求。遍历该列表，在每个坐标处放置一个标记，或者按照 Steve 的建议将每个标记交给标记管理器。
如果您有太多标记以使这种方法可行，那么您应该逐步加载标记。然后，您的任务将是决定何时触发异步请求，该请求将为地图的给定子集添加标记。
【讨论】：
【参考方案4】：我认为 generateMarkers 函数应该这样调用。因为如果我在 generateMarkers 函数中调用位置[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
]);
【讨论】：
【参考方案5】：更新以获取标记：
<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>
【讨论】：
以上是关于将数据库中的多个纬度/经度点加载到谷歌地图标记中的好方法？的主要内容，如果未能解决你的问题，请参考以下文章
使用数据库中的多个纬度和经度值在 Google 地图上标记路线