API Google Maps 3 - спеціальний колір маркера за замовчуванням (крапка)

Я бачив безліч інших питань, подібних до цього ( тут , тут і тут ), але всі вони прийняли відповіді, які не вирішують моєї проблеми. Найкращим рішенням, яке я знайшов у цій проблемі, є бібліотека StyledMarker , яка дозволяє вам визначати спеціальні кольори для маркерів, але я не можу змусити її використовувати маркер за замовчуванням (той, який ви отримуєте під час пошуку в картах Google google - за допомогою крапка в середині), вона просто видає маркерам літеру або спеціальну піктограму.

Ви можете динамічно запитувати зображення піктограм із графіків Google за допомогою URL-адрес:

http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=%E2%80%A2|FE7569

Як виглядає так: зображення розміром 21x34 пікселів, а наконечник шпильки знаходиться в положенні (10, 34)

І вам також потрібно окреме тіньове зображення (щоб воно не перекривалося значками поблизу):

http://chart.apis.google.com/chart?chst=d_map_pin_shadow

Як виглядає так: зображення розміром 40x37 пікселів, а наконечник шпильки знаходиться в положенні (12, 35)

При конструюванні свого MarkerImage s потрібно встановити розмір і точки прив’язки відповідно:

    var pinColor = "FE7569";
    var pinImage = new google.maps.MarkerImage("http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=%E2%80%A2|" + pinColor,
        new google.maps.Size(21, 34),
        new google.maps.Point(0,0),
        new google.maps.Point(10, 34));
    var pinShadow = new google.maps.MarkerImage("http://chart.apis.google.com/chart?chst=d_map_pin_shadow",
        new google.maps.Size(40, 37),
        new google.maps.Point(0, 0),
        new google.maps.Point(12, 35));

Потім ви можете додати маркер до своєї карти за допомогою:

        var marker = new google.maps.Marker({
                position: new google.maps.LatLng(0,0), 
                map: map,
                icon: pinImage,
                shadow: pinShadow
            });

Просто замініть "FE7569" кольоровим кодом, який ви шукаєте. Наприклад:

Кредит з - за Джек B Nimble для натхнення;)

Якщо ви використовуєте API Google Maps v3, ви можете використовувати setIconнапр

marker.setIcon('http://maps.google.com/mapfiles/ms/icons/green-dot.png')

Або як частина маркера init:

marker = new google.maps.Marker({
    icon: 'http://...'
});

Інші кольори:

• Синій маркер
• Червоний маркер
• Фіолетовий маркер
• Жовтий маркер
• Зелений маркер

Використовуйте наступний фрагмент коду, щоб оновити маркери за замовчуванням різними кольорами.

