向Google地图添加多个标记

Question

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. 我希望在此页右上角的Google地图v3 API中为每个列出的商家添加标记。

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. 我不知道如何为多个邮政编码执行此操作，但我们当前在各个业务页面上使用的邮政编码使用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.. 希望有人能帮忙..

Answer 1

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从db等中写出位置来调整代码：

    <!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>

Answer 2

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 map and geolocate are both within the scope. 只需通过使用ASP打印它就可以多次复制此代码，确保map和geolocate都在范围内。 Each time, it will simply add your marker! 每次，它只会添加您的标记！

向Google地图添加多个标记

问题描述

2 个解决方案

解决方案1
20 2013-05-17 07:16:09

解决方案2
0 2013-05-15 15:35:10

向Google地图添加多个标记

问题描述

2 个解决方案

解决方案1 20 2013-05-17 07:16:09

解决方案2 0 2013-05-15 15:35:10

解决方案1
20 2013-05-17 07:16:09

解决方案2
0 2013-05-15 15:35:10