Как применить пользовательский стиль CSS на маркеры, не применять изображение или значок - PullRequest
Новая
       43

Как применить пользовательский стиль CSS на маркеры, не применять изображение или значок

0 голосов
/ 02 октября 2019

Я хочу отобразить содержимое маркера и собственный стиль для метки маркера. После поиска в Google. Все примеры говорят о том, как установить Icon и предоставить URL-адрес изображения, который не нужен.

Есть ли способ настроить стиль метки, как показано ниже?

Спасибо 

    <Marker
        key={loc.estimate_address}
        position={{
            lat: loc.lat,
            lng: loc.lng
        }}

        // I can only put STRING here! I thought we could put html snippet <label> XXXX </label>
        label={this.getMarkerLabel(loc)}


        onClick={e => this.onMarkerClick(null, loc, e)}
    >

Ожидается

enter image description here

Текущая версия

enter image description here

1 Ответ

1 голос
/ 02 октября 2019

Я думаю, что вы можете достичь ожидаемого результата, используя SVG и написав на нем текст, используя метод setIcon , например: 

function initialize() {

    var myLatLng = new google.maps.LatLng(44.4375, 12.3358),
        myOptions = {
            zoom: 5,
            center: myLatLng,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        },
        map = new google.maps.Map(document.getElementById('map-canvas'), myOptions),
        marker = new google.maps.Marker({
            position: myLatLng,
            map: map
        });

    marker.setMap(map);
    marker.setIcon(getIcon('Test'));
}

function getIcon(message) {
    var svg = '<svg width="140" height="120" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg"><g><path stroke="#000000" fill="#FF0000" stroke-width="5" d="m8,11.26568l123.54244,-3.20295l0.45756,54.45019l-41.63838,1.83026l-54.45019,38.89299l23.33579,-41.18081l-49.87454,3.20295l-1.37269,-53.99262z" id="svg_2"/><text fill="#000000" stroke-width="0" x="152.85671" y="81.24476" id="svg_3" font-size="24" font-family="serif" text-anchor="middle" xml:space="preserve" transform="matrix(1.4942564059587096,0,0,1.018637442728764,-156.2965919229571,-38.08934344654804) " stroke="#000000">' + message + '</text></g></svg>'; 

    return {
            url: 'data:image/svg+xml;base64,' + window.btoa(svg),
            scaledSize: new google.maps.Size(60, 60),
            origin: new google.maps.Point(0, 0),
            anchor: new google.maps.Point(20,40)
        };
}

initialize();
#map-canvas {
    height: 400px;
    width: 600px;
}
<script src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
<div id="map-canvas"></div>

jsfiddle

...