(BitmapDescriptorFactory.defaultMarker(BitmapDescriptorFactory.HUE_ROSE)

Ось приємне рішення, використовуючи сам API Google Maps. Ні зовнішньої служби, ні додаткової бібліотеки. І це дозволяє користувальницькі форми та різні кольори та стилі. У рішенні використовуються векторні маркери, які googlemaps api називає Symbols .

Окрім кількох та обмежених заздалегідь визначених символів, ви можете виготовити будь-яку форму будь-якого кольору, вказавши рядок шляху SVG ( Spec ).

Щоб використовувати його, замість того, щоб встановити параметр маркера "значок" на URL-адресу зображення, ви встановите його до словника, що містить параметри символів. Наприклад, мені вдалося створити один символ, який досить схожий на стандартний маркер:

function pinSymbol(color) {
    return {
        path: 'M 0,0 C -2,-20 -10,-22 -10,-30 A 10,10 0 1,1 10,-30 C 10,-22 2,-20 0,0 z M -2,-30 a 2,2 0 1,1 4,0 2,2 0 1,1 -4,0',
        fillColor: color,
        fillOpacity: 1,
        strokeColor: '#000',
        strokeWeight: 2,
        scale: 1,
   };
}

var marker = new google.maps.Marker({
   map: map,
   position: new google.maps.LatLng(latitude, longitude),
   icon: pinSymbol("#FFF"),
});

Я обережний, щоб ключова точка форми була 0,0, щоб уникнути необхідності визначення параметрів центрування значка маркера. Інший приклад шляху, той же маркер без крапки:

    path: 'M 0,0 C -2,-20 -10,-22 -10,-30 A 10,10 0 1,1 10,-30 C 10,-22 2,-20 0,0 z',

І ось у вас дуже простий і некрасивий кольоровий прапор:

    path: 'M 0,0 -1,-2 V -43 H 1 V -2 z M 1,-40 H 30 V -20 H 1 z',

Ви також можете створити контури за допомогою наочного інструменту типу Inkscape (GNU-GPL, мультиплатформа). Деякі корисні підказки:

• API Google просто приймає єдиний шлях, тому вам доведеться перетворити будь-який інший об’єкт (квадрат, цеглинка ...) у шлях і з'єднати їх як єдиний. Обидві команди в меню "Шлях".
• Щоб перемістити шлях до (0,0), перейдіть до режиму редагування шляху (F2), виберіть усі вузли управління та перетягніть їх. Переміщення об'єкта за допомогою F1 не змінить команди вузлів шляху.
• Щоб переконатися, що опорна точка знаходиться на (0,0), ви можете вибрати її поодинці і відредагувати координати вручну на верхній панелі інструментів.
• Після збереження SVG-файлу, що представляє собою XML, відкрийте його за допомогою редактора, знайдіть елемент svg: path і скопіюйте вміст атрибута 'd'.

Ну, найближче, що мені вдалося отримати зі StyledMarker, це це .

Куля посередині не дуже велика, як стандартна. Клас StyledMarker просто будує цей URL і просить google api створити маркер .

З прикладу використання класу використовуйте "% E2% 80% A2" як текст, як у:

var styleMaker2 = new StyledMarker({styleIcon:new StyledIcon(StyledIconTypes.MARKER,{text:"%E2%80%A2"},styleIconClass),position:new google.maps.LatLng(37.263477473067, -121.880502070713),map:map});

Вам потрібно буде змінити StyledMarker.js, щоб прокоментувати рядки:

  if (text_) {
    text_ = text_.substr(0,2);
  }

оскільки це обріже текстовий рядок до 2 символів.

Крім того, ви можете створити власні зображення маркерів на основі типових кольорів із потрібними кольорами та замінити маркер за замовчуванням з таким кодом:

marker = new google.maps.Marker({
  map:map,
  position: latlng,
  icon: new google.maps.MarkerImage(
    'http://www.gettyicons.com/free-icons/108/gis-gps/png/24/needle_left_yellow_2_24.png',
    new google.maps.Size(24, 24),
    new google.maps.Point(0, 0),
    new google.maps.Point(0, 24)
  )
});

Я трохи продовжив відповідь вокимона , зробивши його трохи зручнішим і для зміни інших властивостей.

function customIcon (opts) {
  return Object.assign({
    path: 'M 0,0 C -2,-20 -10,-22 -10,-30 A 10,10 0 1,1 10,-30 C 10,-22 2,-20 0,0 z M -2,-30 a 2,2 0 1,1 4,0 2,2 0 1,1 -4,0',
    fillColor: '#34495e',
    fillOpacity: 1,
    strokeColor: '#000',
    strokeWeight: 2,
    scale: 1,
  }, opts);
}

Використання:

marker.setIcon(customIcon({
  fillColor: '#fff',
  strokeColor: '#000'
}));

Або під час визначення нового маркера:

const marker = new google.maps.Marker({
  position: {
    lat: ...,
    lng: ...
  },
  icon: customIcon({
    fillColor: '#2ecc71'
  }),
  map: map
});

Привіт, ви можете використовувати піктограму як SVG та встановити кольори. Дивіться цей код

/*
 * declare map and places as a global variable
 */
var map;
var places = [
    ['Place 1', "<h1>Title 1</h1>", -0.690542, -76.174856,"red"],
    ['Place 2', "<h1>Title 2</h1>", -5.028249, -57.659052,"blue"],
    ['Place 3', "<h1>Title 3</h1>", -0.028249, -77.757507,"green"],
    ['Place 4', "<h1>Title 4</h1>", -0.800101286, -76.78747820,"orange"],
    ['Place 5', "<h1>Title 5</h1>", -0.950198, -78.959302,"#FF33AA"]
];
/*
 * use google maps api built-in mechanism to attach dom events
 */
google.maps.event.addDomListener(window, "load", function () {

    /*
     * create map
     */
    var map = new google.maps.Map(document.getElementById("map_div"), {
        mapTypeId: google.maps.MapTypeId.ROADMAP,
    });

    /*
     * create infowindow (which will be used by markers)
     */
    var infoWindow = new google.maps.InfoWindow();
    /*
     * create bounds (which will be used auto zoom map)
     */
    var bounds = new google.maps.LatLngBounds();

    /*
     * marker creater function (acts as a closure for html parameter)
     */
    function createMarker(options, html) {
        var marker = new google.maps.Marker(options);
        bounds.extend(options.position);
        if (html) {
            google.maps.event.addListener(marker, "click", function () {
                infoWindow.setContent(html);
                infoWindow.open(options.map, this);
                map.setZoom(map.getZoom() + 1)
                map.setCenter(marker.getPosition());
            });
        }
        return marker;
    }

    /*
     * add markers to map
     */
    for (var i = 0; i < places.length; i++) {
        var point = places[i];
        createMarker({
            position: new google.maps.LatLng(point[2], point[3]),
            map: map,
            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-0.576 1.188 -1.71 1.872t-2.43 0.684 -2.43 -0.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",
                scale: 0.6,
                strokeWeight: 0.2,
                strokeColor: 'black',
                strokeOpacity: 1,
                fillColor: point[4],
                fillOpacity: 0.85,
            },
        }, point[1]);
    };
    map.fitBounds(bounds);
});

