Jak mogę tworzyć numerowane znaczniki map w Google Maps V3?

Question

Jak mogę tworzyć numerowane znaczniki map w Google Maps V3?

Pracuję nad mapą, która ma wiele znaczników.

Te znaczniki używają niestandardowej ikony, ale chciałbym również dodać cyfry na górze. Widziałem, jak udało się to osiągnąć przy użyciu starszych wersji API. Jak mogę to zrobić w V3?

*uwaga -- atrybut "title" tworzy podpowiedź, gdy najedziesz kursorem na znacznik, ale chcę coś, co będzie warstwowe na niestandardowym obrazie, nawet jeśli nie unosisz kursora na nim.

Oto dokumentacja dla Klasa marker, a żaden z tych atrybutów nie pomaga: http://code.google.com/apis/maps/documentation/v3/reference.html#MarkerOptions

56

javascript google-maps google-maps-api-3

Author: Daniel Vassallo, 2010-03-13

Source

15 answers

Tak to robię w V3:

Zaczynam od wczytania API Map google i w ramach metody callback initialize() Ładuję MarkerWithLabel.js że znalazłem tutaj :

function initialize() {

            $.getScript("/js/site/marker/MarkerWithLabel.js#{applicationBean.version}", function(){

            var mapOptions = {
                zoom: 8,
                center: new google.maps.LatLng(currentLat, currentLng),
                mapTypeId: google.maps.MapTypeId.ROADMAP,
                streetViewControl: false,
                mapTypeControl: false
            };

            var map = new google.maps.Map(document.getElementById('mapholder'),
                    mapOptions);

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

            for (var i = 0; i &lt; mapData.length; i++) {
                createMarker(i+1, map, mapData[i]); <!-- MARKERS! -->
                extendBounds(bounds, mapData[i]);
            }
            map.fitBounds(bounds);
            var maximumZoomLevel = 16;
            var minimumZoomLevel = 11;
            var ourZoom = defaultZoomLevel; // default zoom level

            var blistener = google.maps.event.addListener((map), 'bounds_changed', function(event) {
                if (this.getZoom(map.getBounds) &gt; 16) {
                    this.setZoom(maximumZoomLevel);
                }
                google.maps.event.removeListener(blistener);
            });
            });
        }

        function loadScript() {
            var script = document.createElement('script');
            script.type = 'text/javascript';
            script.src = "https://maps.googleapis.com/maps/api/js?v=3.exp&amp;libraries=places&amp;sensor=false&amp;callback=initialize";
            document.body.appendChild(script);
        }

        window.onload = loadScript;

    </script>

Następnie tworzę znaczniki za pomocą createMarker():

function createMarker(number, currentMap, currentMapData) {

   var marker = new MarkerWithLabel({
       position: new google.maps.LatLng(currentMapData[0], currentMapData[1]),
                 map: currentMap,
                 icon: '/img/sticker/empty.png',
                 shadow: '/img/sticker/bubble_shadow.png',
                 transparent: '/img/sticker/bubble_transparent.png',
                 draggable: false,
                 raiseOnDrag: false,
                 labelContent: ""+number,
                 labelAnchor: new google.maps.Point(3, 30),
                 labelClass: "mapIconLabel", // the CSS class for the label
                 labelInBackground: false
                });
            }

Ponieważ dodałem klasę mapIconLabel do znacznika Mogę dodać kilka reguł css w moim css:

.mapIconLabel {
    font-size: 15px;
    font-weight: bold;
    color: #FFFFFF;
    font-family: 'DINNextRoundedLTProMediumRegular';
}

A oto wynik:

MarkerWithIconAndLabel

47

Author: jakob,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2013-10-21 11:51:33

Nie mam wystarczająco reputacji, aby komentować odpowiedzi, ale chciałem zauważyć, że Google Chart API został przestarzały.

Ze strony głównej API :

Część infografiki Google Chart Tools została oficjalnie stan na 20 kwietnia 2012.

27

