2014-09-24 20 views
0

Я не могу найти никакой документации или примеров для установки цвета маркеров в API версии 3.0. вы могли бы сделать это с 2.5, не любой знает, если цвет маркера поддерживается большеЗдесь Maps JavaScript API 3.0 Explorer Как установить цвет маркера

function addMarkersToMap(map) { 
    var parisMarker = new H.map.Marker({ lat: 55.560789, lng: 12.981141 }); 
    map.addObject(parisMarker); 
} 

ответ

4

Как указано в примере в API Explorer, создавая H.map.Marker без указания icon результатов в изображении по умолчанию. Если вам нужно иметь разные цветные значки, вам нужно будет создать их с помощью SVG Graphics.

function addSVGMarkers(map){ 
    var svgMarkup = '<svg style="left:-14px;top:-36px;"' + 
     'xmlns="http://www.w3.org/2000/svg" width="28px" height="36px" >' + 
     '<path d="M 19 31 C 19 32.7 16.3 34 13 34 C 9.7 34 7 32.7 7 31 C 7 29.3 9.7 ' + 
     '28 13 28 C 16.3 28 19 29.3 19 31 Z" fill="#000" fill-opacity=".2"></path>' + 
     '<path d="M 13 0 C 9.5 0 6.3 1.3 3.8 3.8 C 1.4 7.8 0 9.4 0 12.8 C 0 16.3 1.4 ' + 
     '19.5 3.8 21.9 L 13 31 L 22.2 21.9 C 24.6 19.5 25.9 16.3 25.9 12.8 C 25.9 9.4 24.6 ' + 
     '6.1 22.1 3.8 C 19.7 1.3 16.5 0 13 0 Z" fill="#fff"></path>' + 
     '<path d="M 13 2.2 C 6 2.2 2.3 7.2 2.1 12.8 C 2.1 16.1 3.1 18.4 5.2 20.5 L ' + 
     '13 28.2 L 20.8 20.5 C 22.9 18.4 23.8 16.2 23.8 12.8 C 23.6 7.07 20 2.2 ' + 
     '13 2.2 Z" fill="${COLOR}"></path>' + 
     '<text transform="matrix(1 0 0 1 13 18)" x="0" y="0" fill-opacity="1" ' + 
     'fill="#fff" text-anchor="middle" ' + 
     'font-weight="bold" font-size="13px" font-family="arial">${TEXT}</text></svg>' 

    // Add the first marker 
    var parisIcon = new H.map.Icon(
    svgMarkup.replace('${COLOR}', 'blue').replace('${TEXT}', 'P')), 
    parisMarker = new H.map.Marker({lat: 55.5607, lng: 12.9811 }, 
     {icon: parisIcon}); 

    map.addObject(parisMarker); 
} 

Чтобы обновить цвет, просто создать новый H.map.Icon заменить атрибут маркера icon.

+0

пример с иконкой соответствующим образом близко к стандартному маркеру ... Я обнаружил, что нужно установить якорь, чтобы получить над SVG маркер помещается только право (создание значка с помощью нового H.map.Icon (svgMarkupReplaced , {anchor: new H.math.Point (13,30)}), где переменная имела вышеуказанный знак SVG с заменой COLOR и TEXT). Если вы собираетесь использовать это много, вы должны иметь возможность создать подкласс ColoredMarker Marker, который устанавливает это из параметра конструктора, это было бы непросто. –

0

На всякий случай, если кому-то нужен значок маркера deafult в svg с текстом внутри него.

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Capa_1" x="0px" y="0px" width="32" height="32" viewBox="0 0 263.335 263.335" style="enable-background:new 0 0 263.335 263.335;" xml:space="preserve"> 
<g> 
    <g xmlns="http://www.w3.org/2000/svg"> 
     <path d="M40.479,159.021c21.032,39.992,49.879,74.22,85.732,101.756c0.656,0.747,1.473,1.382,2.394,1.839 c0.838-0.396,1.57-0.962,2.178-1.647c80.218-61.433,95.861-125.824,96.44-128.34c2.366-9.017,3.57-18.055,3.57-26.864 C237.389,47.429,189.957,0,131.665,0C73.369,0,25.946,47.424,25.946,105.723c0,8.636,1.148,17.469,3.412,26.28" fill="${COLOR}"/> 
    <text x="80" y="130" font-family="sans-serif" font-size="5em" fill="white">${TEXT}</text> 
    </g> 
</g></svg> 
Смежные вопросы