在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地图标记上添加标签和图标

回答

相关问题