向Google地图添加多个标记 [英] Adding multiple markers to Google Map
问题描述
我正在为每个列入Google地图v3 API的商家添加标记 on this page 在右上角。
I'm looking to add markers for each business listed to a Google map v3 API on this page in the top right hand corner.
我不知道如何为多个邮政编码，但是我们目前在各个商业页面使用URLencode作为存储在数据库中的动态邮编。
I'm not sure how to do this for multiple postcodes, but the one we currently use on the individual business pages use a URLencode for the dynamic postcodes stored in the database.
以下是我们用于各个页面的代码：
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');
})
该页面的邮政编码是在ASP中生成的：
The postcodes for that page are generated in 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..
推荐答案
刚开始的时候，如何管理多个标记。 （复制并将代码粘贴到一个html文件中，它可以工作...）然后，您可以通过从db等位置通过经典asp写出位置来调整代码：
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:
<!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>
这篇关于向Google地图添加多个标记的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