<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?v=3"></script>
<div id="map_div" style="height: 400px;"></div>

оскільки версія 3.11 API Google map map Iconоб’єкт замінює MarkerImage. Піктограма підтримує ті самі параметри, що і MarkerImage. Я навіть виявив, що це трохи більш прямо вперед.

Приклад може виглядати так:

var image = {
  url: place.icon,
  size: new google.maps.Size(71, 71),
  origin: new google.maps.Point(0, 0),
  anchor: new google.maps.Point(17, 34),
  scaledSize: new google.maps.Size(25, 25)
};

для отримання додаткової інформації перевірте цей сайт

В Internet Explorer , це рішення не працює SSL.

Помилку в консолі можна побачити як:

SEC7111 : HTTPS безпеку скомпрометована це ,

Обхід : Оскільки один із користувачів тут запропонував замінити chart.apis.google.com на chart.googleapis.com, щоб вказати шлях URL-адреси, щоб уникнути помилки SSL.

Як уже згадували інші, відповідь вокімона чудова, але, на жаль, Google Maps трохи повільні, коли відразу багато маркерів на основі SymbolPath / SVG.

Схоже, використання URI даних набагато швидше, приблизно нарівні з PNG.

Крім того, оскільки це повний документ SVG, для точки можна використовувати належне заповнене коло. Шлях змінено, щоб він більше не зміщувався вгорі ліворуч, тому якор потрібно визначити.

Ось модифікована версія, яка генерує ці маркери:

var coloredMarkerDef = {
    svg: [
        '<svg viewBox="0 0 22 41" width="22px" height="41px" xmlns="http://www.w3.org/2000/svg">',
            '<path d="M 11,41 c -2,-20 -10,-22 -10,-30 a 10,10 0 1 1 20,0 c 0,8 -8,10 -10,30 z" fill="{fillColor}" stroke="#ffffff" stroke-width="1.5"/>',
            '<circle cx="11" cy="11" r="3"/>',
        '</svg>'
    ].join(''),
    anchor: {x: 11, y: 41},
    size: {width: 22, height: 41}
};

var getColoredMarkerSvg = function(color) {
    return coloredMarkerDef.svg.replace('{fillColor}', color);
};

