显示Google地图标记上的号码 [英] Display Number on Marker for Google Maps

问题描述

全部，
我有以下代码在我的地图上显示我的标记：

 < script type =text / javascriptsrc =http://maps.google.com/maps/api/js?sensor=false>< / script> 
< script type =text / javascript> 
函数addLoadEvent（func）{
 var oldonload = window.onload; 
 if（typeof window.onload！='function'）{
 window.onload = func 
} else {
 window.onload = function（）{
 oldonload （）; 
 func（）; 
} 
} 
} 
 
 var map，
 infowin = new google.maps.InfoWindow（{content：'moin'}）; 
函数loadMap（）
 {
 map = new google.maps.Map（
 document.getElementById（'map'），
 {
 zoom： 12，
 mapTypeId：google.maps.MapTypeId.ROADMAP，
 center：new google.maps.LatLng（<？php echo $ _SESSION ['pav_event_latitude'];？> ;, 
 <？php echo $ _SESSION ['pav_event_longitude'];？>）
}）; 
 
 addPoints（myStores）; 
} 
 
函数addPoints（points）
 {
 var bounds = new google.maps.LatLngBounds（）; 
 for（var p = 0; p  {
 var pointData = points [p]; 
 if（pointData == null）{map.fitBounds（bounds）; return; } 
 var point = new google.maps.LatLng（pointData.latitude，pointData.longitude）; 
 bounds.union（new google.maps.LatLngBounds（point））; 
 createMarker（point，pointData.html）; 
} 
 map.fitBounds（bounds）; 
 
 
 
函数createMarker（point，popuphtml）
 {
 var popuphtml =< div id = \popup\> ; + popuphtml +< \ / div>; 
 var marker = new google.maps.Marker（
 {
 position：point，
 map：map 
} 
）; 
 google.maps.event.addListener（marker，'click'，function（）{
 infowin.setContent（popuphtml）
 infowin.open（map，marker）; 
} ）; 
 
 $ b $函数商店（lat，long，text）
 {
 this.latitude = lat; 
 this.longitude = long; 
 this.html = text; 
} 
 
 var myStores = [<？php echo $ jsData;？>，null]; 
 addLoadEvent（loadMap）; 
< / script> 
  

这很好。不过，我想说的是在该标记上添加一个数字，以便人们可以将我网站上的数字与Google地图中的标记相关联。我如何才能在标记上方创建数字（在实际图标的顶部而不是在信息气泡中）？

任何帮助将不胜感激！提前致谢！

解决方案

编辑：此API已被弃用，我不能再推荐这个答案。

---

您可以使用Google的图表API生成图片图片。

请参阅： http://code.google .com / apis / chart / infographics / docs / dynamic_icons.html＃pins

它将制作并返回标记的图像指定。示例用法为： https://chart.googleapis.com / chart？chst = d_map_pin_letter& chld = 2 | FF776B | 000000

要将它应用到您的Google地图中，可将其添加到新标记中）code：

  var number = 2; //或者你想在这里做的任何事
 var marker = new google.maps.Marker（
 {
 position：point，
 map：map，
 icon： 'https://chart.googleapis.com/chart?chst=d_map_pin_letter&chld='+number+'|FF776B|000000'，
 shadow：'https：//chart.googleapis.com/chart？chst = d_map_pin_shadow'
} 
）; 
  

All, I've got the following code to display my markers on my maps:

    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> 
<script  type="text/javascript">
function addLoadEvent(func) { 
var oldonload = window.onload; 
if (typeof window.onload != 'function'){ 
    window.onload = func
} else { 
    window.onload = function() {
        oldonload();
        func();
    }
}
}

var map,
    infowin=new google.maps.InfoWindow({content:'moin'});
function loadMap() 
{
  map = new google.maps.Map(
    document.getElementById('map'),
    {   
      zoom: 12,
      mapTypeId:google.maps.MapTypeId.ROADMAP,
      center:new google.maps.LatLng(<?php echo $_SESSION['pav_event_latitude']; ?>, 
                                    <?php echo $_SESSION['pav_event_longitude']; ?>)
    });

  addPoints(myStores);
}

function addPoints( points )
{  
  var bounds=new google.maps.LatLngBounds();
  for ( var p = 0; p < points.length; ++p )
  {
    var pointData = points[p];
    if ( pointData == null ) {map.fitBounds(bounds);return; }
    var point = new google.maps.LatLng( pointData.latitude, pointData.longitude );
    bounds.union(new google.maps.LatLngBounds(point));
    createMarker( point,  pointData.html );
  }
  map.fitBounds(bounds);

}

function createMarker(point,  popuphtml) 
{
  var popuphtml = "<div id=\"popup\">" + popuphtml + "<\/div>";
  var marker = new google.maps.Marker(
    {
      position:point,
      map:map
    }
  );
  google.maps.event.addListener(marker, 'click', function() {
      infowin.setContent(popuphtml)
      infowin.open(map,marker);
    });

}
function Store( lat, long, text )
{
    this.latitude = lat;
    this.longitude = long;
    this.html = text;
}

var myStores = [<?php echo $jsData;?>, null];
addLoadEvent(loadMap);
</script>

This works great. However I'm trying to say add a number over the marker so that people can relate the number on my site with the marker in Google Maps. How can I go about creating the number over top of my markers (on top of the actual icon and not in an information bubble)?

Any help would be greatly appreciate! Thanks in advance!

解决方案

EDIT: This API is now deprecated, and I can no longer recommend this answer.

---

You could use Google's Charts API to generate a pin image.

See: http://code.google.com/apis/chart/infographics/docs/dynamic_icons.html#pins

It'll make and return an image of a marker from the parameters you specify. An example usage would be: https://chart.googleapis.com/chart?chst=d_map_pin_letter&chld=2|FF776B|000000

To implement it into your Google Map, it can be added into the new Marker() code:

var number = 2; // or whatever you want to do here
var marker = new google.maps.Marker(
    {
        position:point,
        map:map,
        icon:'https://chart.googleapis.com/chart?chst=d_map_pin_letter&chld='+number+'|FF776B|000000',
        shadow:'https://chart.googleapis.com/chart?chst=d_map_pin_shadow'
    }
);

这篇关于显示Google地图标记上的号码的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！