Почему моя информация в Google Maps Javascript API не работает?

-1

Я хочу научиться внедрять карты в своем веб-приложении. Мне нужна базовая функция, например, добавить несколько маркеров, маркер costum, costum infowindow и т. д. я сделал до добавления маркера costum. когда я хочу установить infowindow для каждого маркера, он все еще не работает, кто-нибудь может помочь мне получить решение? спасибо ...Почему моя информация в Google Maps Javascript API не работает?

вот мой код:

<!DOCTYPE html> 
<html> 
<head> 
<title>Styling the Base Map</title> 
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"> 
<meta charset="utf-8"> 
<style> 
    html, body, #map { 
    margin: 0; 
    padding: 0; 
    height: 100%; 
    } 
    #legend { 
    font-family: Arial, sans-serif; 
    background: #fff; 
    padding: 10px; 
    margin: 10px; 
    border: 3px solid #000; 
    } 
    #legend h3 { 
    margin-top: 0; 
    } 
    #legend img { 
    vertical-align: middle; 
    } 
</style> 
<script> 
    var map; 
    function initialize() { 
    map = new google.maps.Map(document.getElementById('map'), { 
     zoom: 18, 
     center: new google.maps.LatLng(-8.704956, 115.22750), 
     mapTypeId: google.maps.MapTypeId.ROADMAP, 
    mapTypeControl: true, 
    mapTypeControlOptions: { 
     style: google.maps.MapTypeControlStyle.DROPDOWN_MENU, 
     position: google.maps.ControlPosition.TOP_CENTER 
    } 
    }); 
    var trafficLayer = new google.maps.TrafficLayer(); 
    trafficLayer.setMap(map); 
    var infowindow = new google.maps.InfoWindow(); 

    var iconBase = 'https://maps.google.com/mapfiles/kml/shapes/'; 
    var icons = { 
     parking: { 
     name: 'Parking', 
     icon: iconBase + 'parking_lot_maps.png' 
     }, 
     library: { 
     name: 'Library', 
     icon: iconBase + 'library_maps.png' 
     }, 
     info: { 
     name: 'Info', 
     icon: iconBase + 'info-i_maps.png' 
     } 
    }; 

    function addMarker(feature) { 
     var marker = new google.maps.Marker({ 
     position: feature.position, 
     icon: icons[feature.type].icon, 
     map: map 
     }); 
    } 



    var features = [ 
     { 
     position: new google.maps.LatLng(-8.702709, 115.224461), 
     type: 'info' 
     }, { 
     position: new google.maps.LatLng(-33.91539, 151.22820), 
     type: 'info' 
     }, { 
     position: new google.maps.LatLng(-33.91747, 151.22912), 
     type: 'info' 
     }, { 
     position: new google.maps.LatLng(-33.91910, 151.22907), 
     type: 'info' 
     }, { 
     position: new google.maps.LatLng(-33.91725, 151.23011), 
     type: 'info' 
     }, { 
     position: new google.maps.LatLng(-33.91872, 151.23089), 
     type: 'info' 
     }, { 
     position: new google.maps.LatLng(-33.91784, 151.23094), 
     type: 'info' 
     }, { 
     position: new google.maps.LatLng(-33.91682, 151.23149), 
     type: 'info' 
     }, { 
     position: new google.maps.LatLng(-33.91790, 151.23463), 
     type: 'info' 
     }, { 
     position: new google.maps.LatLng(-33.91666, 151.23468), 
     type: 'info' 
     }, { 
     position: new google.maps.LatLng(-33.916988, 151.233640), 
     type: 'info' 
     }, { 
     position: new google.maps.LatLng(-33.91662347903106, 151.22879464019775), 
     type: 'parking' 
     }, { 
     position: new google.maps.LatLng(-33.916365282092855, 151.22937399734496), 
     type: 'parking' 
     }, { 
     position: new google.maps.LatLng(-33.91665018901448, 151.2282474695587), 
     type: 'parking' 
     }, { 
     position: new google.maps.LatLng(-33.919543720969806, 151.23112279762267), 
     type: 'parking' 
     }, { 
     position: new google.maps.LatLng(-33.91608037421864, 151.23288232673644), 
     type: 'parking' 
     }, { 
     position: new google.maps.LatLng(-33.91851096391805, 151.2344058214569), 
     type: 'parking' 
     }, { 
     position: new google.maps.LatLng(-33.91818154739766, 151.2346203981781), 
     type: 'parking' 
     }, { 
     position: new google.maps.LatLng(-33.91727341958453, 151.23348314155578), 
     type: 'library' 
     } 
    ]; 


    for (var i = 0, feature; feature = features[i]; i++) { 
     addMarker(feature); 
     google.maps.event.addListener(marker, 'click', (function(marker, i) { 
    return function() { 
     infowindow.setContent(feature[i]['type']); 
     infowindow.open(map, marker); 
    } 
    })(marker, i)); 
    } 



    var legend = document.getElementById('legend'); 
    for (var key in icons) { 
     var type = icons[key]; 
     var name = type.name; 
     var icon = type.icon; 
     var div = document.createElement('div'); 
     div.innerHTML = '<img src="' + icon + '"> ' + name; 
     legend.appendChild(div); 
    } 

    map.controls[google.maps.ControlPosition.RIGHT_BOTTOM].push(legend); 
    } 

