2016-01-06 29 views
-1

我在使用Google地圖API(javascript)的標記選項的狀態下找到了32個位置(區域)。另外我想通過點擊標記來放大位置(區域)。但當我點擊標記它是不縮放確切的位置(區)我標記。請幫助我解決方案。縮放選項在單擊標記時未找到標記的位置

我已經發布我下面的代碼:

<!DOCTYPE html> 
 
<html> 
 
    <head> 
 
    <title>marker</title> 
 
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no"> 
 
    <meta charset="utf-8"> 
 
    
 
\t </head> 
 
\t \t <body> 
 
\t \t \t <div id="map" style="width: 1366px; height: 700px;"></div> 
 
\t \t \t <script> 
 
\t 
 
\t \t \t \t \t var minZoomLevel = 7; 
 
\t \t \t \t \t 
 
\t \t \t \t function initMap() { 
 
\t \t \t \t \t \t var myLatlng = { 
 
\t \t \t \t \t \t \t lat: 11.127123, 
 
\t \t \t \t \t \t \t lng: 78.656894 
 
\t \t \t \t \t \t }; 
 

 
\t \t \t \t \t \t var map = new google.maps.Map(document.getElementById('map'), { 
 
\t \t \t \t \t \t \t zoom: minZoomLevel, 
 
\t \t \t \t \t \t \t center: myLatlng, 
 
\t \t \t \t \t \t \t mapTypeId: google.maps.MapTypeId.HYBRID 
 
\t \t \t \t \t \t }); 
 

 
\t \t \t \t \t \t var emptyStyles = [{ 
 
\t \t \t \t \t \t \t featureType: "all", 
 
\t \t \t \t \t \t \t elementType: "labels", 
 
\t \t \t \t \t \t \t stylers: [{ 
 
\t \t \t \t \t \t \t \t visibility: "off" 
 
\t \t \t \t \t \t \t }] 
 
\t \t \t \t \t \t }]; 
 

 
\t \t \t \t \t \t map.setOptions({ 
 
\t \t \t \t \t \t \t styles: emptyStyles 
 
\t \t \t \t \t \t }); 
 

 
\t \t \t \t \t \t google.maps.event.addListener(map, 'zoom_changed', function() { 
 
\t \t \t \t \t \t \t if (map.getZoom() < minZoomLevel) map.setZoom(minZoomLevel); 
 
\t \t \t \t \t \t }); 
 

 

 
\t \t \t \t \t \t var districts = new Array("Namakkal", "Madurai", "Perambalur", "The Nilgiris", "Ariyalur", "Karur", "Theni", "Chennai", "Kancheepuram", "Vellore", "Thiruvallur", "Villupuram", "Coimbatore", "Tirunelveli", "Tiruchirappalli", "Cuddalore", "Tiruppur", "Tiruvannamalai", "Thanjavur", "Erode", "Dindigul", "Virudhunagar", "Krishnagiri", "Kanniyakumari", "Thoothukkudi", "Pudukkottai", "Nagapattinam", "Dharmapuri", "Ramanathapuram", "Sivagangai", "Thiruvarur"); 
 
\t \t \t \t \t \t var geocoder = new google.maps.Geocoder(); 
 
\t \t \t \t \t \t var marker; 
 

 
\t \t \t \t \t \t for (index = 0; index < districts.length; ++index) { 
 

 
\t \t \t \t \t \t \t //alert(districts[index]); 
 

 

 

 
\t \t \t \t \t \t \t geocoder.geocode({ 
 
\t \t \t \t \t \t \t \t 'address': districts[index] 
 
\t \t \t \t \t \t \t }, function(results, status) { 
 
\t \t \t \t \t \t \t \t //alert(districts[index]); 
 
\t \t \t \t \t \t \t \t if (status == google.maps.GeocoderStatus.OK) { 
 
\t \t \t \t \t \t \t \t \t //alert(index); 
 
\t \t \t \t \t \t \t \t \t var latitude = results[0].geometry.location.lat(); 
 
\t \t \t \t \t \t \t \t \t var longitude = results[0].geometry.location.lng(); 
 
\t \t \t \t \t \t \t \t \t //alert(latitude); 
 
\t \t \t \t \t \t \t \t \t //alert(longitude); 
 

 
\t \t \t \t \t \t \t \t } 
 

 
\t \t \t \t \t \t \t \t 
 

 
\t \t \t \t \t \t \t \t marker = new google.maps.Marker({ 
 
\t \t \t \t \t \t \t \t \t position: { 
 
\t \t \t \t \t \t \t \t \t \t lat: latitude, 
 
\t \t \t \t \t \t \t \t \t \t lng: longitude 
 
\t \t \t \t \t \t \t \t \t }, 
 
\t \t \t \t \t \t \t \t \t map: map, 
 
\t \t \t \t \t \t \t \t \t animation: google.maps.Animation.DROP, 
 
\t \t \t \t \t \t \t \t \t //labelContent: "chennai", 
 
\t \t \t \t \t \t \t \t // labelStyle: {opacity: 0.75}, 
 
\t \t \t \t \t \t \t \t \t title: districts[index] 
 
\t \t \t \t \t \t \t \t }); 
 
\t \t \t \t \t \t \t \t map.addListener('center_changed', function() { 
 
\t \t \t \t \t \t \t \t \t window.setTimeout(function() { 
 
\t \t \t \t \t \t \t \t \t \t map.panTo(marker.getPosition()); 
 
\t \t \t \t \t \t \t \t \t }, 100); 
 
\t \t \t \t \t \t \t \t }); 
 

 
\t \t \t \t \t \t \t \t marker.addListener('click', function() { 
 
\t \t \t \t \t \t \t \t \t map.setZoom(8); 
 
\t \t \t \t \t \t \t \t \t map.setCenter(marker.getPosition()); 
 
\t \t \t \t \t \t \t \t \t map.getBounds(); 
 
\t \t \t \t \t \t \t \t }); 
 

 

 

 
\t \t \t \t \t \t \t }); 
 

 

 

 
\t \t \t \t \t \t } 
 

 

 
\t \t \t \t \t } 
 
\t \t \t \t \t \t function sleep(milliseconds) { 
 
\t \t \t \t \t \t var start = new Date().getTime(); 
 
\t \t \t \t \t \t for (var i = 0; i < 1e7; i++) { 
 
\t \t \t \t \t \t \t if ((new Date().getTime() - start) > milliseconds) { 
 
\t \t \t \t \t \t \t \t break; 
 
\t \t \t \t \t \t \t } 
 
\t \t \t \t \t \t } 
 
\t \t \t \t \t } 
 
\t \t \t </script> 
 
\t \t \t \t <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBIVqRDN8E_OEPcarzmz5mIJbyk25x424c&signed_in=true&callback=initMap" async defer> 
 
\t \t \t \t </script> 
 
\t </body> 
 
</html>

+0

我得到一個javascript錯誤與發佈的代碼:'InvalidValueError:setPosition:不是一個LatLng或LatLngLiteral:屬性lat:不是一個數字' – geocodezip

+0

這是什麼代碼? 'map.addListener('center_changed',function(){window.setTimeout(function(){map.panTo(marker.getPosition());},100);});' – geocodezip

+0