var getColoredMarkerUri = function(color) {
    return 'data:image/svg+xml,' + encodeURIComponent(getColoredMarkerSvg(color));
};

var getColoredMarkerIcon = function(color) {
    return {
        url: getColoredMarkerUri(color),
        anchor: coloredMarkerDef.anchor,
        size: coloredMarkerDef.size,
        scaledSize: coloredMarkerDef.size
    }
};

Використання:

var marker = new google.maps.Marker({
    map: map,
    position: new google.maps.LatLng(latitude, longitude),
    icon: getColoredMarkerIcon("#FFF")
});

Мінус, як і зображення PNG, - весь прямокутник, який можна натискати. Теоретично не так складно простежити шлях SVG та створити полігон MarkerShape .

Ви можете використовувати цей код, він прекрасно працює.

 var pinImage = new google.maps.MarkerImage("http://www.googlemapsmarkers.com/v1/009900/");<br>

 var marker = new google.maps.Marker({
            position: yourlatlong,
            icon: pinImage,
            map: map
        });

Поєднайте маркер на основі символів , шлях якого малює контур, із символом "●" у центрі. Ви можете замінити крапку на інший текст ("A", "B" тощо) за бажанням.

Ця функція повертає параметри маркера із заданим текстом (за наявності), кольором тексту та кольором заливки. Він використовує колір тексту для контуру.

function createSymbolMarkerOptions(text, textColor, fillColor) {
    return {
        icon: {
            path: 'M 0,0 C -2,-20 -10,-22 -10,-30 A 10,10 0 1,1 10,-30 C 10,-22 2,-20 0,0 z',
            fillColor: fillColor,
            fillOpacity: 1,
            strokeColor: textColor,
            strokeWeight: 1.8,
            labelOrigin: { x: 0, y: -30 }
        },
        label: {
            text: text || '●',
            color: textColor
        }
    };
}

Я намагаюся два способи створити спеціальний маркер карти Google, цей запущений код canvg.js є найкращою сумісністю для браузера. Коментований код не підтримує IE11 терміново.

var marker;
var CustomShapeCoords = [16, 1.14, 21, 2.1, 25, 4.2, 28, 7.4, 30, 11.3, 30.6, 15.74, 25.85, 26.49, 21.02, 31.89, 15.92, 43.86, 10.92, 31.89, 5.9, 26.26, 1.4, 15.74, 2.1, 11.3, 4, 7.4, 7.1, 4.2, 11, 2.1, 16, 1.14];

function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 13,
    center: {
      lat: 59.325,
      lng: 18.070
    }
  });
  var markerOption = {
    latitude: 59.327,
    longitude: 18.067,
    color: "#" + "000",
    text: "ha"
  };
  marker = createMarker(markerOption);
  marker.setMap(map);
  marker.addListener('click', changeColorAndText);
};

function changeColorAndText() {
  var iconTmpObj = createSvgIcon( "#c00", "ok" );
  marker.setOptions( {
                icon: iconTmpObj
            } );
};

function createMarker(options) {
  //IE MarkerShape has problem
  var markerObj = new google.maps.Marker({
    icon: createSvgIcon(options.color, options.text),
    position: {
      lat: parseFloat(options.latitude),
      lng: parseFloat(options.longitude)
    },
    draggable: false,
    visible: true,
    zIndex: 10,
    shape: {
      coords: CustomShapeCoords,
      type: 'poly'
    }
  });

  return markerObj;
};