</script> 
</head> 
<body> 
<div id="map"></div> 
    <script async defer 
    src="https://maps.googleapis.com/maps/api /js?callback=initialize"> 
</script> 
<div id="legend"><h3>Legend</h3></div> 
</body> 
</html>

источник

2016-06-02 IIM NUR DIANSYAH

Я получаю ошибку javascript 'Uncaught ReferenceError: маркер не определен' – geocodezip

ах я знаю, это потому, что я не определил маркер как глобальный variabel.thanks dude –

hi @geocodezip, как сделать, если хотите вот так: i есть кнопка. когда кнопка A нажимает, просто показывайте маркер A, когда я нажимаю B, скрывает маркер и показывает B Marker. у вас есть ссылка? –

Ваш код был почти там. Я изменил несколько вещей, чтобы заставить его работать ...

1) Я добавил недостающий глобальную переменную маркер (как указано в комментариях ниже вопрос):

<script> 
    var map, marker; 
    ...

2) Я изменил функцию addMarker, чтобы присвоить результат глобальных переменных маркеров не локальная переменная маркер:

function addMarker(feature) { 
    marker = new google.maps.Marker({ 
     position: feature.position, 
     icon: icons[feature.type].icon, 
     map: map 
    }); 
}

3) Я изменил свой код, который перебирает features и создает маркер и событие слушателя для каждого маркера следующим образом:

for (var i = 0; i < features.length; i++) { 
    addMarker(features[i]); 
    google.maps.event.addListener(marker, 'click', (function(marker, i) { 
     return function() { 
      infowindow.setContent(features[i]['type']); 
      infowindow.open(map, marker); 
     } 
    })(marker, i)); 
}

Для получения дополнительной информации см. this Plunkr.

Редактировать: Пункт № 3 выше Я переписал цикл более традиционным способом. Ниже также будет работать:

for (var i = 0, feature; feature = features[i]; i++) { 
    addMarker(feature); 
    google.maps.event.addListener(marker, 'click', (function(marker, i) { 
     return function() { 
      infowindow.setContent(features[i]['type']); 
      infowindow.open(map, marker); 
     } 
    })(marker, i)); 
}

Все, что я сделал здесь было изменить строку:

infowindow.setContent(feature[i]['type']);

к (обратите внимание features не feature):

infowindow.setContent(features[i]['type']);

См this Plunkr для демонстрации.

источник

2016-06-02 13:33:23

Почему моя информация в Google Maps Javascript API не работает?

ответ

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