时间戳

首页 > 解决方案 > SnazzyInfoWindow 不显示在地图上

jquery - SnazzyInfoWindow 不显示在地图上

问题描述

请帮我理解。通过单击标记，信息窗口不会出现在地图上。我使用谷歌地图，并SnazzyInfoWindow完全自定义弹出窗口

 function initialize() {

  var options = {
      zoom: 13,
      center: new google.maps.LatLng(38.885765, -77.047563),
      mapTypeId: google.maps.MapTypeId.ROADMAP,
      scrollwheel: false,
      mapTypeControl: false,
      streetViewControl: false,
      zoomControl: true,
      zoomControlOptions: {
        position: google.maps.ControlPosition.RIGHT_BOTTOM
      }
    };

  map = new google.maps.Map(document.getElementById('map'), options);

  var info = new SnazzyInfoWindow({
    marker: marker,
    content: 'content',
  });

  var marker = new google.maps.Marker({
    position: new google.maps.LatLng(38.885765, -77.047563), 
    map: map,
    icon: blueIcon
  });

  google.maps.event.addListener(marker, 'click', function() {
    info.open(map, marker);
  });
}

标签： jqueryinfowindow

解决方案

提供的示例有两个问题，在创建信息窗口实例时，标记尚未初始化： 

var info = new SnazzyInfoWindow({
    marker: marker, //<-- marker is not yet initialized at this moment
    content: 'Some content goes here',
});

这基本上是无法打开信息窗口的原因

另一个是关于open函数的，根据源代码它不接受任何参数，因此需要将其替换为： 

google.maps.event.addListener(marker, 'click', function () {
    info.open();
});

演示

function initialize() {

    var options = {
        zoom: 13,
        center: new google.maps.LatLng(38.885765, -77.047563),
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        scrollwheel: false,
        mapTypeControl: false,
        streetViewControl: false,
        zoomControl: true,
        zoomControlOptions: {
            position: google.maps.ControlPosition.RIGHT_BOTTOM
        }
    };

    map = new google.maps.Map(document.getElementById('map'), options);


    
 
    var marker = new google.maps.Marker({
        position: new google.maps.LatLng(38.885765, -77.047563),
        map: map,
        //icon: blueIcon
    });


    var info = new SnazzyInfoWindow({
        marker: marker,
        content: 'Some content goes here',
    });

    

    google.maps.event.addListener(marker, 'click', function () {
        info.open();
    });
}

google.maps.event.addDomListener(window, 'load', initialize);
#map{
    width: 640px;
    height: 480px;
  }
<script src="https://maps.googleapis.com/maps/api/js?key="></script>
<link rel="stylesheet" href="https://rawgit.com/atmist/snazzy-info-window/master/dist/snazzy-info-window.css">
<script src="https://rawgit.com/atmist/snazzy-info-window/master/dist/snazzy-info-window.min.js"></script>

<div id='map'></div>

推荐阅读