0

我正在尝试使用 google api 让标记显示在样式化的 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);

我在萤火虫中没有错误，但没有出现任何标记。

如果我改变这个：

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

至

map: map,

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

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

谢谢你！

4

1 回答 1

0

代替 GMaps 使用 google.maps.Map 创建地图试试这个链接。这可能会对您有所帮助。

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);
        });
    }

  }
于 2013-02-14T04:04:22.817 回答