function createSvgIcon(color, text) {
  var div = $("<div></div>");

  var svg = $(
    '<svg width="32px" height="43px"  viewBox="0 0 32 43" xmlns="http://www.w3.org/2000/svg">' +
    '<path style="fill:#FFFFFF;stroke:#020202;stroke-width:1;stroke-miterlimit:10;" d="M30.6,15.737c0-8.075-6.55-14.6-14.6-14.6c-8.075,0-14.601,6.55-14.601,14.6c0,4.149,1.726,7.875,4.5,10.524c1.8,1.801,4.175,4.301,5.025,5.625c1.75,2.726,5,11.976,5,11.976s3.325-9.25,5.1-11.976c0.825-1.274,3.05-3.6,4.825-5.399C28.774,23.813,30.6,20.012,30.6,15.737z"/>' +
    '<circle style="fill:' + color + ';" cx="16" cy="16" r="11"/>' +
    '<text x="16" y="20" text-anchor="middle" style="font-size:10px;fill:#FFFFFF;">' + text + '</text>' +
    '</svg>'
  );
  div.append(svg);

  var dd = $("<canvas height='50px' width='50px'></cancas>");

  var svgHtml = div[0].innerHTML;

  //todo yao gai bu dui
  canvg(dd[0], svgHtml);

  var imgSrc = dd[0].toDataURL("image/png");
  //"scaledSize" and "optimized: false" together seems did the tricky ---IE11  &&  viewBox influent IE scaledSize
  //var svg = '<svg width="32px" height="43px"  viewBox="0 0 32 43" xmlns="http://www.w3.org/2000/svg">'
  //    + '<path style="fill:#FFFFFF;stroke:#020202;stroke-width:1;stroke-miterlimit:10;" d="M30.6,15.737c0-8.075-6.55-14.6-14.6-14.6c-8.075,0-14.601,6.55-14.601,14.6c0,4.149,1.726,7.875,4.5,10.524c1.8,1.801,4.175,4.301,5.025,5.625c1.75,2.726,5,11.976,5,11.976s3.325-9.25,5.1-11.976c0.825-1.274,3.05-3.6,4.825-5.399C28.774,23.813,30.6,20.012,30.6,15.737z"/>'
  //    + '<circle style="fill:' + color + ';" cx="16" cy="16" r="11"/>'
  //    + '<text x="16" y="20" text-anchor="middle" style="font-size:10px;fill:#FFFFFF;">' + text + '</text>'
  //    + '</svg>';
  //var imgSrc = 'data:image/svg+xml;charset=UTF-8,' + encodeURIComponent(svg);

  var iconObj = {
    size: new google.maps.Size(32, 43),
    url: imgSrc,
    scaledSize: new google.maps.Size(32, 43)
  };

  return iconObj;
};

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>Your Custom Marker </title>
  <style>
    /* Always set the map height explicitly to define the size of the div
       * element that contains the map. */
    #map {
      height: 100%;
    }
    /* Optional: Makes the sample page fill the window. */
    html,
    body {
      height: 100%;
      margin: 0;
      padding: 0;
    }
  </style>
</head>

<body>
  <div id="map"></div>
    <script src="https://canvg.github.io/canvg/canvg.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script async defer src="https://maps.googleapis.com/maps/api/js?callback=initMap"></script>
</body>

</html>

Я довго намагався вдосконалити намальований маркер Vokimon і зробити його більш схожим на один з Карт Google (і це в значній мірі вдалося). Це код, який я отримав:

let circle=true;

path = 'M 0,0  C -0.7,-9 -3,-14 -5.5,-18.5 '+   
'A 16,16 0 0,1 -11,-29 '+  
'A 11,11 0 1,1 11,-29 '+  
'A 16,16 0 0,1 5.5,-18.5 '+  
'C 3,-14 0.7,-9 0,0 z '+  
['', 'M -2,-28 '+  
'a 2,2 0 1,1 4,0 2,2 0 1,1 -4,0'][new Number(circle)];   

Я також її масштабував на 0,8.

змініть його на chart.googleapis.com для шляху, інакше SSL не працюватиме

Використовуючи швидку та Google Maps Api v3, це було найпростішим способом:

icon = GMSMarker.markerImageWithColor(UIColor.blackColor())

сподіваюся, що це комусь допоможе.

Це спеціальні кругові маркери

