在Google地圖標記上添加標籤和圖標

如何將標籤添加到我的兩個標記中，以便在您點擊標記時向您顯示更多關於它的詳細信息，以及如何更改「接入點2」到一個不同的標記在Google地圖標記上添加標籤和圖標

function initialize() { 
 

 
    var myLatlng = new google.maps.LatLng(-26.322402,31.142249), 
 
     map = new google.maps.Map(document.getElementById('google-map-default'), { 
 
      zoom: 14, 
 
      center: myLatlng 
 
     }), 
 
     marker = new google.maps.Marker({ 
 
      position: myLatlng, 
 
      map: map, 
 
      title: "We are here!" 
 
     }); 
 

 
    var accessPoint1 = new google.maps.LatLng(-26.315402,31.123924), 
 
     marker1 = new google.maps.Marker({ 
 
      position: accessPoint1, 
 
      map: map, 
 
      title: "Access Point 1" 
 
     }); 
 

 
    var accessPoint2 = new google.maps.LatLng(-26.316700,31.138043), 
 
     marker2 = new google.maps.Marker({ 
 
      position: accessPoint2, 
 
      map: map, 
 
      title: "Access Point 2" 
 
     }); 
 
} 
 

 
google.maps.event.addDomListener(window, 'load', initialize);

#google-map-default { 
 
height: 200px; 
 
}

<div id="google-map-default"></div> 
 
<script src="https://maps.googleapis.com/maps/api/js"></script>

上述代碼是在其中目前正在細一個名爲maps.mini.js。我只是需要做就可以了修改上述

來源

2017-04-07 Penwell

做同樣的下面是一個可能更強大的，可擴展的解決方案，它利用了一個包含您的位置（標記）的數組以及單個InfoWindow對象。有了這個，你可以添加你需要儘可能多的位置，而無需複製代碼的其餘部分...

function initialize() { 
 

 
    var myLatlng = new google.maps.LatLng(-26.322402, 31.142249); 
 

 
    var map = new google.maps.Map(document.getElementById('map-canvas'), { 
 
    zoom: 13, 
 
    center: myLatlng 
 
    }); 
 

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

 
    var marker = new google.maps.Marker({ 
 
    position: myLatlng, 
 
    map: map, 
 
    title: "We are here!" 
 
    }); 
 

 
    var locations = [ 
 

 
    [new google.maps.LatLng(-26.315402, 31.123924), 'Access Point 1', 'Custom text 1'], 
 
    [new google.maps.LatLng(-26.316700, 31.138043), 'Access Point 2', 'Custom text 2'] 
 
    ]; 
 

 
    for (var i = 0; i < locations.length; i++) { 
 

 
    var marker = new google.maps.Marker({ 
 
     position: locations[i][0], 
 
     map: map, 
 
     title: locations[i][1] 
 
    }); 
 

 
    google.maps.event.addListener(marker, 'click', (function(marker, i) { 
 

 
     return function() { 
 
     infowindow.setContent(locations[i][2]); 
 
     infowindow.open(map, marker); 
 
     } 
 

 
    })(marker, i)); 
 
    } 
 
} 
 

 
google.maps.event.addDomListener(window, 'load', initialize);

#map-canvas { 
 
    height: 200px; 
 
}

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

 
<script src="https://maps.googleapis.com/maps/api/js"></script>

來源

2017-04-07 10:58:44 MrUpsidown

爲指定的MARKER1可以

var my_contentString1 = 'my text content 1... ' ; 

    var my_infowindow1 = new google.maps.InfoWindow({ 
     content: my_contentString1 
    }); 

    var accessPoint1 = new google.maps.LatLng(-26.315402,31.123924), 
    marker1 = new google.maps.Marker({ 
     position: accessPoint1, 
     map: map, 
     title: "Access Point 1" 
    }); 

    marker1.addListener('click', function() { 
     my_infowindow1.open(map, marker); 
    });

爲MARKER2

來源

2017-04-07 07:06:45 scaisEdge

你介意補充說，修改到我的代碼和共享完整的代碼。原諒我我還是這個新手 – Penwell

我不喜歡你的評論...這不是一個免費的寫代碼服務 – scaisEdge

你應該很容易用一點思路把它整合到你的代碼中。在給定的答案，但我會避免爲每個標記創建一個單獨的InfoWindow對象。用2個標記不是一個大問題，但如果你有2000個，那麼它可能是另一個故事。 – MrUpsidown

我終於實現了這種方式，其運作得非常好，我

\t <script type="text/javascript"> 
 
\t  var locations = [ 
 
\t  ['ap7', -26.303139, 31.093508, 7], 
 
\t  ['ap6', -26.322402, 31.142249, 6], 
 
\t  ['ap5', -26.316700, 31.138043, 5], 
 
\t  ['ap4', -26.315402, 31.123924, 4], 
 
\t  ['ap3', -26.329244, 31.150478, 3], 
 
\t  ['ap2', -26.309525, 31.134632, 2], 
 
\t  ['ap1', -26.289923, 31.140195, 1] 
 
\t  ]; 
 

 
\t  var map = new google.maps.Map(document.getElementById('map'), { 
 
\t  zoom: 14, 
 
\t  center: new google.maps.LatLng(-26.309525, 31.134632), 
 
\t  mapTypeId: google.maps.MapTypeId.ROADMAP 
 
\t  }); 
 

 
\t  var infowindow = new google.maps.InfoWindow(); 
 

 
\t  var marker, i; 
 

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

 
\t  google.maps.event.addListener(marker, 'click', (function(marker, i) { 
 
\t   return function() { 
 
\t   infowindow.setContent(locations[i][0]); 
 
\t   infowindow.open(map, marker); 
 
\t   } 
 
\t  })(marker, i)); 
 
\t  } 
 
\t </script>

來源

2017-04-07 15:59:46 Penwell

在Google地圖標記上添加標籤和圖標

回答

相關問題