Question

我现在有点问题，我为我的地图创建了一个自定义样式，但我想让它显示一个信息窗口。我把它设置为实际的纬度和长度，但它似乎不会以某种方式出现。

有人可以帮我一把吗？

    //Google maps Javascript, APi V3    
    var map;
    var sydney = new google.maps.LatLng(-33.866652,151.063670);

    var MY_MAPTYPE_ID = 'custom_style';

    function initialize() {

      var featureOpts = [
        {
          stylers: [
            { hue: '#fdc43d' },
          ]
        }           
      ];

      var mapOptions = {
        zoom: 13,
        center: sydney,
        mapTypeControlOptions: {
          mapTypeIds: [google.maps.MapTypeId.ROADMAP, MY_MAPTYPE_ID]
        },
        mapTypeId: MY_MAPTYPE_ID
      };

      var contentString = '<div id="content">'+
          '<div id="siteNotice">'+
          '</div>'+
          '<h1 id="firstHeading" class="firstHeading">Uluru</h1>'+
          '<div id="bodyContent">'+
          '<p><b>Uluru</b>, also referred to as <b>Ayers Rock</b>, is a large ' +
          'sandstone rock formation in the southern part of the '+
          'Northern Territory, central Australia. It lies 335&#160;km (208&#160;mi) '+
          'south west of the nearest large town, Alice Springs; 450&#160;km '+
          '(280&#160;mi) by road. Kata Tjuta and Uluru are the two major '+
          'features of the Uluru - Kata Tjuta National Park. Uluru is '+
          'sacred to the Pitjantjatjara and Yankunytjatjara, the '+
          'Aboriginal people of the area. It has many springs, waterholes, '+
          'rock caves and ancient paintings. Uluru is listed as a World '+
          'Heritage Site.</p>'+
          '<p>Attribution: Uluru, <a href="http://en.wikipedia.org/w/index.php?title=Uluru&oldid=297882194">'+
          'http://en.wikipedia.org/w/index.php?title=Uluru</a> '+
          '(last visited June 22, 2009).</p>'+
          '</div>'+
          '</div>';

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

      var marker = new google.maps.Marker({
          position: sydney,
          map: map,
          title: 'Uluru (Ayers Rock)'
      });   

      var styledMapOptions = {
        name: 'Custom Style'
      };

      var customMapType = new google.maps.StyledMapType(featureOpts, styledMapOptions); 

      map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions); 

      map.mapTypes.set(MY_MAPTYPE_ID, customMapType);

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

    google.maps.event.addDomListener(window, 'load', initialize);

}）;

谢谢！

Answer 1

当您单击标记时InfoWindow当前将打开，但标记未显示，因为在您创建标记时尚未初始化地图。

固定代码：

//Google maps Javascript, APi V3    
var map;
var sydney = new google.maps.LatLng(-33.866652,151.063670);

var MY_MAPTYPE_ID = 'custom_style';

function initialize() {

  var featureOpts = [
    {
      stylers: [
        { hue: '#fdc43d' },
      ]
    }           
  ];

  var mapOptions = {
    zoom: 13,
    center: sydney,
    mapTypeControlOptions: {
      mapTypeIds: [google.maps.MapTypeId.ROADMAP, MY_MAPTYPE_ID]
    },
    mapTypeId: MY_MAPTYPE_ID
  };

  var contentString = '<div id="content">'+
      '<div id="siteNotice">'+
      '</div>'+
      '<h1 id="firstHeading" class="firstHeading">Uluru</h1>'+
      '<div id="bodyContent">'+
      '<p><b>Uluru</b>, also referred to as <b>Ayers Rock</b>, is a large ' +
      'sandstone rock formation in the southern part of the '+
      'Northern Territory, central Australia. It lies 335&#160;km (208&#160;mi) '+
      'south west of the nearest large town, Alice Springs; 450&#160;km '+
      '(280&#160;mi) by road. Kata Tjuta and Uluru are the two major '+
      'features of the Uluru - Kata Tjuta National Park. Uluru is '+
      'sacred to the Pitjantjatjara and Yankunytjatjara, the '+
      'Aboriginal people of the area. It has many springs, waterholes, '+
      'rock caves and ancient paintings. Uluru is listed as a World '+
      'Heritage Site.</p>'+
      '<p>Attribution: Uluru, <a href="http://en.wikipedia.org/w/index.php?title=Uluru&oldid=297882194">'+
      'http://en.wikipedia.org/w/index.php?title=Uluru</a> '+
      '(last visited June 22, 2009).</p>'+
      '</div>'+
      '</div>';

  var infowindow = new google.maps.InfoWindow({
      content: contentString
  });
  //create the map before the marker
  map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions); 

  var marker = new google.maps.Marker({
      position: sydney,
      map: map,
      title: 'Uluru (Ayers Rock)'
  });   

  var styledMapOptions = {
    name: 'Custom Style'
  };

  var customMapType = new google.maps.StyledMapType(featureOpts, styledMapOptions); 



  map.mapTypes.set(MY_MAPTYPE_ID, customMapType);

    google.maps.event.addListener(marker, 'click', function() {
     infowindow.open(map,marker);
    });
    //triggering the marker-click will open the InfoWindow
    google.maps.event.trigger(marker,'click')
}

google.maps.event.addDomListener(window, 'load', initialize);

Google Map API信息窗口

1 个答案: