向Google地图添加多个标记

本文介绍了向Google地图添加多个标记的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我正在为每个列入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文件中，它可以工作...）然后，您可以通过从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地图添加多个标记的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！