谷歌地图API 3 / javascript:标记突然变得无形

时间:2012-12-09 18:53:33

标签: javascript google-maps google-maps-api-3

我创建了一个带有自定义标记的谷歌地图。

该项目自10个月以来一直在线。一切都很好,突然所有自定义标记都变得不可见了。

之前,地图是这样的:

enter image description here

我最近没有改变代码。我恢复了备份,问题仍然存在。

你能帮我理解发生了什么吗?

Click here to see the google map project online.

要使用地图,只需点击地图底部的链接(Invisibles_décalcomaniexx)即可。链接将地图移动到坐标。

我注意到了一些事情。如果用户缩小地图,可以看到标记(见图)。但是如果用户放大,它们就在错误的位置并消失。

Google map issue, no markers can be seen

这是一个错误吗?我的代码可能错了。或者谷歌最近改变了一些API?

Javascript代码(可以在源代码底部的演示中看到):

    var markerArray = [];

    function initialize() {

    // Tableau images avatars
    var myLatlng = [
    // Ligne vide sinon décalage dans la boucle pour remplir tableau locations
      [47.263167,-1.579706,300,201,300,201],
      [47.264108,-1.575928,134,201,300,201],
      [47.265203,-1.581125,300,201,300,201],
      [47.259506,-1.568975,300,201,300,201],
      [47.254894,-1.565697,300,201,300,201],
      [47.254617,-1.576264,300,201,134,201],
      [47.261639,-1.571083,300,201,300,201],
      [47.253819,-1.574989,300,201,300,201],
      [47.256592,-1.575986,300,201,300,201],//9
      [47.259722,-1.575022,300,201,180,201],//10
      [47.262311,-1.577317,300,201,300,201],//11
      [47.258419,-1.566647,300,201,300,201],//12
      [47.26115,-1.570781,300,201,300,201],//13
      [47.261325,-1.566986,300,201,300,201],//14
      [47.260411,-1.565275,300,201,300,201],//15
      [47.255786,-1.571194,300,201,300,201],//16
      [47.252592,-1.568464,300,201,300,201],//17
      [47.261639,-1.582647,300,201,300,201],//18
      [47.255919,-1.569056,300,201,300,201],//19
      [47.260525,-1.574483,300,201,300,201],//20
      [47.25915,-1.566611,300,201,300,201],//21
      [47.264331,-1.576933,300,201,300,201],//22
      [47.257569,-1.576986,300,201,300,201],//23
      [47.258964,-1.578256,300,201,300,201],//24
      [47.260611,-1.563364,300,201,300,201],//25
      [47.252789,-1.566597,300,201,300,201],//26
      [47.253031,-1.569664,300,201,300,201],//27
      [47.258797,-1.573606,300,201,300,201],//28
      [47.261233,-1.573161,300,201,300,201],//29
      [47.264911,-1.578775,300,201,300,201],//30
      [47.265519,-1.578975,300,201,300,201],//31
      [47.264847,-1.575,300,201,300,201],//32
      [47.258528,-1.568064,300,201,300,201],//33 en attente erreur
      [47.261619,-1.572919,300,201,300,201],//34
      [47.261642,-1.573192,300,201,300,201],//35
      [47.263653,-1.578083,300,201,300,201]
    ];

        // contient le html
        var locationsInfos;
        //Tableau contient les infos relatives au markeurs, etc.
        var locations = [];

        //Boucle pour remplir le tableau
        for (j = 0; j < 35; j++) { 
        //alert(myLatlng[j][2]); 
        //alert('width : '+myLatlng[j][2]);

        locationsInfos = '<div class="popup">Arnaud Théval<br/>Invisibles_décalcomanie '+j+'/36<br/>2012<br/><a href="http://www.arnaudtheval.com/1-46-invisibles-decalcomanie.php" target="_blank" >en savoir +</a><br/><br/><a href="google-map/img/photos/THEVAL-decalcomanie-'+j+'a.jpg" class="fancybox" title="Invisibles_décalcomanie '+j+'" ><img src="google-map/img/THEVAL-decalcomanie-'+j+'a.jpg" width="'+myLatlng[j][2]+'" height="'+myLatlng[j][3]+'"/></a><a href="google-map/img/photos/THEVAL-decalcomanie-'+j+'b.jpg" class="fancybox" title="Invisibles_décalcomanie '+j+'"><img class="image_2" src="google-map/img/THEVAL-decalcomanie-'+j+'b.jpg" width="'+myLatlng[j][4]+'" height="'+myLatlng[j][5]+'"/></a></div>';

      //On remplit le tableau
        locations.push([locationsInfos, myLatlng[j][0], myLatlng[j][1], 4,'google-map/img/'+j+'-avatar.png']);
    };// en of loop

    var map = new google.maps.Map(document.getElementById('map'), {
      zoom: 14,
      center: new google.maps.LatLng(47.259981,-1.575233, 4),
          mapTypeControl: true,
        mapTypeControlOptions: {
      style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
    },
    navigationControl: true,
     navigationControlOptions: {
        style: google.maps.NavigationControlStyle.SMALL,
        position: google.maps.ControlPosition.TOP_RIGHT
    },
        scaleControl: true,
    streetViewControl: false,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    });

    var infowindow = new google.maps.InfoWindow();

    var marker, i;

    //var point = 0;

    // Boucle création marqueurs
    // Loop create markers
   for (i = 0; i < locations.length; i++) { 
      marker = new google.maps.Marker({
        position: new google.maps.LatLng(locations[i][1], locations[i][2]),
        icon: new google.maps.MarkerImage(locations[i][4], new google.maps.Size(60,130), new google.maps.Point(0,0), new google.maps.Point(0, 150)),
        map: map
      });

      // Tableau : on stock les objets markers
      // Array : markers object
      markerArray.push(marker);

      google.maps.event.addListener(marker, 'click', (function(marker, i) {
        return function() {
          infowindow.setContent(locations[i][0]);
          infowindow.open(map, marker);
        }
      })(marker, i));
    }

    // test

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

    }

    // This function picks up the click and opens the corresponding info window
    function openMarker(i) {         
         //To force the click, 
         //you need to call google.maps.event.trigger 
         //which takes two params (instance, event)
         google.maps.event.trigger(markerArray[i], 'click');
         //map.setCenter(marker.position);
}

1 个答案:

答案 0 :(得分:4)

您的地图使用的是Google Maps API v3的v3.10 the "released" version。一旦成为“发布”版本,就会出现许多标记问题。作为测试,尝试将版本硬编码为3.9。为此,请更改此行:

<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>

<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?v=3.9&sensor=false"></script>

如果有效,请提出issue(或明星和现有的),因为在大约6个月内,v3.9会一直消失(当3.10变为“冻结”时)。

MarkerImage类最近也被弃用,取而代之的是"Icon" object