标记不会出现在谷歌地图上——这是一个奇怪的错误

Question

我正在尝试使用googleapi让标记显示在样式化的googlemap中。

如果我这样尝试：

 function initialize() {
    var mapOptions = {
      zoom: 8,
      center: new google.maps.LatLng(51.49079, -0.10746),
      mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    var map = new GMaps({
                div: "#map1",
                lat: 41.895465,
                lng: 12.482324,
                zoom: 1, 
                zoomControl : true,
                zoomControlOpt: {
                    style : "SMALL",
                    position: "TOP_LEFT"
                },
                panControl : true,
                streetViewControl : false,
                mapTypeControl: false,
                overviewMapControl: false
            });

    var styles = [
                    {
                    featureType: "road",
                    stylers: [
                          { "hue": "#ff0000" },
                          { "lightness": -11 },
                          { "saturation": -5 }
                  ]
                }, {
                    featureType: "road",
                        stylers: [
                         { "saturation": -26 }
                  ]
                }
            ];
    map.addStyle({
                styledMapName:"Styled Map",
                styles: styles,
                mapTypeId: "map_style"  
            });
    map.setStyle("map_style");
    // Add 5 markers to the map at random locations
    var southWest = new google.maps.LatLng(-31.203405, 125.244141);
    var northEast = new google.maps.LatLng(-25.363882, 131.044922);
    //var bounds = new google.maps.LatLngBounds(southWest, northEast);
    //map.fitBounds(bounds);

    var cities = [
    {
      name: 'London',
      position: new google.maps.LatLng(51.49079,-0.10746),
      info: 'Bewohner: 7,556,900'
    },
    {
      name: 'Paris',
      position: new google.maps.LatLng(48.856667,2.350987),
      info: 'Bewohner: 2,193,031'
    },
    {
      name: 'Berlin',
      position: new google.maps.LatLng(52.523405,13.4114),
      info: 'Bewohner: 3,439,100'
    }        
  ];

  cities.forEach(function(element, index, array) {
    var marker = new google.maps.Marker({
      position: element.position,
      map: map[0],
      title: element.name
    });    
    var infoWindow = new google.maps.InfoWindow({
      content: element.info
    });
    google.maps.event.addListener(marker, 'click', function() {
      infoWindow.open(map, marker);
    });
  });


  }

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

我在firebug中没有错误，但没有出现标记。

如果我改变这个：

var marker = new google.maps.Marker({
      position: element.position,
      map: map[0],

至

map: map,

我收到一条错误消息，属性映射的值无效。

我的代码中的错误在哪里？

谢谢！

Answer 1

使用google.maps.Map创建地图而不是GMap试试这个链接。这可能会对你有所帮助。

https://developers.google.com/maps/documentation/javascript/overlays?hl=en#Markers

已编辑您的代码

var marker;
  var map;
  function initialize() {
    var mapOptions = {
                      zoom: 4,
                      center: new google.maps.LatLng(51.49079, -0.10746),
                      mapTypeId: google.maps.MapTypeId.ROADMAP
                    };
    map = new google.maps.Map(document.getElementById('map_canvas'),
            mapOptions);
    var styles = [
                {
                featureType: "road",
                stylers: [
                      { "hue": "#ff0000" },
                      { "lightness": -11 },
                      { "saturation": -5 }
              ]
            }, {
                featureType: "road",
                    stylers: [
                     { "saturation": -26 }
              ]
            }
        ];
    map.setOptions({styles: styles});
    var cities = [
                {
                  name: 'London',
                  position: new google.maps.LatLng(51.49079,-0.10746),
                  info: 'Bewohner: 7,556,900'
                },
                {
                  name: 'Paris',
                  position: new google.maps.LatLng(48.856667,2.350987),
                  info: 'Bewohner: 2,193,031'
                },
                {
                  name: 'Berlin',
                  position: new google.maps.LatLng(52.523405,13.4114),
                  info: 'Bewohner: 3,439,100'
                }        
              ];
    for(var i=0;i<cities.length;i++)
    {
        var element=cities[i];
        var marker = new google.maps.Marker({
          position: element.position,
          map: map,
          title: element.name
        });    
        var infoWindow = new google.maps.InfoWindow({
          content: element.info
        });
        google.maps.event.addListener(marker, 'click', function() {
          infoWindow.open(map, marker);
        });
    }
  }