Question

我已经玩Google Map API几天了，而且大部分时间都非常直接，但我们需要做的一件事，我无法弄清楚。我在下面的示例中看到了标签，但是我无法让他们看到我在下面的图片中看到的标签。有人能指点我参考，以便达到我的要求吗？

如果你正在寻找makerwithlable.js，你可以从这里得到它..它在哪里得到它： https://code.google.com/p/google-maps-utility-library-v3/source/browse/trunk/markerwithlabel/src/markerwithlabel.js?r=288

<!DOCTYPE html>
<html>
<head>
<script src="http://maps.googleapis.com/maps/api/js"></script>
<script src="markerwithlabel.js" type="text/javascript"></script>

<script>
{
    var showOnStartInfoWindows = true;
    //create locations..
    var arrayAll = [];
    var marker = [];
    var jax = new google.maps.LatLng(30.318028, -81.674474);
    var leesburg = new google.maps.LatLng(28.810750, -81.880056);
    var map = null;

    arrayAll[0] = {loc: jax, size: 5000, info: "Jacksonville, FL 32204"};
    arrayAll[1] = {loc: leesburg, size: 1000, info: "Leesburg, FL"};
    //EO create locations..
}

function initialize()
{
    //center the map on Jacksonville
    var mapProp = {
      center:arrayAll[0].loc,
      zoom:6,
      mapTypeId:google.maps.MapTypeId.ROADMAP
      };

  //set google's API and pass the DIV by ID.
    map = new google.maps.Map(document.getElementById("googleMap"),mapProp);

    var bounds = new google.maps.LatLngBounds(leesburg, jax);
  map.fitBounds(bounds);

    var maxSize = 0;
    for(var i = 0; i < arrayAll.length; i++)
    {
        if(maxSize<arrayAll[i].size)
            maxSize = arrayAll[i].size;
    }

    for(var i = 0; i < arrayAll.length; i++)
    {
        var size = Math.round((arrayAll[i].size/maxSize)*100);

        //create marker
        marker[i] = new google.maps.Marker({
          position:arrayAll[i].loc,
        map: map,
        title: 'Right-Click to zoom all the way in.\nLeft-Click to zoom to a state level.',
            draggable: false,
            raiseOnDrag: false,
            labelAnchor: new google.maps.Point(22, 0),
            labelClass: "googleLabel", // the CSS class for the label
        labelContent: arrayAll[i].info,
            icon: {
                path: google.maps.SymbolPath.CIRCLE,        //BACKWARD_CLOSED_ARROW
                fillOpacity: 0.3,
                fillColor: '#0000ff',
                strokeOpacity: 1.0,
                strokeColor: '#0000ff',
                strokeWeight: 1.0, 
                scale: size, //pixels
              }
        });

        marker[i].setMap(map);
        //EO create marker

        marker_onclick(marker[i]);
        marker_info(marker[i]);
    }
}

function marker_onclick(marker) {
        google.maps.event.addListener(marker, 'dblclick', function(o) {
            map.setZoom(18);
            map.setCenter(marker.position);
        });

        google.maps.event.addListener(marker, 'click', function(o) {
            map.setZoom(7);
            map.setCenter(marker.position);
        });

        google.maps.event.addListener(marker, 'rightclick', function(o) {
                alert('Could route to different URL:\n' + marker.position);
        });
}

function marker_info(marker) {
        //create popup notice..
        var infowindow = new google.maps.InfoWindow({
        content:marker.labelContent
      });

        if(showOnStartInfoWindows)
            infowindow.open(map, marker);

        google.maps.event.addListener(marker, 'mouseover', function (o) {
            //alert('over'); 
            infowindow.open(map, marker); 
        });
        google.maps.event.addListener(marker, 'mouseout', function (o) { 
            //alert('out');
            infowindow.close(map, marker); 
        });
        //EO create popup notice..
}

{
    google.maps.event.addDomListener(window, 'load', initialize);
}
</script>
</head>

<body>
<div id="googleMap" style="width:640px;height:640px;"></div>
</body>
</html>

我正在尝试做的例子。 Example of what I'm trying to do.

Answer 1

根据size的值，您可以设置样式（fontSize，width，height等）和labelAnchor

＆＃13;

{
  var showOnStartInfoWindows = true;
  //create locations..
  var arrayAll = [];
  var marker = [];
  var jax = new google.maps.LatLng(30.318028, -81.674474);
  var leesburg = new google.maps.LatLng(28.810750, -81.880056);
  var map = null;

  arrayAll[0] = {
    loc: jax,
    size: 5000,
    info: "Jacksonville, FL 32204"
  };
  arrayAll[1] = {
    loc: leesburg,
    size: 1000,
    info: "Leesburg, FL"
  };
  //EO create locations..
}

function initialize() {
  //center the map on Jacksonville
  var mapProp = {
    center: arrayAll[0].loc,
    zoom: 6,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };

  //set google's API and pass the DIV by ID.
  map = new google.maps.Map(document.getElementById("googleMap"), mapProp);

  var bounds = new google.maps.LatLngBounds(leesburg, jax);
  map.fitBounds(bounds);

  var maxSize = 0;
  for (var i = 0; i < arrayAll.length; i++) {
    if (maxSize < arrayAll[i].size)
      maxSize = arrayAll[i].size;
  }

  for (var i = 0; i < arrayAll.length; i++) {
    var size = Math.round((arrayAll[i].size / maxSize) * 100);

    //create MarkerWithLabel
    marker[i] = new MarkerWithLabel({
      labelInBackground:false,
      position: arrayAll[i].loc,
      map: map,
      title: 'Right-Click to zoom all the way in.\nLeft-Click to zoom to a state level.',
      labelAnchor: new google.maps.Point((size * 1.8) / 2, (size / 3)),
      labelClass: "googleLabel", // the CSS class for the label
      labelStyle: {
        width: (size * 1.8) + 'px',
        
        height: (size / 1.5) + 'px',
        lineHeight: (size / 1.5) + 'px',
        fontSize: (size / 1.5) + 'px'
      },
      labelContent: arrayAll[i].size,
      icon: {
        path: google.maps.SymbolPath.CIRCLE,
        fillOpacity: 0.6,
        fillColor: 'gold',
        strokeOpacity: 1.0,
        strokeColor: '#0000ff',
        strokeWeight: 1.0,
        scale: size, //pixels
      }
    });

    marker[i].setMap(map);

  }
}

{
  google.maps.event.addDomListener(window, 'load', initialize);
}

＆＃13;

html,
body,
#googleMap {
  margin: 0;
  padding: 0;
  height: 100%;
}
.googleLabel {
  color: #000;
  font-weight: bold;
  text-align: center;
  
}

＆＃13;

<script src="http://maps.googleapis.com/maps/api/js"></script>
<script src="http://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerwithlabel/src/markerwithlabel.js" type="text/javascript"></script>


<div id="googleMap"></div>

＆＃13;

在标记的中心创建文本

1 个答案: