javascript 向 Google 地图添加多个标记
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16554748/
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
Adding multiple markers to Google Map
提问by John
I'm looking to add markers for each business listed to a Google map v3 API on this pagein the top right hand corner.
我希望 在右上角的此页面上为列出到 Google 地图 v3 API 的每个业务添加标记。
I'm not sure how to do this for multiple postcodes, but the one we currently use on the individual business pagesuse a URLencode for the dynamic postcodes stored in the database.
我不确定如何对多个邮政编码执行此操作，但我们目前在各个业务页面上使用的邮政编码使用 URLencode 来存储数据库中的动态邮政编码。
Here's the code we use for the individual pages:
这是我们用于各个页面的代码：
<script src="http://maps.googleapis.com/maps/api/js?q=London&key=AIzaSyBaPEDyFbbnWjtvT8W3UBOM34Y7g6vK69A&sensor=false"></script>
var map;
function initialize() {
var mapOptions = {
zoom: 15,
center: new google.maps.LatLng(51.511214,-0.119824),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var geolocate = function(address, callback) {
$.ajax({
url: "http://maps.googleapis.com/maps/api/geocode/json",
data: {
"sensor": true,
"address": address
},
dataType: "json",
success: function(d) {
if (d.status == "ZERO_RESULTS") callback(false);
if (d.results && d.results[0] && d.results[0].geometry) {
callback({
"ne": d.results[0].geometry.bounds.northeast,
"sw": d.results[0].geometry.bounds.southwest,
"center": d.results[0].geometry.location
});
}
else callback(false);
}
});
};
map = new google.maps.Map(document.getElementById('map-canvas'),
mapOptions);
geolocate("<%=server.URLEncode(""&rsAdvert("ContactPostcode"))%>", function(c) {
map.setCenter(new google.maps.LatLng(c.center.lat, c.center.lng));
});
}
google.maps.event.addDomListener(window, 'load', initialize);
$('#myModal').on('shown', function () {
google.maps.event.trigger(map, 'resize');
})
The postcodes for that page are generated in ASP:
该页面的邮政编码是在 ASP 中生成的：
if rsDB_Ads("ContactPostcode") <> "" then
strTempHTML = "[ContactPostcode]"
strDB_AdvertItem = Replace(strDB_AdvertItem, "<!--ContactPostcode-->", strTempHTML)
Else
strDB_AdvertItem = Replace(strDB_AdvertItem, "<!--ContactPostcode-->", "")
End if
Hoping someone can help..
希望有人能帮忙。。
回答by John
Just for a start, here is how to manage multiple markers. (copy & Paste the code into a html file and it works ...) You can then adapt the code by writing out the locations from a db etc. via classic asp:
只是作为一个开始，这里是如何管理多个标记。（将代码复制并粘贴到 html 文件中，它可以工作......）然后您可以通过经典 asp 从数据库等中写出位置来调整代码：
<!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>
</head>
<body>
<div id="map" style="width: 1000px; height: 1000px;"></div>
<script type="text/javascript">
var locations = [
['Stadtbibliothek Zanklhof', 47.06976, 15.43154, 1],
['Stadtbibliothek dieMediathek', 47.06975, 15.43116, 2],
['Stadtbibliothek G?sting', 47.09399, 15.40548, 3],
['Stadtbibliothek Graz West', 47.06993, 15.40727, 4],
['Stadtbibliothek Graz Ost', 47.06934, 15.45888, 5],
['Stadtbibliothek Graz Süd', 47.04572, 15.43234, 6],
['Stadtbibliothek Graz Nord', 47.08350, 15.43212, 7],
['Stadtbibliothek Andritz', 47.10280, 15.42137, 8]
];
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 13,
center: new google.maps.LatLng(47.071876, 15.441456),
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var infowindow = new google.maps.InfoWindow();
var marker, i;
for (i = 0; i < locations.length; i++) {
marker = new google.maps.Marker({
position: new google.maps.LatLng(locations[i][1], locations[i][2]),
map: map
});
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
infowindow.setContent(locations[i][0]);
infowindow.open(map, marker);
}
})(marker, i));
}
</script>
</body>
</html>
回答by Sébastien Renauld
I see my code in this!
我在这看到我的代码！
I am assuming that you want markers to be added on the map. This can be easily done by tweaking the code I supplied before. Quite simply:
我假设您希望在地图上添加标记。这可以通过调整我之前提供的代码轻松完成。很简单：
geolocate("Your postcode here", function(c) {
var marker = new google.maps.Marker({
position: new google.maps.LatLng(c.center.lat, c.center.lng),
map: map,
// Your other google maps marker options here
});
});
Just duplicate this code as many times as necessary by printing it using ASP, making sure that mapand geolocateare both within the scope. Each time, it will simply add your marker!
只需通过使用 ASP 打印此代码，根据需要多次复制此代码，确保map和geolocate都在范围内。每次，它都会简单地添加您的标记！