Author: Alex,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2012-07-05 20:42:52

Możesz pobrać zestaw numerowanych ikon ze źródeł podanych na tej stronie:

Google Marker Icons

Wtedy powinieneś być w stanie wykonać następujące czynności:

<!DOCTYPE html>
<html> 
<head> 
    <meta http-equiv="content-type" content="text/html; charset=UTF-8"/> 
    <title>Google Maps Demo</title> 
    <script type="text/javascript"
            src="http://maps.google.com/maps/api/js?sensor=false"></script> 

    <script type="text/javascript"> 
    function initialize() {

      var myOptions = {
        zoom: 11,
        center: new google.maps.LatLng(-33.9, 151.2),
        mapTypeId: google.maps.MapTypeId.ROADMAP
      }

      var map = new google.maps.Map(document.getElementById("map"), myOptions);

      var locations = [
        ['Bondi Beach', -33.890542, 151.274856, 4],
        ['Coogee Beach', -33.923036, 151.259052, 5],
        ['Cronulla Beach', -34.028249, 151.157507, 3],
        ['Manly Beach', -33.80010128657071, 151.28747820854187, 2],
        ['Maroubra Beach', -33.950198, 151.259302, 1]
      ];

      for (var i = 0; i < locations.length; i++) {
          var image = new google.maps.MarkerImage('marker' + i + '.png',
                      new google.maps.Size(20, 34),
                      new google.maps.Point(0, 0),
                      new google.maps.Point(10, 34));

          var location = locations[i];
          var myLatLng = new google.maps.LatLng(location[1], location[2]);
          var marker = new google.maps.Marker({
              position: myLatLng,
              map: map,
              icon: image,
              title: location[0],
              zIndex: location[3]
          });
      }
    }
    </script> 
</head> 
<body style="margin:0px; padding:0px;" onload="initialize();"> 
    <div id="map" style="width:400px; height:500px;"></div> 
</body> 
</html>

Zrzut ekranu z powyższego przykładu:

Google Numbered Marker Icons

Zauważ, że możesz łatwo dodać cień za markerami. Możesz sprawdzić przykład w Google Maps API Reference: Complex Markers aby uzyskać więcej informacji na ten temat.

21

Author: Daniel Vassallo,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2014-07-24 02:01:25

To zostało dodane do dokumentacji mapowania i nie wymaga kodu stron trzecich.

Możesz połączyć te dwie próbki:

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

Https://developers.google.com/maps/documentation/javascript/examples/icon-simple

Aby uzyskać kod w ten sposób:

var labelIndex = 0;
var labels = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ123456789';

function initialize() {
  var bangalore = { lat: 12.97, lng: 77.59 };
  var map = new google.maps.Map(document.getElementById('map-canvas'), {
    zoom: 12,
    center: bangalore
  });

  // This event listener calls addMarker() when the map is clicked.
  google.maps.event.addListener(map, 'click', function(event) {
    addMarker(event.latLng, map);
  });

  // Add a marker at the center of the map.
  addMarker(bangalore, map);
}

// Adds a marker to the map.
function addMarker(location, map) {
  // Add the marker at the clicked location, and add the next-available label
  // from the array of alphabetical characters.
  var marker = new google.maps.Marker({
    position: location,
    label: labels[labelIndex],
    map: map,
    icon: 'image.png'
  });
}

google.maps.event.addDomListener(window, 'load', initialize);

Zauważ, że jeśli masz więcej niż 35 markerów, ta metoda nie będzie działać, ponieważ Etykieta pokazuje tylko pierwszy znak (używając A-Z i 0-9 daje 35). Proszę zagłosować na ten problem z Mapami Google , aby zażądać zniesienia tego ograniczenia.

14

Author: John,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2016-06-11 19:59:38

Zrobiłem to używając rozwiązania podobnego do @zuzel.

Zamiast użyć domyślnego rozwiązania ( http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=7/FF0000/000000 ), można tworzyć te obrazy, jak chcesz, za pomocą JavaScript, bez żadnego kodu po stronie serwera.

