2015-12-12 44 views
1

我做了按鈕,每個按鈕指的是地圖上的位置,它工作正常,不是很好的方式,但它的作品,,但當我試圖添加一個信息窗口,將出現在標記上它不起作用,我不知道爲什麼!信息窗口不起作用谷歌地圖

<!DOCTYPE html> 
<html> 
    <head> 
    <meta charset="utf-8"> 
    <title>Marker animations with <code>setTimeout()</code></title> 
    <style> 
     html, body { 
     height: 100%; 
     margin: 0; 
     padding: 0; 
     } 
     #map { 
     height: 100%; 
     } 
#floating-panel { 
    position: absolute; 
    top: 10px; 
    left: 25%; 
    z-index: 5; 
    background-color: #fff; 
    padding: 5px; 
    border: 1px solid #999; 
    text-align: center; 
    font-family: 'Roboto','sans-serif'; 
    line-height: 30px; 
    padding-left: 10px; 
} 

     #floating-panel { 
     margin-left: -52px; 
     } 
    </style> 
    </head> 
    <body> 
    <div id="floating-panel"> 
     <button id="drop" onclick="drop()">Nasr City</button> 
     <button id="drop" onclick="drop1()">Shorouk</button> 
     <button id="drop" onclick="drop()">Shubra</button> 
     <button id="drop" onclick="drop()">Future University</button> 
     <button id="drop" onclick="drop()">Drop Markers</button> 

    </div> 
    <div id="map"></div> 
    <script> 

// If you're adding a number of markers, you may want to drop them on the map 
// consecutively rather than all at once. This example shows how to use 
// window.setTimeout() to space your markers' animation. 

var neighborhoods = [ 
    {lat: 52.511, lng: 13.447} 
]; 
var neighborhoods1 = [ 
    {lat: 52.520, lng: 13.410} 
]; 

var markers = []; 
var map; 

function initMap() { 
    map = new google.maps.Map(document.getElementById('map'), { 
    zoom: 12, 
    center: {lat: 52.520, lng: 13.410} 
    }); 
} 

function drop() { 
    clearMarkers(); 
    for (var i = 0; i < neighborhoods.length; i++) { 
    addMarkerWithTimeout(neighborhoods[i], i * 200); 
    } 
    marker.addListener('click', function() { 
    infowindow.open(map, marker); 
    }); 

} 
function drop1() { 
    clearMarkers(); 
    for (var i = 0; i < neighborhoods1.length; i++) { 
    addMarkerWithTimeout(neighborhoods1[i], i * 200); 
    } 
    t 
} 

function addMarkerWithTimeout(position, timeout) { 
    window.setTimeout(function() { 
    markers.push(new google.maps.Marker({ 
     position: position, 
     map: map, 
     animation: google.maps.Animation.DROP 
    })); 
    }, timeout); 
} 

function clearMarkers() { 
    for (var i = 0; i < markers.length; i++) { 
    markers[i].setMap(null); 
    } 
    markers = []; 
} 


var contentString = '<div id="content">'+ 
     '<div id="siteNotice">'+ 
     '</div>'+ 
     '<h1 id="firstHeading" class="firstHeading">Uluru</h1>'+ 
     '<div id="bodyContent">'+ 
     '<p><b>Uluru</b>, also referred to as <b>Ayers Rock</b>, is a large ' + 
     'sandstone rock formation in the southern part of the '+ 
     'Northern Territory, central Australia. It lies 335&#160;km (208&#160;mi) '+ 
     'south west of the nearest large town, Alice Springs; 450&#160;km '+ 
     '(280&#160;mi) by road. Kata Tjuta and Uluru are the two major '+ 
     'features of the Uluru - Kata Tjuta National Park. Uluru is '+ 
     'sacred to the Pitjantjatjara and Yankunytjatjara, the '+ 
     'Aboriginal people of the area. It has many springs, waterholes, '+ 
     'rock caves and ancient paintings. Uluru is listed as a World '+ 
     'Heritage Site.</p>'+ 
     '<p>Attribution: Uluru, <a href="https://en.wikipedia.org/w/index.php?title=Uluru&oldid=297882194">'+ 
     'https://en.wikipedia.org/w/index.php?title=Uluru</a> '+ 
     '(last visited June 22, 2009).</p>'+ 
     '</div>'+ 
     '</div>'; 

    var infowindow = new google.maps.InfoWindow({ 
    content: contentString 
    }); 

    var marker = new google.maps.Marker({ 
    position: uluru, 
    map: map, 
    title: 'Uluru (Ayers Rock)' 
    }); 



    </script> 
    <script async defer 
     src="https://maps.googleapis.com/maps/api/js?key=AIzaSyC1CJHONRDvyfSS3xAOG9SfW_VCXMoLK5Y&signed_in=true&callback=initMap"></script> 
    </body> 
</html> 
+0

'未捕獲的ReferenceError:烏魯魯不defined' – geocodezip

回答

0

必須添加信息窗口映射對象

google.maps.event.addListener(window, 'load', infowindow.open(map, marker)); 
+0

必須在其中我添加呢? –

0

這將打開信息窗口上的一個標記:

function addMarkerWithTimeout(position, timeout) { 
    window.setTimeout(function() { 
    var marker = new google.maps.Marker({ 
     position: position, 
     map: map, 
     animation: google.maps.Animation.DROP 
    }); 
    google.maps.event.addListener(window, 'load', function(evt) { 
     infowindow.open(map, marker)); 
    }); 
    markers.push(marker); 
    }, timeout); 
} 

