Używanie czcionek ikon jako znaczników w Google Maps V3

Zastanawiałem się, czy w Google Maps V3 można zastąpić domyślny znacznik ikon czcionek (np. Font Awesome). Aby pokazać / wstawić je w dokumencie HTML lub PHP, kod znacznika będzie wynosił: 

<i class="icon-map-marker"></i>
Author: gfaw, 2013-05-04
Source

6 answers

Oto moja próba zrobienia tego samego (używając biblioteki narzędzi "markerwithlabel") zanim zdałem sobie sprawę, że Nathan zrobił to samo bardziej elegancko powyżej: http://jsfiddle.net/f3xchecf/ 

function initialize() {

    var myLatLng = new google.maps.LatLng( 50, 50 ),
        myOptions = {
            zoom: 4,
            center: myLatLng,
            mapTypeId: google.maps.MapTypeId.ROADMAP
            },

        map = new google.maps.Map( document.getElementById( 'map-canvas' ), myOptions ),

     marker = new MarkerWithLabel({
       position: myLatLng,
       draggable: true,
       raiseOnDrag: true,
       icon: ' ',
       map: map,
         labelContent: '<i class="fa fa-send fa-3x" style="color:rgba(153,102,102,0.8);"></i>',
       labelAnchor: new google.maps.Point(22, 50)
     });

    marker.setMap( map );
}

initialize();
 27
Author: Jason,
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-12-14 10:05:08

Właśnie miałem ten sam problem-postanowiłem zrobić szybką i brudną konwersję i host na GitHubie.

Https://github.com/nathan-muir/fontawesome-markers

Możesz ręcznie dołączyć plik JS lub użyć npm install fontawesome-markers lub bower install fontawesome-markers.

Wystarczy załączyć plik javascript fontawesome-markers.min.js i można go używać w następujący sposób: 

new google.maps.Marker({
    map: map,
    icon: {
        path: fontawesome.markers.EXCLAMATION,
        scale: 0.5,
        strokeWeight: 0.2,
        strokeColor: 'black',
        strokeOpacity: 1,
        fillColor: '#f8ae5f',
        fillOpacity: 0.7
    },
    clickable: false,
    position: new google.maps.LatLng(lat, lng)
});

Edit (Kwiecień-2016): teraz są pakiety dla v4.2 -> v4.6.1

 80
Author: nathan-m,
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-04-18 01:57:03

Wiem, że to stary post, ale na wszelki wypadek możesz użyć obiektu MarkerLabel teraz:

var marker = new google.maps.Marker({
    position: location,
    map: map,
    label: {
        fontFamily: 'Fontawesome',
        text: '\uf299'
    }
});
Zadziałało dla mnie.

Zobacz ikonę fontawesome na znaczniku Mapy google.

Indeks Google Maps Maker

 31
Author: guido,
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-06-09 22:12:19

W nowoczesnej przeglądarce można użyć canvas do renderowania czcionki do formatu png, a następnie użyć schematu Uri danych: 


  function getIcon(glyph, color) {
    var canvas, ctx;
    canvas = document.createElement('canvas');
    canvas.width = canvas.height = 20;
    ctx = canvas.getContext('2d');
    if (color) {
      ctx.strokeStyle = color;
    }
    ctx.font = '20px FontAwesome';
    ctx.fillText(glyph, 0, 16);
    return canvas.toDataURL();
  }

Na przykład: getIcon("\uf001") dla nuty muzycznej.

 13
Author: Roman,
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-14 14:23:18

Lekki roztwór

  • fontawesome-markery: 480kb
  • markerwithlabel: 25kb

Aby uniknąć tych zależności, po prostu przejdź do fontawesome-markers , znajdź ścieżkę dla wybranej ikony i dołącz ją w następujący sposób: 

var icon = {
    path: "M27.648-41.399q0-3.816-2.7-6.516t-6.516-2.7-6.516 2.7-2.7 6.516 2.7 6.516 6.516 2.7 6.516-2.7 2.7-6.516zm9.216 0q0 3.924-1.188 6.444l-13.104 27.864q-.576 1.188-1.71 1.872t-2.43.684-2.43-.684-1.674-1.872l-13.14-27.864q-1.188-2.52-1.188-6.444 0-7.632 5.4-13.032t13.032-5.4 13.032 5.4 5.4 13.032z",
    fillColor: '#E32831',
    fillOpacity: 1,
    strokeWeight: 0,
    scale: 0.65
}

marker = new google.maps.Marker({
    position: myLatlng,
    map: map,
    icon: icon
});
 10
Author: Jeremy Lynch,
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-10-28 03:32:35

Stworzyłem prostą bibliotekę JS, która generuje ładne znaczniki SVG za pomocą ikon Font Awesome. https://github.com/jawj/MapMarkerAwesome

 0
Author: jawj,
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-17 15:52:38