Google google.mapy.Marker akceptuje Base64 dla swojej właściwości icon. Dzięki temu możemy utworzyć poprawny plik Base64 z pliku SVG.

Możesz zobaczyć kod, aby wyprodukować taki sam jak ten 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>

W tym demo tworzę SVG używając D3.js, a następnie przekształcony SVG do Canvas, więc mogę zmienić rozmiar obrazu, jak chcę, a następnie dostaję Base64 z metody canvas ' toDataURL.

Całe to demo było oparte na kodzie mojego kolegi @thiago-mata. Chwała dla niego.

10

Author: Estevão Lucas,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2015-10-01 15:17:16

Co ty na to? (Rok 2015)

1) Uzyskaj niestandardowy obraz znacznika.

var imageObj = new Image();
    imageObj.src = "/markers/blank_pin.png";

2) Utwórz canvas w RAM i narysuj na nim ten obrazek

imageObj.onload = function(){
    var canvas = document.createElement('canvas');
    var context = canvas.getContext("2d");
    context.drawImage(imageObj, 0, 0);
}

3) Napisz cokolwiek powyżej

context.font = "40px Arial";
context.fillText("54", 17, 55);

4) pobieraj surowe dane z canvas i dostarczaj je do Google API zamiast adresu URL

var image = {
    url: canvas.toDataURL(),
 };
 new google.maps.Marker({
    position: position,
    map: map,
    icon: image
 });

Pełny kod:

function addComplexMarker(map, position, label, callback){
    var canvas = document.createElement('canvas');
    var context = canvas.getContext("2d");
    var imageObj = new Image();
    imageObj.src = "/markers/blank_pin.png";
    imageObj.onload = function(){
        context.drawImage(imageObj, 0, 0);

        //Adjustable parameters
        context.font = "40px Arial";
        context.fillText(label, 17, 55);
        //End

        var image = {
            url: canvas.toDataURL(),
            size: new google.maps.Size(80, 104),
            origin: new google.maps.Point(0,0),
            anchor: new google.maps.Point(40, 104)
        };
        // the clickable region of the icon.
        var shape = {
            coords: [1, 1, 1, 104, 80, 104, 80 , 1],
            type: 'poly'
        };
        var marker = new google.maps.Marker({
            position: position,
            map: map,
            labelAnchor: new google.maps.Point(3, 30),
            icon: image,
            shape: shape,
            zIndex: 9999
        });
        callback && callback(marker)
    };
});

9

Author: ZuzEL,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2015-10-02 21:13:00

Google Maps wersja 3 ma wbudowaną obsługę etykiet znaczników. Nie musisz już generować własnych obrazów ani implementować klas innych firm. Etykiety Markerów

5

Author: ummdorian,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2015-11-25 14:51:02

Jest całkiem możliwe wygenerowanie oznakowanych ikon po stronie serwera, jeśli masz jakieś umiejętności programistyczne. Będziesz potrzebować biblioteki GD na serwerze, oprócz PHP. Działa dobrze dla mnie od kilku lat, ale co prawda trudno jest zsynchronizować obrazy ikon.

Robię to przez AJAX, wysyłając kilka parametrów, aby zdefiniować pustą ikonę oraz tekst i kolor, a także bgcolor, który ma być zastosowany. Oto moje PHP:

header("Content-type: image/png");
//$img_url = "./icons/gen_icon5.php?blank=7&text=BB";

