发表新帖
发表新帖

Google maps: place number in marker?

前端 未结
关注
11 2142
感情败类
感情败类 2020-12-12 17:09

How can I display a number in the marker on a google map? I want to do server side clustering and I need to display how many points the cluster represents.

相关标签:
11条回答
  • 南笙
    2020-12-12 17:39

    Instead of use the default solution (http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=7|FF0000|000000), you can create these images as you wish, using JavaScript without any server-side code.

    Google google.maps.Marker accepts Base64 for its icon property. With this we can create a valid Base64 from a SVG.

    You can see the code to produce the same as this image in this Plunker: http://plnkr.co/edit/jep5mVN3DsVRgtlz1GGQ?p=preview

    var markers = [
  [1002, -14.2350040, -51.9252800],
  [2000, -34.028249, 151.157507],
  [123, 39.0119020, -98.4842460],
  [50, 48.8566140, 2.3522220],
  [22, 38.7755940, -9.1353670],
  [12, 12.0733335, 52.8234367],
];

function initializeMaps() {
  var myLatLng = {
    lat: -25.363,
    lng: 131.044
  };

  var map = new google.maps.Map(document.getElementById('map_canvas'), {
    zoom: 4,
    center: myLatLng
  });

  var bounds = new google.maps.LatLngBounds();

  markers.forEach(function(point) {
    generateIcon(point[0], function(src) {
      var pos = new google.maps.LatLng(point[1], point[2]);

      bounds.extend(pos);

      new google.maps.Marker({
        position: pos,
        map: map,
        icon: src
      });
    });
  });

  map.fitBounds(bounds);
}

var generateIconCache = {};

function generateIcon(number, callback) {
  if (generateIconCache[number] !== undefined) {
    callback(generateIconCache[number]);
  }

  var fontSize = 16,
    imageWidth = imageHeight = 35;

  if (number >= 1000) {
    fontSize = 10;
    imageWidth = imageHeight = 55;
  } else if (number < 1000 && number > 100) {
    fontSize = 14;
    imageWidth = imageHeight = 45;
  }

  var svg = d3.select(document.createElement('div')).append('svg')
    .attr('viewBox', '0 0 54.4 54.4')
    .append('g')

  var circles = svg.append('circle')
    .attr('cx', '27.2')
    .attr('cy', '27.2')
    .attr('r', '21.2')
    .style('fill', '#2063C6');

  var path = svg.append('path')
    .attr('d', 'M27.2,0C12.2,0,0,12.2,0,27.2s12.2,27.2,27.2,27.2s27.2-12.2,27.2-27.2S42.2,0,27.2,0z M6,27.2 C6,15.5,15.5,6,27.2,6s21.2,9.5,21.2,21.2c0,11.7-9.5,21.2-21.2,21.2S6,38.9,6,27.2z')
    .attr('fill', '#FFFFFF');

  var text = svg.append('text')
    .attr('dx', 27)
    .attr('dy', 32)
    .attr('text-anchor', 'middle')
    .attr('style', 'font-size:' + fontSize + 'px; fill: #FFFFFF; font-family: Arial, Verdana; font-weight: bold')
    .text(number);

  var svgNode = svg.node().parentNode.cloneNode(true),
    image = new Image();

  d3.select(svgNode).select('clippath').remove();

  var xmlSource = (new XMLSerializer()).serializeToString(svgNode);

  image.onload = (function(imageWidth, imageHeight) {
    var canvas = document.createElement('canvas'),
      context = canvas.getContext('2d'),
      dataURL;

    d3.select(canvas)
      .attr('width', imageWidth)
      .attr('height', imageHeight);

    context.drawImage(image, 0, 0, imageWidth, imageHeight);

    dataURL = canvas.toDataURL();
    generateIconCache[number] = dataURL;

    callback(dataURL);
  }).bind(this, imageWidth, imageHeight);

  image.src = 'data:image/svg+xml;base64,' + btoa(encodeURIComponent(xmlSource).replace(/%([0-9A-F]{2})/g, function(match, p1) {
    return String.fromCharCode('0x' + p1);
  }));
}

initializeMaps();
    #map_canvas {
  width: 100%;
  height: 300px;
}
    <!DOCTYPE html>
<html>

  <head>
    <link rel="stylesheet" href="style.css">
    
    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
    
  </head>

  <body>
    <div id="map_canvas"></div>
  </body>
  
  <script src="script.js"></script>

</html>

    In this demo I create the SVG using D3.js, then transformed SVG to Canvas, so I can resize the image as I want and after that I get Base64 using canvas' toDataURL method.

    All this demo was based on my fellow @thiago-mata's code. Kudos for him.

    0 讨论(0)
  • 你的背包
    2020-12-12 17:44

    Simplest solution:

    marker = new google.maps.Marker({
  position: my_position,
  map: map,
  label: num_events+'' //Needs to be a string. No integers allowed
});

    See https://developers.google.com/maps/documentation/javascript/examples/marker-labels

    For more control over the layout of the marker see Valery Viktorovsky's answer

    0 讨论(0)
  • 南笙
    2020-12-12 17:46

    The link above ('http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=1|FE6256|000000') can't be used via SSL. To generate and store the number images locally:

    for i in {1..99}; do curl -o ./${i}_map_icon.png  "http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=${i}|FE6256|000000"; echo $i; done
    0 讨论(0)
  • 遥遥无期
    2020-12-12 17:50 
    while creating marker use the 

<script>
var marker = new google.maps.Marker({
            position: myLanLat,
            icon:'icon: 'https://chart.googleapis.com/chart?chst=d_map_pin_letter&chld='+ (position) +'|FF776B|000000',
            map: map,
                  });
<script>
    0 讨论(0)
  • 梦如初夏
    2020-12-12 17:51

    Just found this tutorial: http://biostall.com/adding-number-or-letters-to-google-maps-api-markers

    It doesn't look like the best solution, but it does work.

    0 讨论(0)
  • 一向
    2020-12-12 17:53

    Here are custom icons with the updated "visual refresh" style that you can generate quickly via a simple .vbs script. I also included a large pre-generated set that you can use immediately with multiple color options: https://github.com/Concept211/Google-Maps-Markers

    Use the following format when linking to the GitHub-hosted image files:

    https://raw.githubusercontent.com/Concept211/Google-Maps-Markers/master/images/marker_[color][character].png

    color 

    red, black, blue, green, grey, orange, purple, white, yellow

    character 

    A-Z, 1-100, !, @, $, +, -, =, (%23 = #), (%25 = %), (%26 = &), (blank = •)

    Examples:

    https://raw.githubusercontent.com/Concept211/Google-Maps-Markers/master/images/marker_red1.png

    https://raw.githubusercontent.com/Concept211/Google-Maps-Markers/master/images/marker_blue2.png

    https://raw.githubusercontent.com/Concept211/Google-Maps-Markers/master/images/marker_green3.png

    0 讨论(0)
 看不清?
提交回复
热议问题