Question

我找到了这个图标：http://chart.apis.google.com/chart?cht=mm&chs=60x102&chco=ffffff,70a3c1,70a3c1&ext=.png

我想知道是否可以在此图标上放置文字。基本上我正在寻找的是一个带有动态颜色和文字的图标。一个基于图像和文本动态生成图标的简单PHP脚本也很棒。

Answer 1

您可以从png（using PHP GD）

创建图片

 $yourimage = imagecreatefrompng($originalImage);

在您的html页面中添加此标记

 <img src="test_icon.php?text=yourtext">

并添加您需要的文字这样使用test_icon.php

<强> test_icon.php

<?php

   header("Content-type: image/png");

   $yourOrigImage = "group_icon.png";
   if(file_exists($yourOrigImage)) {
      $newImage = imagecreatefrompng($yourOrigImage);
      imagesavealpha($newImage, true); // this for keep the png's transparency  important
      if(!$newImage) {
        die("im is null");
    }
    $black = imagecolorallocate($newImage, 0, 0, 0);
    $width = 36; // the width of the image
    $height = 36; // the height of the image
    $font = 4; // font size
    $text = $_GET['text']; // text
    $leftTextPos = 4;
    $outputImage = "group_icon_".$text.".png";
    imagestring($newImage, $font, $leftTextPos, 9, $text, $black);
    imagepng($newImage, $outputImage, 0);
    imagedestroy($newImage);
}

?>

Answer 2

两个选项：

第三方MarkerWithLabel图书馆。

fiddle

代码段

var map;

function initialize() {
  var map = new google.maps.Map(
    document.getElementById("map_canvas"), {
      center: new google.maps.LatLng(37.4419, -122.1419),
      zoom: 13,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    });

  var marker = new MarkerWithLabel({
    position: map.getCenter(),
    map: map,
    icon: "http://chart.apis.google.com/chart?cht=mm&chs=60x102&chco=ffffff,70a3c1,70a3c1&ext=.png",
    labelContent: "A",
    labelAnchor: new google.maps.Point(15, 90),
    labelClass: "labels", // the CSS class for the label
    labelInBackground: false
  });
}
google.maps.event.addDomListener(window, "load", initialize);

html,
body,
#map_canvas {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}
.labels {
  color: black;
  font-family: "Lucida Grande", "Arial", sans-serif;
  font-size: 30px;
  text-align: center;
  width: 30px;
  white-space: nowrap;
}

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

为原生google.maps.Marker

fiddle

代码段：

var map;

function initialize() {
  var map = new google.maps.Map(
    document.getElementById("map_canvas"), {
      center: new google.maps.LatLng(37.4419, -122.1419),
      zoom: 13,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    });

  var marker = new google.maps.Marker({
    position: map.getCenter(),
    map: map,
    icon: "http://chart.apis.google.com/chart?cht=mm&chs=60x102&chco=ffffff,70a3c1,70a3c1&ext=.png",
    label: "A"
  });
}
google.maps.event.addDomListener(window, "load", initialize);

html,
body,
#map_canvas {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}

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

Google地图标记文字

2 个答案: