Google मैप्स एपीआई 3 - डिफ़ॉल्ट (डॉट) मार्कर के लिए कस्टम मार्कर रंग

282

मैंने इस ( यहाँ , यहाँ और यहाँ ) के समान कई अन्य प्रश्न देखे हैं , लेकिन उन्होंने सभी उत्तर स्वीकार किए हैं जो मेरी समस्या का समाधान नहीं करते हैं। समस्या के लिए मैंने जो सबसे अच्छा समाधान खोजा है वह है स्टिल्डमेकर पुस्तकालय, जो आपको मार्करों के लिए कस्टम रंग परिभाषित करने देता है, लेकिन मैं इसे डिफ़ॉल्ट मार्कर (जो आपको तब मिलता है जब आप Google मानचित्र खोज करते हैं - का उपयोग नहीं कर सकते बीच में एक डॉट), यह सिर्फ एक पत्र के साथ या एक विशेष आइकन के साथ मार्कर प्रदान करने के लिए लगता है।

google-maps-api-3 
— jackocnr
स्रोत

जवाबों:

533

आप Google चार्ट एपीआई से यूआरएल के साथ आइकन छवियों को गतिशील रूप से अनुरोध कर सकते हैं :

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 का निर्माण करते हैं, तो आपको उसके अनुसार आकार और एंकर पॉइंट सेट करने की आवश्यकता होती है:

    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" को उसके बाद वाले कलर कोड से बदल दें। उदाहरण के लिए:डिफ़ॉल्ट रंगहरापीला

प्रेरणा के लिए जैक बी निंबले के कारण क्रेडिट ;)

— मैट जलता है
स्रोत
36
जबकि मुझे वास्तव में यह उत्तर पसंद है, Infographics के संबंध में Google चार्ट API (ऊपर दिया गया लिंक) को हटा दिया गया है।
— जोंथेंत्री
3
यकीन नहीं होता कि यह नया है, लेकिन आप इसमें स्वतः निर्मित छाया को जोड़ सकते हैं। उदाहरण, chart.apis.google.com/…
— लियोनेल चान
@ LionelChan, आप कर सकते हैं, लेकिन यह बिल्कुल लाइन नहीं करता है और यह अन्य आइकन के शीर्ष पर भी ओवरलैप करेगा। आप यह सुनिश्चित करना चाहते हैं कि सभी छाया पिन से पहले खींची गई हैं।
— मैट
1
@ अच्छी तरह से यह कुछ के लिए एक आसान समाधान हो सकता है, क्यों नहीं;)
— लियोनेल चान
1
मार्करों को बनाने का यह तरीका 14 मार्च 2019 के रूप में चित्रित किया गया है। यह अब और काम नहीं करेगा: त्रुटि ५०५०
— जॉनी
372

यदि आप Google मैप्स एपीआई v3 का उपयोग करते हैं तो आप setIconउदाहरण के लिए उपयोग कर सकते हैं

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

या मार्कर इनिट के भाग के रूप में:

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

अन्य रंग:

विभिन्न रंगों के साथ डिफ़ॉल्ट मार्करों को अपडेट करने के लिए कोड के निम्नलिखित टुकड़े का उपयोग करें।

(BitmapDescriptorFactory.defaultMarker(BitmapDescriptorFactory.HUE_ROSE)
— माइक
स्रोत
50
यह उत्कृष्ट है। : यदि आप अधिक माउस और रंग विकल्प चाहते हैं, तो आप उन्हें यहाँ पा सकते हैं sites.google.com/site/gmapsdevelopment
— जॉनी Oshika
121

यहाँ Gooogle Maps API का उपयोग करके एक अच्छा समाधान दिया गया है। कोई बाहरी सेवा नहीं, कोई अतिरिक्त पुस्तकालय नहीं। और यह कस्टम आकार और कई रंगों और शैलियों को सक्षम करता है। समाधान vectorial मार्कर का उपयोग करता है, जो GOOGLEMAPS API कॉल चिह्न ।

कुछ और सीमित पूर्वनिर्धारित प्रतीकों के अलावा, आप किसी भी रंग के किसी भी आकार को एसवीजी पथ स्ट्रिंग ( स्पेस ) निर्दिष्ट करके तैयार कर सकते हैं ।

इसका उपयोग करने के लिए, छवि यूआरएल के लिए 'आइकन' मार्कर विकल्प सेट करने के बजाय, आप इसे प्रतीक विकल्पों वाले एक शब्दकोश में सेट करते हैं। उदाहरण के लिए, मैं एक प्रतीक को बनाने में कामयाब रहा जो मानक मार्कर के समान है:

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',

वेक्टर ध्वज

आप एक दृश्य उपकरण का उपयोग करके पथ भी बना सकते हैं जैसे इंकस्केप (जीएनयू-जीपीएल, मल्टीप्लायर)। कुछ उपयोगी संकेत:

  • Google API केवल एक पथ को स्वीकार करता है, इसलिए आपको किसी भी अन्य ऑब्जेक्ट (वर्ग, cercle ...) को एक पथ में बदलना होगा और उन्हें एक एकल के रूप में जोड़ना होगा। दोनों पथ मेनू पर कमांड करते हैं।
  • पथ को (0,0) पर ले जाने के लिए, पथ संपादन मोड (F2) पर जाएं सभी नियंत्रण नोड का चयन करें और उन्हें खींचें। ऑब्जेक्ट को F1 के साथ ले जाने पर, नोड नोड कॉर्ड को नहीं बदलेगा।
  • यह सुनिश्चित करने के लिए कि संदर्भ बिंदु (0,0) पर है, आप इसे अकेले चुन सकते हैं और शीर्ष टूलबार पर हाथों से कोर्डर्स को संपादित कर सकते हैं।
  • एसवीजी फ़ाइल को सहेजने के बाद, जो एक एक्सएमएल है, इसे एक संपादक के साथ खोलें, एसवीजी के लिए देखें: पथ तत्व और 'डी' विशेषता की सामग्री की प्रतिलिपि बनाएँ।
— vokimon
स्रोत
4
यह एक अच्छा जवाब है। अगर कोई ऐसे रास्ते से आ सकता है जो असली पिन की तरह दिखता है, तो यह बहुत अच्छा जवाब होगा
— mkoryak
2
यह समाधान URL से पिन छवि को लोड करने से बेहतर है। क्योंकि, यदि आपके पास एक ही नक्शे में कई पिन हैं, तो यह मैप लोड समय बढ़ाएगा।
— अहसान
1
@mkoryak i ने उन रास्तों को जोड़ने के बारे में कुछ संकेत दिए कि खुद को अक्सस्केप जैसे ग्राफिकल टूल के साथ कैसे बनाया जाए। यदि आप किसी भी मौजूदा पीएनजी से मेल खाना चाहते हैं, तो बस इसे इंकस्केप में आयात करें और इसे पथ के संदर्भ के रूप में उपयोग करें।
— वोकिमोन
क्या कोई एक डॉट के अलावा गुब्बारे में कुछ डाल सकता है?
— रॉस रोजर्स
1
आप इसे ड्रा करें। एकमात्र दोष यह है कि पिन और डॉट सभी समान पथ होना चाहिए। इसका मतलब है कि डॉट एक डॉट नहीं बल्कि एक छेद है। जो भी आकृति आप उपयोग करते हैं उसके बजाय डॉट उस आकार के साथ पिन आकार में एक छेद होगा। (आप इसके माध्यम से देखते हैं) विभिन्न रंगों के साथ कई रंगीन आकृति को जोड़ना अच्छा होगा, लेकिन जैसा कि मैं जानता हूं कि यह एक एकल (गैर-निरंतर) पथ का समर्थन करता है।
— वोकिमोन
14

अच्छी तरह से सबसे करीबी चीज जो मैं स्टाइलल्डमेकर के साथ प्राप्त करने में सक्षम हूं, यह है ।

हालांकि बीच में गोली डिफ़ॉल्ट के रूप में काफी बड़ी नहीं है, हालांकि। स्टाइलल्डमेकर वर्ग बस इस url को बनाता है और मार्कर बनाने के लिए Google एपीआई से पूछता है ।

से कक्षा उपयोग उदाहरण उपयोग "% 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});

आपको लाइनों को टिप्पणी करने के लिए स्टाइलिफ़र्डमार्क.जैस को मॉडिफाई करना होगा:

  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)
  )
});
— जैक बी निंबले
स्रोत
प्रतिक्रिया के लिए धन्यवाद, लेकिन मैं पहले से ही एससीआई पात्रों का उपयोग करके बिंदु को फिर से बनाने की कोशिश कर रहा हूं, लेकिन आप बस इसे देखने के लिए नहीं मिल सकते हैं, और मैं कुछ अलग करने के लिए व्यवस्थित नहीं करना चाहता हूं - यह वास्तव में अव्यवसायिक लग रहा है। और हां कस्टम मार्कर छवि मेरा वर्तमान वर्कअराउंड है (मैंने यहां से डिफ़ॉल्ट लाल पिन पकड़ा: maps.google.com/intl/en_us/mapfiles/ms/micons/red-dot.png , जिसे मैंने GIMP में खोला और उपयोग किया था colourise उपकरण), लेकिन यह भी सही नहीं है।
— jackocnr
मैं इस उत्तर को स्वीकार कर रहा हूं क्योंकि यह एकमात्र है, और मुझे लगता है कि कोई अन्य समाधान नहीं है।
— जैकोप्रन
क्षमा करें, मैं अधिक उपयोगी नहीं हो सकता। कभी-कभी एकमात्र उत्तर कम वांछनीय होता है।
— जैक बी निंबले
12

मैंने वोकिमन के उत्तर को थोड़ा बढ़ा दिया है , जिससे अन्य गुणों को बदलने के लिए यह थोड़ा अधिक सुविधाजनक हो गया है।

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
});
— चपटी कील
स्रोत
11

नमस्ते आप एसवीजी के रूप में आइकन का उपयोग कर सकते हैं और रंग सेट कर सकते हैं। इस कोड को देखें

/*
 * 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>
स्निपेट का विस्तार करें

— पाब्लो वीण्टिमिला वर्गास
स्रोत
6

गूगल मैप्स एपीआई के संस्करण 3.11 के बाद से, 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)
};

अधिक जानकारी के लिए इस साइट की जाँच करें

— 5mark
स्रोत
1
इस सवाल का जवाब नहीं, एक टिप्पणी होनी चाहिए
— mkoryak
4

में इंटरनेट एक्सप्लोरर , इस समाधान ssl में काम नहीं करता।

कंसोल में त्रुटि को निम्नानुसार देखा जा सकता है:

SEC7111 : HTTPS सुरक्षा द्वारा समझौता किया जाता है ,

वर्कअराउंड : जैसा कि यहाँ सुझाया गया है कि एक उपयोगकर्ता ने SSL त्रुटि से बचने के लिए URL पथ के लिए chart.apis.google.com को chart.googleapis.com पर प्रतिस्थापित किया है ।

— devgal
स्रोत
3

जैसा कि दूसरों ने उल्लेख किया है, वोकिमोन का उत्तर बहुत अच्छा है लेकिन दुर्भाग्य से Google मैप्स थोड़ा धीमा है जब एक साथ कई SymbolPath / 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 छवि की तरह, पूरी आयत क्लिक करने योग्य है। सिद्धांत रूप में यह एसवीजी पथ का पता लगाने और एक मार्करशेप बहुभुज उत्पन्न करने के लिए बहुत मुश्किल नहीं है ।

— बॉब
स्रोत
2

आप इस कोड का उपयोग कर सकते हैं यह ठीक काम करता है।

 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
        });
— खुर्रम
स्रोत
2

एक प्रतीक-आधारित मार्कर को मिलाएं जिसका पथ केंद्र के लिए '●' वर्ण के साथ रूपरेखा तैयार करता है। आप वांछित के रूप में अन्य पाठ ('ए', 'बी', आदि) के साथ डॉट को स्थानापन्न कर सकते हैं।

यह फ़ंक्शन किसी दिए गए पाठ (यदि कोई हो), पाठ के रंग और रंग को भरने के साथ एक मार्कर के विकल्प देता है। यह आउटलाइन के लिए टेक्स्ट कलर का उपयोग करता है।

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
        }
    };
}
— एडवर्ड ब्रे
स्रोत
1

मैं कस्टम गूगल मैप मार्कर बनाने के दो तरीके आज़माता हूं, यह रन कोड 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>
स्निपेट का विस्तार करें

— रवि
स्रोत
1

मैंने लंबे समय तक कोशिश की कि वोकेमोन के खींचे गए मार्कर को बेहतर बनाया जाए और इसे 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 से भी बढ़ाया।

— नटालिया खोटियात्सेवा
स्रोत
0

पथ के लिए इसे chart.googleapis.com पर बदलें, अन्यथा SSL काम नहीं करेगा

— user2465583
स्रोत
0

स्विफ्ट और Google मैप्स Api v3 का उपयोग करना, यह सबसे आसान तरीका था जो मैं इसे करने में सक्षम था:

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

आशा है कि यह किसी की मदद करता है।

— JoeGalind
स्रोत
0

ये कस्टम सर्कुलर मार्कर हैं

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 चित्र हैं।

एक बार जब वे आपके पृष्ठ पर आ जाते हैं तो आप उन्हें हटा सकते हैं और आपके पास वास्तविक पीएनजी फ़ाइल होगी।

— फवाद अली
स्रोत
0

आप कलर कोड का भी उपयोग कर सकते हैं।

 const marker: Marker = this.map.addMarkerSync({
    icon: '#008000',
    animation: 'DROP',
    position: {lat: 39.0492127, lng: -111.1435662},
    map: this.map,
 });
— shanthan
स्रोत
0

कभी-कभी वास्तव में सरल कुछ, जटिल उत्तर दिया जा सकता है। मैं यह नहीं कह रहा हूं कि उपरोक्त उत्तर में से कोई भी गलत है, लेकिन मैं सिर्फ यह कहूंगा कि यह इस तरह से किया जा सकता है:

मुझे पता है कि यह सवाल पुराना है, लेकिन अगर कोई भी बस पिन या मार्कर का रंग बदलना चाहता है, तो दस्तावेज देखें: 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: मैंने एक और उत्तर में कुछ ऐसा ही लिखा है और इसलिए मुझे उस उत्तर का उल्लेख करना चाहिए, लेकिन पिछली बार जब मैंने ऐसा किया था, तो मुझे उत्तर पोस्ट करने के लिए कहा गया था क्योंकि यह बहुत छोटा था (जैसा कि यह एक है) ।।

— badaboomskey
स्रोत
हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.