你只用一個固定的內容定義一個信息窗口,所以它將是每個標記的相同信息。

代碼片段:

// If you're adding a number of markers, you may want to drop them on the map 
 
// consecutively rather than all at once. This example shows how to use 
 
// window.setTimeout() to space your markers' animation. 
 

 
var neighborhoods = [{ 
 
    lat: 52.511, 
 
    lng: 13.447 
 
}]; 
 
var neighborhoods1 = [{ 
 
    lat: 52.520, 
 
    lng: 13.410 
 
}]; 
 
var uluru = {lat: -25.363, lng: 131.044}; 
 
var markers = []; 
 
var map; 
 

 
function initMap() { 
 
    map = new google.maps.Map(document.getElementById('map'), { 
 
    zoom: 12, 
 
    center: { 
 
     lat: 52.520, 
 
     lng: 13.410 
 
    } 
 
    }); 
 
} 
 

 
function drop() { 
 
    clearMarkers(); 
 
    for (var i = 0; i < neighborhoods.length; i++) { 
 
    addMarkerWithTimeout(neighborhoods[i], i * 200); 
 
    } 
 
    marker.addListener('click', function() { 
 
    infowindow.open(map, marker); 
 
    }); 
 

 
} 
 

 
function drop1() { 
 
    clearMarkers(); 
 
    for (var i = 0; i < neighborhoods1.length; i++) { 
 
    addMarkerWithTimeout(neighborhoods1[i], i * 200); 
 
    } 
 
} 
 

 
function addMarkerWithTimeout(position, timeout) { 
 
    window.setTimeout(function() { 
 
    var marker = new google.maps.Marker({ 
 
     position: position, 
 
     map: map, 
 
     animation: google.maps.Animation.DROP 
 
    }); 
 
    markers.push(marker); 
 
    google.maps.event.addListener(marker, 'click', function(evt) { 
 
     infowindow.open(map, marker) 
 
    }) 
 
    }, timeout); 
 
} 
 

 
function clearMarkers() { 
 
    for (var i = 0; i < markers.length; i++) { 
 
    markers[i].setMap(null); 
 
    } 
 
    markers = []; 
 
} 
 

 

 
var contentString = '<div id="content">' + 
 
    '<div id="siteNotice">' + 
 
    '</div>' + 
 
    '<h1 id="firstHeading" class="firstHeading">Uluru</h1>' + 
 
    '<div id="bodyContent">' + 
 
    '<p><b>Uluru</b>, also referred to as <b>Ayers Rock</b>, is a large ' + 
 
    'sandstone rock formation in the southern part of the ' + 
 
    'Northern Territory, central Australia. It lies 335&#160;km (208&#160;mi) ' + 
 
    'south west of the nearest large town, Alice Springs; 450&#160;km ' + 
 
    '(280&#160;mi) by road. Kata Tjuta and Uluru are the two major ' + 
 
    'features of the Uluru - Kata Tjuta National Park. Uluru is ' + 
 
    'sacred to the Pitjantjatjara and Yankunytjatjara, the ' + 
 
    'Aboriginal people of the area. It has many springs, waterholes, ' + 
 
    'rock caves and ancient paintings. Uluru is listed as a World ' + 
 
    'Heritage Site.</p>' + 
 
    '<p>Attribution: Uluru, <a href="https://en.wikipedia.org/w/index.php?title=Uluru&oldid=297882194">' + 
 
    'https://en.wikipedia.org/w/index.php?title=Uluru</a> ' + 
 
    '(last visited June 22, 2009).</p>' + 
 
    '</div>' + 
 
    '</div>'; 
 

 
var infowindow = new google.maps.InfoWindow({ 
 
    content: contentString 
 
}); 
 

 
var marker = new google.maps.Marker({ 
 
    position: uluru, 
 
    map: map, 
 
    title: 'Uluru (Ayers Rock)' 
 
}); 
 
google.maps.event.addDomListener(window, 'load', initMap)
html, 
 
body { 
 
    height: 100%; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
#map { 
 
    height: 100%; 
 
} 
 

 
#floating-panel { 
 
    position: absolute; 
 
    top: 10px; 
 
    left: 25%; 
 
    z-index: 5; 
 
    background-color: #fff; 
 
    padding: 5px; 
 
    border: 1px solid #999; 
 
    text-align: center; 
 
    font-family: 'Roboto', 'sans-serif'; 
 
    line-height: 30px; 
 
    padding-left: 10px; 
 
} 
 

 
#floating-panel { 
 
    margin-left: -52px; 
 
}
<script src="https://maps.googleapis.com/maps/api/js"></script> 
 
<div id="floating-panel"> 
 
    <button id="drop" onclick="drop()">Nasr City</button> 
 
    <button id="drop" onclick="drop1()">Shorouk</button> 
 
    <button id="drop" onclick="drop()">Shubra</button> 
 
    <button id="drop" onclick="drop()">Future University</button> 
 
    <button id="drop" onclick="drop()">Drop Markers</button> 
 

 
</div> 
 
<div id="map"></div>

+0

我試過所有在一個頁面,但仍然沒有信息頁面打開,我把我的新代碼在評論中,請檢查它,謝謝 –

+0

我的答案中的代碼片段不工作? – geocodezip

+0

它的工作正常,但是當我試圖合併所有在一個文件中,它不起作用,我可以知道原因嗎? –