2016-03-27 31 views
-1

ile statik yön nasıl görüntülenir? Siteme, güzergahımla ilgili bazı haritalar eklemek istiyorum.Google Haritalar API'sı

Google Haritalar Javascript API'sı ile özelleştirilmiş bir stil oluşturdum. Kullanıcıların kalkış ve varış yerlerinin,

ekleyebilirsiniz ama bunu istemiyorum bu yüzden gördüğüm

Tüm örnekler, HTML dosyasında giriş içeriyor. Amacım, Orlando'dan Key West'e özel tarzımla yönlendirme gibi yalnızca "statik" bir haritayı göstermektir.

Kimse bana kodla yardım edebilir mi?

Çok teşekkür ederim!

function initMap() { 
    var customMapType = new google.maps.StyledMapType([ 
     { 
     "featureType": "all", 
     "elementType": "all", 
     "stylers": [ 
      { 
       "invert_lightness": true 
      }, 
      { 
       "saturation": 10 
      }, 
      { 
       "lightness": 30 
      }, 
      { 
       "gamma": 0.5 
      }, 
      { 
       "hue": "#435158" 
      } 
     ] 
    }, 
    { 
     "featureType": "water", 
     "elementType": "all", 
     "stylers": [ 
      { 
       "saturation": "0" 
      }, 
      { 
       "lightness": "6" 
      }, 
      { 
       "gamma": "1" 
      } 
     ] 
    } 
    ], { 
     name: 'Leonardo' 
    }); 
    var customMapTypeId = 'custom_style'; 

    var map = new google.maps.Map(document.getElementById('map'), { 
    zoom: 7, 
    center: {lat: 28, lng: -81.946}, // Florida. 
    mapTypeControlOptions: { 
     mapTypeIds: [google.maps.MapTypeId.ROADMAP, customMapTypeId] 
    } 
    }); 




    map.mapTypes.set(customMapTypeId, customMapType); 
    map.setMapTypeId(customMapTypeId); 
} 
+1

nerede yapabilirsiniz _ [Statik Maps API] deki gibi harita (https://developers.google.com/maps/documentation/static-maps/intro#Paths) bir _ "statik" demek istiyorsunuz konumlar arasındaki yolları çizmek? Ya da sadece Javascript API'sini kullanmak yerine, [burada örnek] (https://developers.google.com/maps/documentation/javascript/examples/directions-simple) gibi form alanları ve etkinlik dinleyicileri kullanmak yerine ve hedef javascript'inizde kodlanmış mı? – duncan

+0

Sadece Javascript API'sını, form alanları olmadan, kaynak kodlu ve hedef kodlu olarak kullanarak! Teşekkür ederim! – Leonardo

cevap

0

İşte bunu nasıl bir örnek:

Bu benim özel tarzıdır.

<!DOCTYPE html> 
<html> 
<head> 
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no"> 
    <meta charset="utf-8"> 
    <style> 
     html, body, #map { 
      height: 100%; 
      margin: 0px; 
      padding: 0px 
     } 
    </style> 
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script> 
    <script> 
     function initMap() { 
      var customMapType = new google.maps.StyledMapType(
       [ 
        { 
         "featureType": "all", 
         "elementType": "all", 
         "stylers": [ 
          {"invert_lightness": true}, 
          {"saturation": 10}, 
          {"lightness": 30}, 
          {"gamma": 0.5}, 
          {"hue": "#435158"} 
         ] 
        }, 
        { 
         "featureType": "water", 
         "elementType": "all", 
         "stylers": [ 
          {"saturation": "0"}, 
          {"lightness": "6"}, 
          {"gamma": "1"} 
         ] 
        } 
       ], 
       {name: 'Leonardo'} 
      ); 
      var customMapTypeId = 'custom_style'; 

      var map = new google.maps.Map(document.getElementById('map'), { 
       zoom: 7, 
       center: {lat: 28, lng: -81.946}, // Florida. 
       mapTypeControlOptions: { 
        mapTypeIds: [google.maps.MapTypeId.ROADMAP, customMapTypeId] 
       } 
      }); 

      var directionsService = new google.maps.DirectionsService(); 
      var directionsDisplay = new google.maps.DirectionsRenderer({ 
       map: map 
      }); 

      var start = new google.maps.LatLng(28, -81.946); 
      var end = new google.maps.LatLng(41.85, -87.65); 

      var request = { 
       origin: start, 
       destination: end, 
       travelMode: google.maps.TravelMode.DRIVING 
      }; 

      directionsService.route(request, function(result, status) { 
       if (status == google.maps.DirectionsStatus.OK) { 
        directionsDisplay.setDirections(result); 
       } 
      }); 

      map.mapTypes.set(customMapTypeId, customMapType); 
      map.setMapTypeId(customMapTypeId); 
     } 

     google.maps.event.addDomListener(window, 'load', initMap); 
    </script> 
</head> 
<body> 
    <div id="map"></div> 
</body> 
</html> 
+0

Çok teşekkür ederim! Mükemmel! – Leonardo

İlgili konular