谷歌地图标记文本答案

【问题标题】：Google Map marker text谷歌地图标记文本
【发布时间】：2015-09-18 08:03:36
【问题描述】：

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

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

【问题讨论】：

【解决方案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);
}

?>

【讨论】：

不，只是一个空白页。
您的服务器上是否激活了 GD 组件？
如何渲染图像？我认为您可能需要保存图像以供将来在谷歌地图中使用
实时，尚未在地图中使用。
如果你知道我可以评估它的代码，否则我无法想象你在做什么......

【解决方案2】：

两种选择：

第三方MarkerWithLabel库。

fiddle

代码 sn-p：

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

代码 sn-p::

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>

【讨论】：