small_red:

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJCAYAAADgkQYQAAAAiklEQVR42mNgQIAoIF4NxGegdCCSHAMzEC+NUlH5v9rF5f+ZoCAwHaig8B8oPhOmKC1NU/P//7Q0DByrqgpSGAtSdOCAry9WRXt9fECK9oIUPXwYFYVV0e2ICJCi20SbFAuyG5uiECUlkKIQmOPng3y30d0d7Lt1bm4w301jQAOgcNoIDad1yOEEAFm9fSv/VqtJAAAAAElFTkSuQmCC

small_yellow:

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJCAYAAADgkQYQAAAAi0lEQVR42mNgQIAoIF4NxGegdCCSHAMzEC+NijL7v3p1+v8zZ6rAdGCg4X+g+EyYorS0NNv////PxMCxsRYghbEgRQcOHCjGqmjv3kKQor0gRQ8fPmzHquj27WaQottEmxQLshubopAQI5CiEJjj54N8t3FjFth369ZlwHw3jQENgMJpIzSc1iGHEwB8p5qDBbsHtAAAAABJRU5ErkJggg==

small_green:

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJCAYAAADgkQYQAAAAiElEQVR42mNgQIAoIF4NxGegdCCSHAMzEC81izL7n746/X/VmSowbRho+B8oPhOmKM02zfb/TCzQItYCpDAWpOhA8YFirIoK9xaCFO0FKXrY/rAdq6Lm280gRbeJNikWZDc2RUYhRiBFITDHzwf5LmtjFth3GesyYL6bxoAGQOG0ERpO65DDCQDX7ovT++K9KQAAAABJRU5ErkJggg==

small_blue:

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJCAYAAADgkQYQAAAAiklEQVR42mNgQIAoIF4NxGegdCCSHAMzEC81M4v6n56++n9V1RkwbWgY+B8oPhOmKM3WNu3/zJn/MbCFRSxIYSxI0YHi4gNYFRUW7gUp2gtS9LC9/SFWRc3Nt0GKbhNtUizIbmyKjIxCQIpCYI6fD/JdVtZGsO8yMtbBfDeNAQ2AwmkjNJzWIYcTAMk+i9OhipcQAAAAAElFTkSuQmCC

small_purple:

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJCAYAAADgkQYQAAAAi0lEQVR42mNgQIAoIF4NxGegdCCSHAMzEC+NMov6vzp99f8zVWfAdKBh4H+g+EyYorQ027T//2f+x8CxFrEghbEgRQcOFB/Aqmhv4V6Qor0gRQ8ftj/Equh2822QottEmxQLshubohCjEJCiEJjj54N8tzFrI9h36zLWwXw3jQENgMJpIzSc1iGHEwBt95qDejjnKAAAAABJRU5ErkJggg==

Вони є 9x9 png зображення.

Після того, як вони перейдуть на вашу сторінку, ви можете просто перетягнути їх, і ви отримаєте фактичний png файл.

Ви також можете використовувати кольоровий код.

 const marker: Marker = this.map.addMarkerSync({
    icon: '#008000',
    animation: 'DROP',
    position: {lat: 39.0492127, lng: -111.1435662},
    map: this.map,
 });

Іноді щось дійсно просте, можна відповісти складним. Я не кажу, що будь-яка з наведених відповідей є невірною, але я просто застосую, що це можна зробити так просто, як це:

Я знаю, що це питання давнє, але якщо хтось хоче змінити колір шпильки або маркера, перегляньте документацію: https://developers.google.com/maps/documentation/android-sdk/marker

додаючи маркер, просто встановіть властивість значка:

GoogleMap gMap;
LatLng latLng;
....
// write your code...
....
gMap.addMarker(new MarkerOptions()
    .position(latLng)
    .icon(BitmapDescriptorFactory.defaultMarker(BitmapDescriptorFactory.HUE_GREEN));

Є 10 кольорів за замовчуванням на вибір . Якщо цього недостатньо (просте рішення), то, певно, я б пішов на більш складні, наведені в інших відповідях, задовольнивши більш складну потребу.

ps: Я написав щось подібне в іншій відповіді, і тому я мав би посилатися на цю відповідь, але востаннє, коли я це зробив, мене попросили опублікувати відповідь, оскільки вона була такою короткою (як ця).