Использование знаковых шрифтов в качестве маркеров в Картах Google V3

Ответ 1

Здесь моя попытка сделать то же самое (используя библиотеку утилиты "markerwithlabel" ), прежде чем я понял, что Натан сделал это более элегантно: 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();

Ответ 2

У меня была такая же проблема - я решил сделать быстрое и грязное преобразование и хост на github.

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

Вы можете вручную включить JS файл или использовать npm install fontawesome-markers или bower install fontawesome-markers.

Просто включите javascript файл fontawesome-markers.min.js, и вы можете использовать их так:

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)
});

Изменить (апрель-2016): теперь пакеты для v4.2 → v4.6.1

Ответ 3

Я знаю, что это старый пост, но на всякий случай вы можете теперь использовать объект MarkerLabel:

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

Работал для меня.

.

Ссылка на Google Maps Maker

Ответ 4

В современном браузере можно использовать холст для рендеринга шрифта в png, а затем использовать схему URI данных:

  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();
  }

Например: getIcon("\uf001") для ноты.

Ответ 5

Малое весовое решение

• fontawesome-markers: 480kb
• marker с меткой: 25kb

Чтобы избежать этих зависимостей, просто перейдите в fontawesome-markers, найдите путь для нужного значка и включите его следующим образом:

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
});

Ответ 6

Я собрал простую JS-библиотеку, которая генерирует красивые маркеры SVG, используя значки Font Awesome. https://github.com/jawj/MapMarkerAwesome