問題描述
我希望為 Google 地圖 v3 API 中列出的每個企業添加標記在這個頁面上在右上角.
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 文件中，它就可以工作了......)然后您可以通過經典的 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>
這篇關于向谷歌地圖添加多個標記的文章就介紹到這了，希望我們推薦的答案對大家有所幫助，也希望大家多多支持html5模板網！