function do_icon ($icon, $text, $color) {
$im = imagecreatefrompng($icon);
imageAlphaBlending($im, true);
imageSaveAlpha($im, true);

$len = strlen($text);
$p1 = ($len <= 2)? 1:2 ;
$p2 = ($len <= 2)? 3:2 ;
$px = (imagesx($im) - 7 * $len) / 2 + $p1;
$font = 'arial.ttf';
$contrast = ($color)? imagecolorallocate($im, 255, 255, 255): imagecolorallocate($im, 0, 0, 0); // white on dark?

imagestring($im, $p2, $px, 3, $text, $contrast);    // imagestring  ( $image, $font, $x, $y, $string, $color)

imagepng($im);
imagedestroy($im);
}
$icons =   array("black.png", "blue.png", "green.png", "red.png", "white.png", "yellow.png", "gray.png", "lt_blue.png", "orange.png");      // 1/9/09
$light =   array( TRUE,         TRUE,       FALSE,       FALSE,     FALSE,      FALSE,      FALSE,          FALSE,      FALSE);     // white text?

$the_icon = $icons[$_GET['blank']];             // 0 thru 8 (note: total 9)
$the_text = substr($_GET['text'], 0, 3);        // enforce 2-char limit
do_icon ($the_icon, $the_text,$light[$_GET['blank']] );

Jest wywoływany po stronie klienta przez coś takiego jak po: var image_file = "./our_icons / gen_icon.php?blank=" + escape(icons[color]) + "&text= " + iconStr;

3

Author: user1032402,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2013-02-27 00:46:27

Moje dwa grosze pokazujące, jak używać Google Charts API do rozwiązania tego problemu.

2

Author: sebastian serrano,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2013-03-05 22:45:41

Na podstawie@dave1010 odpowiedz, ale z zaktualizowanymi https linkami.

Znacznik numeryczny:

https://chart.googleapis.com/chart?chst=d_map_pin_letter&chld=7|FF0000|000000

Znacznik tekstu:

https://chart.googleapis.com/chart?chst=d_map_spin&chld=1|0|FF0000|12|_|Marker

0

Author: Pedro Lobito,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-05-23 11:54:58

Możesz użyć opcji Marker z etykietą w google-maps-utility-library-v3. Tutaj wpisz opis obrazka

Po prostu refer https://code.google.com/p/google-maps-utility-library-v3/wiki/Libraries

0

Author: bCliks,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2015-06-01 07:01:08

Odkryłem najlepszy sposób, aby to zrobić. Użyj Snap.svg aby utworzyć svg, a następnie użyć funkcji toDataURL (), która tworzy dane graficzne do włączenia jako ikony. Zauważ, że używam klasy SlidingMarker dla markera, który daje mi ładny ruch markera. Z Snap.svg możesz stworzyć dowolny rodzaj grafiki, a Twoja mapa będzie wyglądać fantastycznie.

var s = Snap(100, 100);
s.text(50, 50, store.name);
// Use more graphics here.
var marker = new SlidingMarker({
  position: {lat: store.lat, lng: store.lng},
  map: $scope.map,
  label: store.name, // you do not need this
  title: store.name, // nor this
  duration: 2000,
  icon: s.toDataURL()
});

0

Author: Αλέκος,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2015-10-17 15:39:15

NAJPROSTSZE ROZWIĄZANIE-UŻYJ SVG

Działa w: in IE9, IE10 , FF, Chrome, Safari

(Jeśli używasz innych przeglądarek, "Uruchom fragment kodu" i umieść komentarz)

Brak zewnętrznych zależności poza Google Maps API!

To jest całkiem łatwe pod warunkiem, że masz swoją ikonę w .format svg . Jeśli tak jest po prostu dodaj odpowiedni element tekstu i zmień jego zawartość aby dopasować się do Twoich potrzeb z JS.

Dodaj coś takiego do kodu .svg (jest to tekst "sekcja", który zostanie później zmieniony za pomocą JS):

<text id="1" fill="#20539F" font-family="NunitoSans-ExtraBold, Nunito Sans" font-size="18" font-weight="600" letter-spacing=".104" text-anchor="middle" x="50%" y="28">1</text>

Przykład: (częściowo skopiowany z @EstevãoLucas)

Ważne: Użyj poprawnych właściwości znacznika <text>. Notatka text-anchor="middle" x="50%" y="28" która Wyśrodkowuje dłuższe cyfry (więcej informacji: Jak umieścić i wyśrodkować tekst w prostokątu SVG)

