自定义图标标记,带有Google地图的动态编号

时间:2012-12-14 08:36:28

标签: javascript google-maps maps

我已经看到很多用于在标记图标上动态生成数字的示例。 我发现其中一个是谷歌图表apis。This部分解决了我的问题。编辑完代码后,我能够生成数字,如下所示。
但是可以添加像http://s7.postimage.org/wg6bu3jpj/pointer.png这样的自定义图标,然后在其上生成数字吗?

function addMarker(id,location,address,facility,name,ratings) 
    {


        marker = new google.maps.Marker(
        {
            position: location,
            map: map,
            animation:  google.maps.Animation.DROP,
            icon: 'https://chart.googleapis.com/chart?chst=d_map_pin_letter&chld='+id+'|FF776B|000000',
             shadow:'https://chart.googleapis.com/chart?chst=d_map_pin_shadow'
        });

1 个答案:

答案 0 :(得分:0)

此图表api现已弃用,谷歌将根据其修订的“条款和条件”仅提供一年的支持。

我认为最好的方法是在服务器端创建标记。如果您的应用程序需要显示有限数量的标记(例如一次最多25个),那么您可以将它们放在服务器上。图像处理工具以Java或任何其他编程语言提供。

这是一个使用java的简短代码段。

BufferedImage image = null;
try {
   image = ImageIO.read(new File("/path/to/base/icon"));
} catch (IOException e) {
   e.printStackTrace();
}

Graphics g = image.getGraphics();
g.setFont(g.getFont().deriveFont(30f));
g.drawString("1", x, y);  // x,y are points where you want to add the number
g.dispose();

try {
    ImageIO.write(image, "png", new File("test.png"));
} catch (IOException e) {
    e.printStackTrace();
}

您可以使用for循环创建所需数量的标记。