0

我需要在单个 Google 地图中显示多个标记

我试图放置代码，

 <link href="http://code.google.com/apis/maps/documentation/javascript/examples/default.css" rel="stylesheet" type="text/css" /> 
    <script src="http://maps.google.com/maps?file=api&v=2&key=my_key" type="text/javascript"></script>
     <script type="text/javascript"> 


 function initialize() {
 latLngs = [ 
  new google.maps.LatLng(44.3118328, -79.5549532),
  new google.maps.LatLng(44.3118325, -80.5549533),
  new google.maps.LatLng(44.3118326, -81.5549534),
  new google.maps.LatLng(44.3118327, -82.5549535)
  ];

var latlng = new google.maps.LatLng(44.3118328, -79.5549532);
   myOptions = {
 zoom: 15,
  center: latlng,
  mapTypeId: google.maps.MapTypeId.ROADMAP
   };


  var map = new google.maps.Map(document.getElementById("map_canvas"),
   myOptions);


      var contentString = '<div id="mapinfowindow">'+'1970 Thompson St <br> Innisfil' + '<br>' + '$329,900'
 +'<a href="http://www.something.com/Featured_Listings_files/1970%20Thompson%20-%20Brochure.pdf"><br><br>View Brochure</a></div>';

  var infowindow = new google.maps.InfoWindow({
   content: contentString,
  });

    var image = new google.maps.MarkerImage(
 'images/marker.png',
  new google.maps.Size(50,50),
 new google.maps.Point(0,0),
new google.maps.Point(25,50)
 ); 

  var shadow = new google.maps.MarkerImage(
       'images/markershadow.png',
       new google.maps.Size(78,50),
     new google.maps.Point(0,0),
    new google.maps.Point(25,50)
     );

  var shape = {
    coord:                        [28,3,32,4,35,5,37,6,38,7,39,8,40,9,42,10,42,11,43,12,44,13,44,14,44,15,45,16,45,17,45,18,45,19,45,20,45,21,45,22,45,23,44,24,44,25,44,26,43,27,43,28,42,29,41,30,41,31,40,32,39,33,39,34,38,35,37,36,36,37,35,38,34,39,33,40,32,41,31,42,30,43,29,44,28,45,26,46,24,47,24,47,22,46,21,45,19,44,18,43,17,42,16,41,15,40,14,39,13,38,12,37,12,36,11,35,10,34,9,33,9,32,8,31,7,30,7,29,6,28,5,27,5,26,4,25,4,24,4,23,4,22,3,21,3,20,3,19,3,18,4,17,4,16,4,15,4,14,5,13,6,12,6,11,7,10,8,9,9,8,10,7,12,6,14,5,16,4,20,3,28,3],
    type: 'poly'
    };


    var markers = new Array(latLngs.length);

     for (var i = 0; i < markers.length; i++) {
    markers[i] = new google.maps.Marker({
   position: latLngs[i],
   title:"Marker "+i,
   icon: image,
   shadow: shadow,
   map: map,
  shape: shape
 });
 markers[i].setMap(map);     
 }

 for (var i2 = 0; i2 < markers.length; i2++) {
   google.maps.event.addListener(markers[i2], 'click', function() {
   infowindow.open(map,markers[i2]);
  });
 }
 }

</script> 
    <div id="map_canvas" style="width: 691px; height: 466px; overflow:hidden;" class="bdr-grey">            </div>

这给了我 javascript 错误google.maps.MapTypeId undefined

而且我还需要在其中实现多个标记。

所以请帮我做到这一点..

谢谢你给我的时间。。

4

3 回答 3

1

