带有多个SVG图标和信息窗口的Google Map

google-maps svg infowindow

356 观看

1回复

51 作者的声誉

我有一个运行良好的GoogleMap,可以将SVG图标用作标记。我现在遇到的问题是如何将信息窗口分配给每个位置。

我一直在浏览有关添加信息窗口的多个指南,可以轻松地使用新的新地图并使用库存标准标记来完成此操作,但是,每当我尝试通过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,
        });
    }); 
}
作者: mobius2000 的来源 发布者: 2017 年 9 月 15 日

回应 1


1

133274 作者的声誉

决定
  1. 将点击侦听器添加到标记。
  2. 单击标记后,打开信息窗口。
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);
  })
});

概念证明

屏幕截图

代码段:

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>

作者: geocodezip 发布者: 2017 年 9 月 15 日
32x32