Google Maps Birden Çok Özel İşaretçi

Question

Bir Google haritasının nasıl yapıldığını öğrenmeye çalışıyorum. Javascript hakkında çok az bilgim var ama burada öğrenmeye çalışıyorum.

Çevrimiçi bir kod referansı kullandım ve konumları, işaretçileri ve bir infowindow'u nasıl anlayacağımı anladığım noktaya geldim ancak her işaretçi için birden çok özel simge eklemeyi anlamaya çalışıyorum.

Yardımlarınız için teşekkürler.

function initialize() { 

     //add map, the type of map 
     var map = new google.maps.Map(document.getElementById('map'), { 
      zoom: 6, 
      center: new google.maps.LatLng(37.7749295, -122.4194155), 
      mapTypeId: google.maps.MapTypeId.ROADMAP 
     }); 

     //add locations 
     var locations = [ 
      ['San Francisco: Power Outage', 37.7749295, -122.4194155], 
      ['Sausalito', 37.8590937, -122.4852507], 
      ['Sacramento', 38.5815719, -121.4943996], 
      ['Soledad', 36.424687, -121.3263187], 
      ['Shingletown', 40.4923784, -121.8891586] 
     ]; 

     //declare marker call it 'i' 
     var marker, i; 

     //declare infowindow 
     var infowindow = new google.maps.InfoWindow(); 

     //add marker to each locations 
     for (i = 0; i < locations.length; i++) { 
      marker = new google.maps.Marker({ 
       position: new google.maps.LatLng(locations[i][1], locations[i][2]), 
       map: map, 
      }); 

      //click function to marker, pops up infowindow 
      google.maps.event.addListener(marker, 'click', (function(marker, i) { 
       return function() { 
        infowindow.setContent(locations[i][0]); 
        infowindow.open(map, marker); 
       } 
      })(marker, i)); 
     } 
    } 
    google.maps.event.addDomListener(window, 'load', initialize); 

Answer 1

en kolay Eğer işaretleyici olarak görünmesini istediğiniz bir resmin bir URL'ye markerin simge özelliğini ayarlamaktır, birden çok yolu vardır.

örnek:

//modified array with icon-URLs 
var locations = [ 
      ['San Francisco: Power Outage', 37.7749295, -122.4194155,'http://labs.google.com/ridefinder/images/mm_20_purple.png'], 
      ['Sausalito', 37.8590937, -122.4852507,'http://labs.google.com/ridefinder/images/mm_20_red.png'], 
      ['Sacramento', 38.5815719, -121.4943996,'http://labs.google.com/ridefinder/images/mm_20_green.png'], 
      ['Soledad', 36.424687, -121.3263187,'http://labs.google.com/ridefinder/images/mm_20_blue.png'], 
      ['Shingletown', 40.4923784, -121.8891586,'http://labs.google.com/ridefinder/images/mm_20_yellow.png'] 
     ]; 



//inside the loop 
marker = new google.maps.Marker({ 
       position: new google.maps.LatLng(locations[i][1], locations[i][2]), 
       map: map, 
       icon: locations[i][3] 
      }); 

Answer 2

var locations = [ 
     ['San Francisco: Power Outage', 37.7749295, -122.4194155], 
     ['Sausalito', 37.8590937, -122.4852507], 
     ['Sacramento', 38.5815719, -121.4943996], 
     ['Soledad', 36.424687, -121.3263187], 
     ['Shingletown', 40.4923784, -121.8891586] 
    ]; 

yerler, özellikle, enlem ve boylam kendi POSICON ardından bölgelerinden bir dizisini temsil eder, bu yüzden google haritada yerleştirilmiş olacak, her zaman enlem ve boylam değil Bu şekilde gönderilebilir, böylece veritabanı veya json alabilirsiniz. Umarım yardımcı oldum.

Answer 3

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

    <script type="text/javascript">   
    function initialize() { 
     //add map, the type of map 
      var mapOptions = { 
       zoom: 5, 
       draggable: true, 
       animation: google.maps.Animation.DROP, 
       mapTypeId: google.maps.MapTypeId.ROADMAP, 
       center: new google.maps.LatLng(51.4964302,-0.1331412), // area location 
       styles:[{"stylers":[{"saturation":-100},{"gamma":1}]},{"elementType":"labels.text.stroke","stylers":[{"visibility":"off"}]},{"featureType":"poi.business","elementType":"labels.text","stylers":[{"visibility":"off"}]},{"featureType":"poi.business","elementType":"labels.icon","stylers":[{"visibility":"off"}]},{"featureType":"poi.place_of_worship","elementType":"labels.text","stylers":[{"visibility":"off"}]},{"featureType":"poi.place_of_worship","elementType":"labels.icon","stylers":[{"visibility":"off"}]},{"featureType":"road","elementType":"geometry","stylers":[{"visibility":"simplified"}]},{"featureType":"water","stylers":[{"visibility":"on"},{"saturation":50},{"gamma":0},{"hue":"#50a5d1"}]},{"featureType":"administrative.neighborhood","elementType":"labels.text.fill","stylers":[{"color":"#333333"}]},{"featureType":"road.local","elementType":"labels.text","stylers":[{"weight":0.5},{"color":"#333333"}]},{"featureType":"transit.station","elementType":"labels.icon","stylers":[{"gamma":1},{"saturation":50}]}] 
      }; 
      var mapElement = document.getElementById('map'); 
      var map = new google.maps.Map(mapElement, mapOptions); 

     //add locations 
      var locations = [ 
       ['London office', 51.4964302,-0.1331412,'http://labs.google.com/ridefinder/images/mm_20_red.png'], 
       ['Sausalito', 37.8590937, -122.4852507,'http://labs.google.com/ridefinder/images/mm_20_red.png'], 
       ['Sacramento', 38.5815719, -121.4943996,'http://labs.google.com/ridefinder/images/mm_20_green.png'], 
       ['Soledad', 36.424687, -121.3263187,'http://labs.google.com/ridefinder/images/mm_20_blue.png'], 
       ['Shingletown', 40.4923784, -121.8891586,'http://labs.google.com/ridefinder/images/mm_20_yellow.png'] 
      ]; 
      //declare marker call it 'i' 
      var marker, i; 
      //declare infowindow 
      var infowindow = new google.maps.InfoWindow(); 
      //add marker to each locations 
      for (i = 0; i < locations.length; i++) { 
       marker = new google.maps.Marker({ 
        position: new google.maps.LatLng(locations[i][1], locations[i][2]), 
        map: map, 
        icon: locations[i][3] 
      }); 
      //click function to marker, pops up infowindow 
      google.maps.event.addListener(marker, 'click', (function(marker, i) { 
       return function() { 
        infowindow.setContent(locations[i][0]); 
        infowindow.open(map, marker); 
       } 
      })(marker, i)); 
     } 
    } 
    google.maps.event.addDomListener(window, 'load', initialize); 
    </script>