问题是您正在嵌入 Google Maps API v2 ( http://maps.google.com/maps?file=api&v=2&key=my_key)，但您使用的是 Google Maps API v3 的方法和对象。由于您的其余代码适用于 Google Maps v3，因此请尝试像这样调用 Google Maps API：

<script type="text/javascript"
src="https://maps.google.com/maps/api/js?sensor=set_to_true_or_false">
于 2012-09-22T08:35:51.260 回答
0 
 <script type="text/javascript" language="javascript">

     window.onload = function () {
         if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari
             xmlhttp = new XMLHttpRequest();
         }
         else {// code for IE6, IE5
             xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
         }
         xmlhttp.open("GET", "StoreLocations.xml", false);
         xmlhttp.send();
         xmlDoc = xmlhttp.responseXML;
         var x = xmlDoc.getElementsByTagName("CityName");

         var mapOptions = {
             center: new google.maps.LatLng(39.8634242, -98.18818149999998),
             zoom: 3,
             mapTypeId: google.maps.MapTypeId.ROADMAP
             //  marker:true
         };

         var infoWindow = new google.maps.InfoWindow();
         var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);

         for (i = 0; i < x.length; i++) {
             var latitudetest = x[i].getElementsByTagName("latitude")[0].childNodes[0].nodeValue;
             var longitudetest = x[i].getElementsByTagName("longitude")[0].childNodes[0].nodeValue;
             var data = '<div style="min-width:175px;text-align:left; min-height:80px;color:#000000;font-family:arial,sans-serif;font-style:normal; font-size:13px;">' + '<span style="font-weight:bold;font-size:13px;color:#000000;font-family:arial,sans-serif;font-style:normal; ">' + '1-800 Car Cash of' + '&nbsp;' + x[i].getElementsByTagName("storename")[0].childNodes[0].nodeValue + '</span>' + '<br/>' + x[i].getElementsByTagName("address")[0].childNodes[0].nodeValue + '<br/>' + x[i].getElementsByTagName("name")[0].childNodes[0].nodeValue + '&nbsp;' + x[i].getElementsByTagName("zipcode")[0].childNodes[0].nodeValue + '<br/>' + x[i].getElementsByTagName("phoneno")[0].childNodes[0].nodeValue + '<br/>' + '<div style="padding-top:6px;">' + '<a href="https://maps.google.com/maps?daddr=' + x[i].getElementsByTagName("address")[0].childNodes[0].nodeValue + "," + x[i].getElementsByTagName("name")[0].childNodes[0].nodeValue + '" style="font-family:arial,sans-serif;font-style:normal;text-decoration: none;color:Blue; font-size:13px;" target="_blank">' + "Get Directions" + '</a>' + '</div>' + '</div>';
             var myLatlng = new google.maps.LatLng(latitudetest, longitudetest);
             var bluePin = new google.maps.MarkerImage('http://maps.google.com/mapfiles/ms/micons/blue-dot.png',
            new google.maps.Size(32, 32),
            new google.maps.Point(0, 0),
            new google.maps.Point(14, 35));
             var pinShadow = new google.maps.MarkerImage('http://maps.google.com/mapfiles/ms/micons/msmarker.shadow.png',
            new google.maps.Size(59, 32),
            new google.maps.Point(0, 0),
            new google.maps.Point(14, 35));
             var marker = new google.maps.Marker({
                 position: myLatlng,
                 icon: bluePin,
                 shadow: pinShadow,
                 map: map,
                 title: x[i].getElementsByTagName("name")[0].childNodes[0].nodeValue
             });
             (function (marker, data) {
                 google.maps.event.addListener(marker, 'click', function (e) {
                     infoWindow.setContent(data);
                     infoWindow.open(map, marker);
                 });
             })(marker, data);
         }
     }
</script>

我已经从每个商店位置的 xml 文件中加载了纬度和经度。

于 2013-09-28T10:09:26.813 回答
-1

检查这个脚本，

  <script type="text/javascript">

        var locations = [
      ['Bondi Beach', 16.7997751, 96.15659660000906, 4],
      ['Coogee Beach', 16.7897762, 96.15659660008007, 5],
      ['Cronulla Beach', 16.775815, 96.13637070000004, 3],
      ['Manly Beach', 16.7996784, 96.15659660000609, 2],
      ['Maroubra Beach', 16.7497795, 96.15659660050010, 1]
    ];

        var map = new google.maps.Map(document.getElementById('map'), {
            zoom: 13,
            center: new google.maps.LatLng(16.7997751, 96.15659660000006),
            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>
于 2012-09-22T06:12:35.270 回答