Użyj encodeURIComponent() (prawdopodobnie zapewnia to kompatybilność z IE9 i 10)

// Most important part (use output as Google Maps icon)
function getMarkerIcon(number) {
  // inline your SVG image with number variable
  var svg = '<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="40" height="40" viewBox="0 0 40 40"> <defs> <rect id="path-1" width="40" height="40"/> <mask id="mask-2" width="40" height="40" x="0" y="0" fill="white"> <use xlink:href="#path-1"/> </mask> </defs> <g id="Page-1" fill="none" fill-rule="evenodd"> <g id="Phone-Portrait---320" transform="translate(-209 -51)"> <g id="Group" transform="translate(209 51)"> <use id="Rectangle" fill="#FFEB3B" stroke="#F44336" stroke-width="4" mask="url(#mask-2)" xlink:href="#path-1"/> <text id="1" fill="#20539F" font-family="NunitoSans-ExtraBold, Nunito Sans" font-size="18" font-weight="600" letter-spacing=".104" text-anchor="middle" x="50%" y="28">' + number + '</text> </g> </g> </g> </svg>';
  // use SVG without base64 see: https://css-tricks.com/probably-dont-base64-svg/
  return 'data:image/svg+xml;charset=utf-8,' + encodeURIComponent(svg);
}

// Standard Maps API code
var markers = [
  [1, -14.2350040, -51.9252800],
  [2, -34.028249, 151.157507],
  [3, 39.0119020, -98.4842460],
  [5, 48.8566140, 2.3522220],
  [9, 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) {
      var pos = new google.maps.LatLng(point[1], point[2]);

      new google.maps.Marker({
        position: pos,
        map: map,
        icon: getMarkerIcon(point[0]),         
      });

      bounds.extend(pos);
  });

  map.fitBounds(bounds);
}

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>        
  </head>

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

</html>

Więcej informacji o inline SVG w Google Maps: https://robert.katzki.de/posts/inline-svg-as-google-maps-marker

0

Author: jmarceli,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-05-23 12:34:41

Oto niestandardowe ikony ze zaktualizowanym stylem "visual refresh", które można szybko wygenerować za pomocą prostego .skrypt vbs. Dodałem również duży wstępnie wygenerowany zestaw, który możesz natychmiast użyć z wieloma opcjami kolorów: https://github.com/Concept211/Google-Maps-Markers

Użyj następującego formatu podczas łączenia się z plikami graficznymi hostowanymi na GitHub:

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

Kolor
czerwony, czarny, niebieski, zielony, szary, pomarańczowy, fioletowy, biały, żółty

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

Przykłady:

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

-1

Author: Concept211,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2015-08-04 19:48:42

score 62 · Accepted Answer

Niestety nie jest to łatwe. Możesz utworzyć własny znacznik na podstawie klasy OverlayView ( Przykład ) i umieścić w nim swój własny HTML, w tym licznik. To pozostawi ci bardzo podstawowy znacznik, którego nie możesz łatwo przeciągać ani dodawać cieni, ale jest on bardzo konfigurowalny.

Alternatywnie, możesz dodać etykietę do domyślnego znacznika . Będzie to mniej konfigurowalne, ale powinno działać. Przechowuje również wszystkie przydatne rzeczy w standardowym markerze tak.

Więcej o nakładkach można przeczytać w artykule Google Zabawa z obiektami MVC .

Edit: jeśli nie chcesz tworzyć klasy JavaScript, możesz użyć Google ' s Chart API. Na przykład:

Znacznik numeryczny:

http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=7|FF0000|000000

Znacznik tekstu:

http://chart.apis.google.com/chart?chst=d_map_spin&chld=1|0|FF0000|12|_|foo

Jest to szybka i łatwa trasa, ale jest mniej konfigurowalna i wymaga pobrania nowego obrazu przez Klienta dla każdego znacznika.