Question

我有一个正常运行的GoogleMap，可以很好地使用SVG图标作为标记。我现在坚持的是如何将infowindows分配到每个位置。

我一直在浏览添加信息窗口的多个指南，我可以使用全新的地图和使用库存标准标记轻松完成此操作，但每当我尝试将其合并到带有SVG图标的工作地图时，它会打破一个或者其他

希望有人能给我一些建议，告诉我从哪里开始为每个标记获取个人信息。

我工作的SVG标记代码是：

var map,
desktopScreen = Modernizr.mq( "only screen and (min-width:1024px)" ),
zoom = desktopScreen ? 14 : 13,
scrollable = draggable = !Modernizr.hiddenscroll || desktopScreen,
isIE11 = !!(navigator.userAgent.match(/Trident/) && navigator.userAgent.match(/rv[ :]11/));

function initMap() {
    var myLatLng = {lat: -38.1632438, lng: 145.9190148};
    map = new google.maps.Map(document.getElementById('map-locator'), {
        zoom: zoom,
        center: myLatLng,
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        scrollwheel: scrollable,
        draggable: draggable,
        styles: [{"stylers": [{ "saturation": -100 }]}],
    });

    var locations = [
        {
            title: 'Shopping - Aldi',
            position: {lat: -38.1626302, lng: 145.9247379},
            icon: {
                url: isIE11 ? "http://www.copeland.nextcode.com.au/application/themes/copelands/markers/png/Shop_3.png" : "http://www.copeland.nextcode.com.au/application/themes/copelands/markers/svg/Shop_3.svg",
                scaledSize: new google.maps.Size(64, 64)
            }
        },
        {
            title: 'Shopping - Woolworths',
            position: {lat: -38.160115, lng: 145.9283567},
            icon: {
                url: isIE11 ? "http://www.copeland.nextcode.com.au/application/themes/copelands/markers/png/Shop_3.png" : "http://www.copeland.nextcode.com.au/application/themes/copelands/markers/svg/Shop_3.svg",
                scaledSize: new google.maps.Size(64, 64)
            }
        },
        {
            title: 'Source Address',
            position: {lat: -38.159946, lng: 145.902425},
            icon: {
                url: isIE11 ? "http://www.copeland.nextcode.com.au/application/themes/copelands/markers/png/Arrow_1.png" : "http://www.copeland.nextcode.com.au/application/themes/copelands/markers/svg/Arrow_1.svg",
                scaledSize: new google.maps.Size(96, 96)
            }
        }                   
    ];

    locations.forEach( function( element, index ){  
        var marker = new google.maps.Marker({
            position: element.position,
            map: map,
            title: element.title,
            icon: element.icon,
        });
    }); 
}

Answer 1

向标记添加点击侦听器。
单击标记时打开infowindow。

var infow = new google.maps.InfoWindow();
locations.forEach(function(element, index) {
  var marker = new google.maps.Marker({
    position: element.position,
    map: map,
    title: element.title,
    icon: element.icon,
  });
  marker.addListener('click', function(evt) {
   infow.setContent(element.title);
   infow.open(map,marker);
  })
});

proof of concept fiddle

代码段

var isIE11 = false;
var zoom = 14;

function initMap() {
  var myLatLng = {
    lat: -38.1632438,
    lng: 145.9190148
  };
  map = new google.maps.Map(document.getElementById('map-locator'), {
    zoom: zoom,
    center: myLatLng,
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    styles: [{
      "stylers": [{
        "saturation": -100
      }]
    }],
  });
  var infow = new google.maps.InfoWindow();
  locations.forEach(function(element, index) {
    var marker = new google.maps.Marker({
      position: element.position,
      map: map,
      title: element.title,
      icon: element.icon,
    });
    marker.addListener('click', function(evt) {
      infow.setContent(element.title);
      infow.open(map, marker);
    })
  });
}
google.maps.event.addDomListener(window, "load", initMap);
  var locations = [{
    title: 'Shopping - Aldi',
    position: {
      lat: -38.1626302,
      lng: 145.9247379
    },
    icon: {
      url: isIE11 ? "http://www.copeland.nextcode.com.au/application/themes/copelands/markers/png/Shop_3.png" : "http://www.copeland.nextcode.com.au/application/themes/copelands/markers/svg/Shop_3.svg",
      scaledSize: new google.maps.Size(64, 64)
    }
  }, {
    title: 'Shopping - Woolworths',
    position: {
      lat: -38.160115,
      lng: 145.9283567
    },
    icon: {
      url: isIE11 ? "http://www.copeland.nextcode.com.au/application/themes/copelands/markers/png/Shop_3.png" : "http://www.copeland.nextcode.com.au/application/themes/copelands/markers/svg/Shop_3.svg",
      scaledSize: new google.maps.Size(64, 64)
    }
  }, {
    title: 'Source Address',
    position: {
      lat: -38.159946,
      lng: 145.902425
    },
    icon: {
      url: isIE11 ? "http://www.copeland.nextcode.com.au/application/themes/copelands/markers/png/Arrow_1.png" : "http://www.copeland.nextcode.com.au/application/themes/copelands/markers/svg/Arrow_1.svg",
      scaledSize: new google.maps.Size(96, 96)
    }
  }];

html,
body,
#map-locator {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}

<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map-locator"></div>

谷歌地图与多个svg图标和infowindows

1 个答案: