谷歌地圖多個自定義標記

Question

所以我想學習如何製作谷歌地圖。我對javascript的理解很少，但我正在努力學習。

我引用了一個在線代碼，並且我瞭解瞭如何添加位置，標記和infowindow，但我試圖弄清楚如何爲每個標記添加多個自定義圖標。

感謝您的幫助。

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

有多種方式，最簡單的就是標記的圖標屬性設置爲要顯示爲標記的圖像的URL。

樣品：

//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] 
    ]; 

位置表示各區隨後可以通過POSICON特別是通過其緯度和經度的陣列，所以它們將被定位谷歌地圖上，並不總是經度和緯度這種方式發送，所以你可以接收數據庫或JSON。我希望我能幫上忙。

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>