2014-09-10 2 views
0

Я пытаюсь создать карту с несколькими маркерами. У каждого маркера будет его инфо-окно. Я следил за всеми данными GoogleMaps, а информация по-прежнему не отображается.Множественные маркеры с инфо-окном не отображаются в GoogleMaps

В этом коде, который я вам дам, я создаю только 3 маркера с собственной функцией «PintaMarker». Эта функция создает маркер и добавляет его слушателя с информацией о infowindow и помещает маркер в мой «маркерный массив», называемый маркерами.

Когда я заканчиваю создание маркеров, я создаю MarkerClusterer для использования и просмотра всех создаваемых вами маркеров.

Может ли кто-нибудь взглянуть на мой код и дать мне руку?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ca" lang="ca"> 
<head> 
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
    <title>Markers Map</title> 

    <script src="http://code.jquery.com/jquery-latest.js"></script> 
    <!--script src="js/bootstrap.js"></script--> 
    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> 
    <script type="text/javascript" src="http://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerclusterer/src/markerclusterer_compiled.js"></script> 


</head> 
<body> 
    <div id="map1" style="width:100%; height: 913px"></div> 
</body> 
<script> 
     var markers = []; 
     var map1=null; 
     var geocoder; 
     var infowindow = new google.maps.InfoWindow(); 

     function pintaMarker(lat,lng,html){ 
      var myLatLng = new google.maps.LatLng(lat, lng); 
      var marker = new google.maps.Marker({ 
       position: myLatLng, 
       map: map1, 
      }); 

      google.maps.event.addListener(marker, 'click', function(){ 
       infowindow.setOptions({ 
        content: html 
       }); 
       infowindow.open(map1,marker); 
       console.log(infowindow); 
      }); 
      markers.push(marker); 
     } 

     $(document).ready(function() { 
      //var center = new google.maps.LatLng(41.644183,1.620483); 
      geocoder = new google.maps.Geocoder(); 
      var center = new google.maps.LatLng(41.38257066,2.15659028); 
      var options = { 
       zoom: 16, 
       center: center, 
       mapTypeId: google.maps.MapTypeId.ROADMAP 
      }; 

      var map1 = new google.maps.Map(document.getElementById("map1"), options); 

      pintaMarker(41.385, 2.154, 'hola'); 
     pintaMarker(41.387, 2.1529, 'hola2'); 
     pintaMarker(41.38254, 2.1562, 'hola3'); 

      var markerCluster = new MarkerClusterer(map1, markers); 
     }); 
    </script> 
</html> 

Спасибо!

ответ

1

Поршня ist это в вашей функции pintaMarkermap1 объект null!

Решение:

Передайте объект карты в качестве параметра для вашей pintaMarker так:

pintaMarker(41.385, 2.154, 'hola', map1); 

и обновления вы действуете на:

function pintaMarker(lat,lng,html, map1){ 
     var myLatLng = new google.maps.LatLng(lat, lng); 
     var marker = new google.maps.Marker({ 
      position: myLatLng, 
      map: map1, 
     }); 

     google.maps.event.addListener(marker, 'click', function(){ 
      infowindow.setOptions({ 
       content: html 
      }); 
      infowindow.open(map1, marker); 
      console.log(infowindow); 
     }); 
     markers.push(marker); 
    } 

теперь объект карты доступен !

+0

спасибо! Я также нашел другое исправление. Я объявляю var map1 дважды! один как глобальная переменная, а другой объявлен внутри функции $ (document) .ready. Я думаю, именно поэтому объект был нулевым. – Ricardmc

+0

Добро пожаловать! –

Смежные вопросы