好办法，从数据库到谷歌地图标记加载多个纬度/长点？ [英] Good way to load multiple lat/long points from a database into google map markers?
问题描述
我有一个包含多个地址，包括它们的纬度/经度坐标的表，我想一次把许多这些标记到谷歌地图中，使用asp.net web表单和谷歌地图Javascript API第3。
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.
本教程演示如何添加一个标记：结果
的http://$c$c.google.com/apis/maps/documentation/javascript/overlays.html#Markers
The tutorials show how to add one marker:
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!"
});
我的问题是，我已经加载了一组多个地址，服务器端（codebehind），什么是一个好的方式来输出这组到HTML，使得客户端的JavaScript后可以遍历集合，地点标记到地图上。
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渲染时，无需调用外部脚本的一个体面的方式？ （传递复杂的滤波器参数的脚本将是复杂的，所以我宁愿避免这种情况。）如果我真的只是使用StringBuilder构建含有适当的JSON数组的JavaScript函数，然后追加该功能的网页？这将工作，但它似乎并不十分恰当的。
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? (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.
推荐答案
您可以去与你的建议的方法。
You could go with the approach you are suggesting.
这是显示它是多么容易积与V3 API多个标记一个很简单的例子：
This is a very simple example showing how easy it is to plot multiple markers with the 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>
然后生成标记可以内的任何地方倾倒以下脚本你的＆LT;车身方式＆gt; 标签
<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>
您将只需生成数组文本 ['邦迪海滩，-33.890542，151.274856] ... 从服务器端数据集，因为剩下的是静态的。确保最后一个元素不以逗号结束。
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.
这篇关于好办法，从数据库到谷歌地图标记加载多个纬度/长点？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
