Question

嘿伙计们我对谷歌地图api相当新，我在使用数组显示自定义标记时遇到问题。我的代码看起来像这样

<html>
  <head>
    <style>
    body { font-family: Helvetica; }
    .map-content h3 { margin: 0; padding: 5px 0 0 0; }
    </style>
    <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?key=AIzaSyA6VosQrKQOjoTbDSp4Kk4BHvofOJFUfZU&sensor=true"></script>
    <script>
    // Set the Map variable
        var map;
        function initialize() { 
            var myOptions = {
            zoom: 9,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        var all = [
            ["Indianapolis International Airport", "7800 Col. H. Weir Cook Memorial Drive", "Indianapolis", "IN", "46241", "39.71449", "-86.29842", "airport"], 
            ["Location 2", "7205 Olmstead Dr", "Burlington", "NC", "27215", "36.069974", "-79.548101", "airport",],
            ["Location 3", "W Market St", "Graham", "NC", "27253", "36.0722225", "-79.4016207", "airport"],
            ["Location 4", "Mt Hermon Rock Creek Rd", "Graham", "NC", "27253", "35.9826328", "-79.4165216", "airport"],
            ["Location 5", "415 Spring Garden St", "Greensboro", "NC", "27401", "36.06761", "-79.794984", "airport"]
        ];                          
        var infoWindow = new google.maps.InfoWindow;
        map = new google.maps.Map(document.getElementById('map_canvas'), myOptions);
        // Set the center of the map
        var pos = new google.maps.LatLng(36.0621881, -79.5101063);
        map.setCenter(pos);
        function infoCallback(infowindow, marker) { 
            return function() {
            infowindow.open(map, marker);

        };


   }            
   function setMarkers(map, all) {  
    for (var i in all) {                                        
            var name    = all[i][0];
            var address = all[i][1];
            var city    = all[i][2];
            var state   = all[i][3];
            var zip     = all[i][4];
            var lat     = all[i][5];
            var lng     = all[i][6];
            var image   = all[i][7];
            var latlngset;
            latlngset = new google.maps.LatLng(lat, lng);
            var marker = new google.maps.Marker({  
              map: map,  title: city,  position: latlngset, icon: image,
            });
            var airport = new google.maps.MarkerImage(
            'images/airport.png',
            new google.maps.Size(32,37),
            new google.maps.Point(0,0),
            new google.maps.Point(16,37)
             );
            var content = '<div class="map-content"><h3>' + name + '</h3>' + address + '<br />' + city + ', ' + state + ' ' + zip + '<br /><a href="http://maps.google.com/?daddr=' + address + ' ' + city + ', ' + state + ' ' + zip + '" target="_blank">Get Directions</a></div>';                   
            var infowindow = new google.maps.InfoWindow();
              infowindow.setContent(content);
              google.maps.event.addListener(
                marker, 
                'click', 
                infoCallback(infowindow, marker)
              );
          }
        }           
        // Set all markers in the all variable
        setMarkers(map, all);
      };
      // Initializes the Google Map
      google.maps.event.addDomListener(window, 'load', initialize);
    </script>
  </head>
  <body>
    <div id="map_canvas" style="height: 500px; width: 800px;"></div>
  </body>
</html>

到目前为止，当我设置var image = airport时，它可以工作。当我做图标：机场它的工作，但当我尝试获取图像时，请参考var图像，它可以工作。有人可以帮我吗？谢谢！

Answer 1

image不是图标，而是字符串（而不是网址）：

var marker = new google.maps.Marker({  
  map: map,  title: city,  position: latlngset, icon: image,
});

airport是一个图标（实际上是一个已弃用的MarkerImage，但它可以工作），但是没有被使用。

var airport = new google.maps.MarkerImage(
  'images/airport.png',
  new google.maps.Size(32,37),
  new google.maps.Point(0,0),
  new google.maps.Point(16,37)
);

这样的事情应该有效：

var icon = null;
if (image == "airport") icon = airport;
var marker = new google.maps.Marker({  
  map: map,  title: city,  position: latlngset, icon: icon
});

working exampe（使用不同的自定义图标）

Answer 2

这对我有用： https://developers.google.com/maps/documentation/javascript/examples/icon-complex

只需将URL包装在地图中： var _icon = {url：＆＃39; /statics/images/red-marker.png'}

然后在标记中： var marker = new google.maps.Marker（{ id：args.id，图：CurrentMap， position：new google.maps.LatLng（args.lat，args.lng），图标：_icon }）;

谷歌地图自定义标记没有出现

2 个答案: