গুগল ম্যাপস এপিআই v3 এ কীভাবে এসভিজি মার্কার ব্যবহার করবেন


91

আমি কি আমার রূপান্তরিত image.svg কে গুগল ম্যাপ আইকন হিসাবে ব্যবহার করতে পারি? আমি আমার পিএনজি চিত্রটি এসজিজে রূপান্তর করছিলাম এবং আমি এটি গুগল ম্যাপের প্রতীক হিসাবে ব্যবহার করতে চাই যা ঘোরানো যায়। আমি ইতিমধ্যে গুগল ম্যাপ সিম্বলটি ব্যবহার করার চেষ্টা করেছি তবে আমি গাড়ি, মানুষ ইত্যাদির মতো একটি আইকন রাখতে চাই ... এজন্য আমি আমার কিছু পিএনজি ফাইলকে এসভিজিতে রূপান্তরিত করেছি, যেমন এই সাইটের জন্য তিনি এই HTTP: / /www.goprotravelling.com/


4
এই অনুরূপ প্রশ্নের সন্ধানকারীদের জন্য: একটি আংশিক আই 9++ এখানে সামঞ্জস্যপূর্ণ সমাধান: স্ট্যাকওভারফ্লো.com /a/ 30890373 / 634386 ক্যানভাসের পরিবর্তে ডিওমে একটি এসভিজি রাখবে যাতে আপনি সিএসএস 3 এর পরে কারসাজি করতে পারেন (যদি আপনি ' বিশেষ করে ফ্লাইতে সেই উপাদানটি ঘোরানোর জন্য পুনরায় চেষ্টা করছি)।
মাইক Kormentedy

উত্তর:


146

আপনি এসভিজি পাথ স্বরলিপি ব্যবহার করে আপনার আইকনটি রেন্ডার করতে পারেন ।

আরও তথ্যের জন্য গুগল ডকুমেন্টেশন দেখুন ।

এখানে একটি প্রাথমিক উদাহরণ:

var icon = {

    path: "M-20,0a20,20 0 1,0 40,0a20,20 0 1,0 -40,0",
    fillColor: '#FF0000',
    fillOpacity: .6,
    anchor: new google.maps.Point(0,0),
    strokeWeight: 0,
    scale: 1
}

var marker = new google.maps.Marker({
    position: event.latLng,
    map: map,
    draggable: false,
    icon: icon
});

মার্কার এসভিজি আইকনটি কীভাবে প্রদর্শন এবং স্কেল করা যায় সে সম্পর্কে এখানে একটি কার্যকারী উদাহরণ রয়েছে:

জেএসফিডাল ডেমো

সম্পাদনা করুন:

জটিল আইকন সহ এখানে আরও একটি উদাহরণ:

জেএসফিডাল ডেমো

সম্পাদনা 2:

আইকন হিসাবে আপনি কীভাবে একটি এসভিজি ফাইল রাখতে পারেন তা এখানে:

জেএসফিডাল ডেমো


, গাড়ী এসভিজি করা খুব কঠিন।
জেমেজ

আপনার যে গাড়িটি চান তার কোনও এসভিজি চিত্র আছে? তারপরে এটি কেবল একটি পাঠ্য সম্পাদক দিয়ে খুলুন এবং এর মধ্যে পথটি আবিষ্কার করুন!
মিস্টার ইউপিডাউন

4
এসভিজি সাধারণত আইকন এবং অন্যান্য চিহ্নগুলির জন্য ব্যবহৃত হয়। এক রঙ এটি ঠিক একটি পথ, একটি ফন্টের চিঠির মতো। সুবিধাগুলি হ'ল আপনি মান সহজেই স্কেল করতে, এটিকে ঘোরানো এবং এর রঙ পরিবর্তন করতে পারেন quality এটি ভেক্টরের আকৃতি।
মিস্টার ইউপিডাউন

4
এই বছর আমি পড়া সবচেয়ে দরকারী জিনিস ছিল! অনেক ধন্যবাদ
জোনাথন লা'ফায়

4
@ মিআরসিপিডাউন তবে অবশ্যই এসভিজি মানচিত্রের বাইরে কাজ করছে - সেখানে কখনও সমস্যা হয়নি। এটি তাদের ক্যানভাস রেন্ডারিংয়ে এসভিজির জন্য গুগলের সমর্থনে একটি গণ্ডগোলের সাথে কাজ করে - যা এসভিজিগুলি পরিবর্তে ডিওমে প্রবেশ করানো যায় তাই এটি বন্ধ করা যায়। এরপর চিহ্নিতকারী গণনা মাপ, যা মানচিত্র চিহ্নিতকারী যে size.I've বাধ্য করতে বাস্তবায়নের একটি দম্পতি বৈশিষ্ট্য এখানে একটি আংশিক সমাধান পাওয়া আছে সমস্যাটির আছে: stackoverflow.com/a/30890373/634386
মাইক Kormendy

68

আপনার যদি কেবল একটি এসভিজি প্রয়োজন হয় তবে কেবল একটি পাথই নয় এবং আপনি এটি ক্লায়েন্টের পক্ষে পরিবর্তনযোগ্য হতে চান (যেমন পাঠ্য পরিবর্তন করুন, বিশদ গোপন করুন, ...) আপনি অন্তর্ভুক্ত এসভিজি সহ একটি বিকল্প ডেটা 'ইউআরএল' ব্যবহার করতে পারেন:

var svg = '<svg width="400" height="110"><rect width="300" height="100" /></svg>';
icon.url = 'data:image/svg+xml;charset=UTF-8;base64,' + btoa(svg);

জাভাস্ক্রিপ্ট (ফায়ারফক্স) বিটিও () এসভিজি পাঠ্য থেকে বেস 64 এনকোডিং পেতে ব্যবহৃত হয়। আপনি বেস ডেটা ইউআরএল তৈরি করতে http://dopiaza.org/tools/datauri/index.php ব্যবহার করতে পারেন ।

এখানে একটি সম্পূর্ণ উদাহরণ jsfiddle :

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
        <script src="http://maps.google.com/maps/api/js?sensor=false" type="text/javascript"></script>
    </head>
    <body>
        <div id="map" style="width: 500px; height: 400px;"></div>
        <script type="text/javascript">
            var map = new google.maps.Map(document.getElementById('map'), {
                zoom: 10,
                center: new google.maps.LatLng(-33.92, 151.25),
                mapTypeId: google.maps.MapTypeId.ROADMAP
            });

            var template = [
                '<?xml version="1.0"?>',
                    '<svg width="26px" height="26px" viewBox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg">',
                        '<circle stroke="#222" fill="{{ color }}" cx="50" cy="50" r="35"/>',
                    '</svg>'
                ].join('\n');
            var svg = template.replace('{{ color }}', '#800');

            var docMarker = new google.maps.Marker({
                position: new google.maps.LatLng(-33.92, 151.25),
                map: map,
                title: 'Dynamic SVG Marker',
                icon: { url: 'data:image/svg+xml;charset=UTF-8,' + encodeURIComponent(svg), scaledSize: new google.maps.Size(20, 20) },
optimized: false
            });

            var docMarker = new google.maps.Marker({
                position: new google.maps.LatLng(-33.95, 151.25),
                map: map,
                title: 'Dynamic SVG Marker',
                icon: { url: 'data:image/svg+xml;charset=UTF-8;base64,' + btoa(svg), scaledSize: new google.maps.Size(20, 20) },
optimized: false
            });
        </script>
    </body>
</html>

অতিরিক্ত তথ্য এখানে পাওয়া যাবে

বেস 64 এনকোডিং এড়ান:

বেস 64 এনকোডিং এড়ানোর জন্য আপনি এর 'data:image/svg+xml;charset=UTF-8;base64,' + btoa(svg)সাথে প্রতিস্থাপন করতে পারেন'data:image/svg+xml;charset=UTF-8,' + encodeURIComponent(svg)

এটি আধুনিক ব্রাউজারগুলির সাথে আইই 9-তে কাজ করা উচিত। সুবিধাটি হ'ল এটি encodeURIComponentএকটি ডিফল্ট জেএস ফাংশন এবং সমস্ত আধুনিক ব্রাউজারে উপলব্ধ। আপনি আরও ছোট লিঙ্কগুলি পেতে পারেন তবে আপনাকে এটি পরীক্ষা করতে 'হবে "এবং আপনার এসভিজির পরিবর্তে ব্যবহার করার কথা ভাবতে হবে ।

অতিরিক্ত তথ্যের জন্য ডেটা ইউআরআইতে এসভিজগুলি অনুকূলকরণও দেখুন ।

আইই সমর্থন: আইভিতে এসভিজি চিহ্নিতকারীগুলিকে সমর্থন করার জন্য এখানে বর্ণিত দুটির মতো ছোট ছোট অ্যাডাপশন প্রয়োজন: আইইতে এসভিজি মার্কার্স । আইই সমর্থন করার জন্য উদাহরণ কোডটি আপডেট করেছি।


4
ভাল তথ্য, তবে দ্রুত নোট করুন যে বেস 64 এনকোডিংটি আসলে প্রয়োজনীয় বা পছন্দসই নয়। আপনি SVG এনকোডিং সরাসরি তথ্য কোনো URI পরিবর্তে মত ব্যবহার করতে পারেন, data:image/svg+xml;utf8,। আরও তথ্য: css-tricks.com/probably-dont-base64-svg
জোশ কারিবাউ থেকে

আপনি ঠিক বলেছেন যে বেস আমরা যদি 6464 এনকোডিং এড়াতে পারি তবে এটি দুর্দান্ত হবে। আপনি কীভাবে এটি করেছিলেন আপনি একটি উদাহরণ সরবরাহ করতে পারেন? আমি যদি কেবল ইউআরআইতে এসভিজি কোড যুক্ত করি তবে এটি কিছু অক্ষরের সাথে কাজ করে না যেমন #আপনি ইউআরএল এনকোডিং ব্যবহার করেছেন?
টম

আমি এটি utf8 এনকোডেড উল্লেখ করা উচিত; এসভিজি হ'ল ফর্ম্যাট। প্রদত্ত লিঙ্কটির বেশ কয়েকটি উদাহরণ রয়েছে।
জোশ কেরিবউ

4
এটি ব্যবহার করে রোটেট এসভিজি চিত্রটি কীভাবে ব্যবহার করবেন?
সোমনাথ খরত

আমরা সবাই IE পছন্দ করি না;) যথারীতি এটির জন্য সমস্ত ব্রাউজারে কাজ করার জন্য কিছু অতিরিক্ত কাজ প্রয়োজন। আইই সমর্থন করার জন্য আমি উদাহরণটি রূপান্তর করেছি, আশা করি এটি সাহায্য করবে।
টম

31

আমি জানি এই পোস্টটি কিছুটা পুরানো, তবে আমি এসও তে এতো খারাপ তথ্য দেখেছি যে আমি চিৎকার করতে পারি। সুতরাং আমি কেবল আমার দুটি সেন্টকে সম্পূর্ণ ভিন্ন পদ্ধতির সাথে ফেলতে চাই যা আমি জানি কাজগুলি, কারণ আমি এটি বহু মানচিত্রে নির্ভরযোগ্যভাবে ব্যবহার করি। তদতিরিক্ত, আমি বিশ্বাস করি যে ওপি মানচিত্রের পয়েন্টের পাশাপাশি তীর চিহ্নিতকারীকে ঘোরানোর ক্ষমতাও চেয়েছিল যা এটি নিজস্ব x, y অক্ষের চারপাশে আইকনটি ঘোরানোর চেয়ে আলাদা যা এটি মানচিত্রের দিকে তীর চিহ্নিতকারীকে নির্দেশ করবে যেখানে পরিবর্তন হবে।

প্রথমে মনে রাখবেন আমরা গুগল ম্যাপস এবং এসভিজি নিয়ে খেলছি, সুতরাং আমাদের অবশ্যই এটির জন্য চিহ্নিত করতে হবে (যা আসলে প্রতীকগুলি) এসভিজি প্রয়োগের মাধ্যমে Google এটি প্রয়োগ করে। গুগল এসভিজি চিহ্নিতকারী চিত্রের জন্য তার নোঙ্গরটিকে 0,0 এ সেট করে যা এসভিজি ভিউবক্সের উপরের বাম কোণ নয়। এটি ঘুরে দেখার জন্য, গুগল যা চায় তা দেওয়ার জন্য আপনাকে অবশ্যই নিজের এসভিজি চিত্রটি কিছুটা আলাদাভাবে আঁকতে হবে ... হ্যাঁ উত্তরটি আপনার এসভিজি সম্পাদকের (চিত্রক, ইনসকেপ, ইত্যাদি) -তে আপনি যেভাবে আসলে এসভিজি পাথ তৈরি করেছেন তা হল answer ।)।

প্রথম পদক্ষেপটি হল ভিউবক্স থেকে মুক্তি পাওয়া। এটি আপনার এক্সএমএলে ভিউবক্সকে 0 এ সেট করে করা যেতে পারে ... এটি ঠিক, ভিউবক্সের জন্য সাধারণ চারটি আর্গুমেন্টের পরিবর্তে কেবল একটি শূন্য। এটি দর্শন বাক্সটি বন্ধ করে দেয় (এবং হ্যাঁ, এটি শব্দার্থগতভাবে সঠিক)। আপনি যখন এটি করবেন তখন আপনি সম্ভবত আপনার চিত্রের লাফের আকারটি লক্ষ্য করতে পারবেন এবং এটি কারণ যে এই চিত্রটি স্কেল করার জন্য এসভিজিটির আর কোনও বেস (ভিউবক্স) নেই। সুতরাং আমরা সরাসরি আপনার এই রেফারেন্সটি তৈরি করে পিক্সেলের প্রকৃত সংখ্যার প্রস্থ এবং উচ্চতা নির্ধারণ করে আপনার চিত্রটি আপনার এসভিজি সম্পাদকের এক্সএমএল সম্পাদক হতে চান।

এক্সএমএল সম্পাদকটিতে এসভিজি চিত্রের প্রস্থ এবং উচ্চতা নির্ধারণ করে আপনি চিত্রটি স্কেলিংয়ের জন্য একটি বেসলাইন তৈরি করেন এবং এই আকারটি ডিফল্টরূপে চিহ্নিতকারী স্কেল বৈশিষ্ট্যের জন্য 1 এর মান হয়ে যায়। চিহ্নিতকারীর গতিশীল স্কেলিংয়ের জন্য এর সুবিধাটি আপনি দেখতে পাচ্ছেন।

এখন আপনি নিজের ইমেজ আকার ধারণ করেছেন, এসভিজি সম্পাদকের 0,0 স্থানাঙ্কের উপর দিয়ে নোঙ্গর হিসাবে আপনি যে চিত্রটি পেতে চান তা অবধি ছবিটি সরিয়ে নিন। একবার আপনি এই অনুলিপিটি শেষ করে দিলে এসভিজি পাথের d বৈশিষ্ট্যের মান । আপনি দেখতে পাবেন সংখ্যার প্রায় অর্ধেকটি নেতিবাচক, যা ভিউবক্সের পরিবর্তে চিত্রটির 0,0 এর জন্য আপনার অ্যাঙ্কর পয়েন্টটি সারিবদ্ধ করার ফলাফল।

এই কৌশলটি ব্যবহারের পরে আপনাকে চিহ্নিতকারীটিকে সঠিকভাবে, মানচিত্রের ল্যাড এবং এলএনজি পয়েন্টের চারদিকে ঘোরাতে দেওয়া হবে। আপনি যে লম্বা এবং চিহ্নিতকারীটির দীর্ঘবর্তী স্থানে চান সেই svg মার্কারটিতে পয়েন্টটি বাঁধাইয়ের একমাত্র নির্ভরযোগ্য উপায়।

আমি এর জন্য একটি জেএসফিডাল তৈরি করার চেষ্টা করেছি , তবে সেখানে বাস্তবায়নের ক্ষেত্রে কিছু বাগ রয়েছে, এর একটি কারণ আমি পুনরায় ব্যাখ্যা কোডটি পছন্দ করি না। সুতরাং পরিবর্তে, আমি নীচে একটি সম্পূর্ণ স্ব-অন্তর্ভুক্ত উদাহরণ অন্তর্ভুক্ত করেছি যা আপনি চেষ্টা করতে, মানিয়ে নিতে এবং একটি রেফারেন্স হিসাবে ব্যবহার করতে পারেন। এটি আমি জেএসফিডেলে একই কোডটি চেষ্টা করেছিলাম যা ব্যর্থ হয়েছে, তবু এটি ফায়ারব্যাগের মাধ্যমে কোনও ঝাঁকুনি ছাড়াই পালটে।

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8" />
    <meta name="viewport"  content="width=device-width, initial-scale=1" />
    <meta name="author"    content="Drew G. Stimson, Sr. ( Epiphany )" />
    <title>Create Draggable and Rotatable SVG Marker</title>
    <script src="http://maps.googleapis.com/maps/api/js?sensor=false"> </script>
    <style type="text/css">
      #document_body {
        margin:0;
        border: 0;
        padding: 10px;
        font-family: Arial,sans-serif;
        font-size: 14px;
        font-weight: bold;
        color: #f0f9f9;
        text-align: center;
        text-shadow: 1px 1px 1px #000;
        background:#1f1f1f;
      }
      #map_canvas, #rotation_control {
        margin: 1px;
        border:1px solid #000;
        background:#444;
        -webkit-border-radius: 4px;
           -moz-border-radius: 4px;
                border-radius: 4px;
      }
      #map_canvas { 
        width: 100%;
        height: 360px;
      }
      #rotation_control { 
        width: auto;
        padding:5px;
      }
      #rotation_value { 
        margin: 1px;
        border:1px solid #999;
        width: 60px;
        padding:2px;
        font-weight: bold;
        color: #00cc00;
        text-align: center;
        background:#111;
        border-radius: 4px;
      }
</style>

<script type="text/javascript">
  var map, arrow_marker, arrow_options;
  var map_center = {lat:41.0, lng:-103.0};
  var arrow_icon = {
    path: 'M -1.1500216e-4,0 C 0.281648,0 0.547084,-0.13447 0.718801,-0.36481 l 17.093151,-22.89064 c 0.125766,-0.16746 0.188044,-0.36854 0.188044,-0.56899 0,-0.19797 -0.06107,-0.39532 -0.182601,-0.56215 -0.245484,-0.33555 -0.678404,-0.46068 -1.057513,-0.30629 l -11.318243,4.60303 0,-26.97635 C 5.441639,-47.58228 5.035926,-48 4.534681,-48 l -9.06959,0 c -0.501246,0 -0.906959,0.41772 -0.906959,0.9338 l 0,26.97635 -11.317637,-4.60303 c -0.379109,-0.15439 -0.812031,-0.0286 -1.057515,0.30629 -0.245483,0.33492 -0.244275,0.79809 0.0055,1.13114 L -0.718973,-0.36481 C -0.547255,-0.13509 -0.281818,0 -5.7002158e-5,0 Z',
    strokeColor: 'black',
    strokeOpacity: 1,
    strokeWeight: 1,
    fillColor: '#fefe99',
    fillOpacity: 1,
    rotation: 0,
    scale: 1.0
  };

function init(){
  map = new google.maps.Map(document.getElementById('map_canvas'), {
    center: map_center,
    zoom: 4,
    mapTypeId: google.maps.MapTypeId.HYBRID
  });
  arrow_options = {
    position: map_center,
    icon: arrow_icon,
    clickable: false,
    draggable: true,
    crossOnDrag: true,
    visible: true,
    animation: 0,
    title: 'I am a Draggable-Rotatable Marker!' 
  };
  arrow_marker = new google.maps.Marker(arrow_options);
  arrow_marker.setMap(map);
}
function setRotation(){
  var heading = parseInt(document.getElementById('rotation_value').value);
  if (isNaN(heading)) heading = 0;
  if (heading < 0) heading = 359;
  if (heading > 359) heading = 0;
  arrow_icon.rotation = heading;
  arrow_marker.setOptions({icon:arrow_icon});
  document.getElementById('rotation_value').value = heading;
}
</script>
</head>
<body id="document_body" onload="init();">
  <div id="rotation_control">
    <small>Enter heading to rotate marker&nbsp;&nbsp;&nbsp;&nbsp;</small>
    Heading&deg;<input id="rotation_value" type="number" size="3" value="0" onchange="setRotation();" />
    <small>&nbsp;&nbsp;&nbsp;&nbsp;Drag marker to place marker</small>
    </div>
    <div id="map_canvas"></div>
</body>
</html>

এটি ম্যাপস এপিআইয়ের সিএমএমওএল ক্লাসে উপলব্ধ নিজস্ব কয়েকটি চিহ্নের জন্য গুগল ঠিক এটিই করে, তাই যদি এটি আপনাকে বোঝায় না ... যাইহোক, আমি আশা করি এটি আপনাকে সঠিকভাবে একটি এসভিজি মার্কার তৈরি করতে এবং সেট আপ করতে সহায়তা করবে I আপনার গুগল ম্যাপগুলি সর্বশেষে।


4
উত্তম উত্তর, আমি আপনার কোডটির
রব

"<3" এটি প্রয়োজনীয় তথ্য যা গুগল ডকুমেন্টেশনের অংশ হওয়া উচিত।
ব্যবহারকারী7653815

12

হ্যাঁ আপনি .png বা অন্য কোনও চিত্র ফাইল ফর্ম্যাটের মতো আইকনটির জন্য একটি .svg ফাইল ব্যবহার করতে পারেন। .Svg ফাইলটি যেখানে অবস্থিত সেখানে কেবল আইকনের url সেট করুন। উদাহরণ স্বরূপ:

var icon = {
        url: 'path/to/images/car.svg',
        size: new google.maps.Size(sizeX, sizeY),
        origin: new google.maps.Point(0, 0),
        anchor: new google.maps.Point(sizeX/2, sizeY/2)
};

var marker = new google.maps.Marker({
        position: event.latLng,
        map: map,
        draggable: false,
        icon: icon
});

4
আপনি যে আইকন অবজেক্টটি দেখছেন সেটি কোনও স্ট্যান্ডার্ড মার্কারের জন্য, কোনও এসভিজি মার্কার নয়। একটি এসভিজি মার্কার প্রতীক শ্রেণির বৈশিষ্ট্যগুলি ব্যবহার করে, যা পরে চিহ্নিতকারী শ্রেণীর আইকন সম্পত্তি হিসাবে নির্ধারিত হয়। (একটি সঠিক রেফারেন্সের জন্য মিস্টারউডাউন আইকন অবজেক্ট দেখুন ...)
এপিফ্যানি

4
এসভিজির যদি একাধিক 'ডি' পাথ থাকে (সাধারণত এসভিজি চিত্রের একাধিক স্তর যুক্ত থাকে) তবে এটিও ভেঙে যাবে।
এপিফ্যানি

4
মনে রাখবেন যে আপনার SVG ফাইল স্পষ্টভাবে তাই মত আইকন মাত্রা নির্ধারণ করে করা উচিত: width="33px" height="50px"- দেখুন stackoverflow.com/a/21783089/165673
Yarin

9

জিনিসগুলি আরও ভাল চলছে, এখনই আপনি এসভিজি ফাইলগুলি ব্যবহার করতে পারেন।

        marker = new google.maps.Marker({
            position: {lat: 36.720426, lng: -4.412573},
            map: map,
            draggable: true,
            icon: "img/tree.svg"
        });

4
ঘোরানোর জন্য অনুমতি দেয় না
ম্যাট ওয়েস্টলেক

6

এই থ্রেডে অন্যদের দ্বারা উল্লিখিত হিসাবে, স্পষ্টতই এসভিজি-তে প্রস্থ এবং উচ্চতার বৈশিষ্ট্যগুলি নির্ধারণ করতে ভুলবেন না :

<svg id="some_id" data-name="some_name" xmlns="http://www.w3.org/2000/svg"
     viewBox="0 0 26 42"
     width="26px" height="42px">

যদি আপনি এটি না করেন তবে কোনও জেএস ম্যানিপুলেশন আপনাকে সহায়তা করতে পারে না কারণ গ্যাম্যাপে রেফারেন্সের ফ্রেম থাকবে না এবং সর্বদা একটি স্ট্যান্ডার্ড আকার ব্যবহার করবে।

(আমি জানি কিছু মন্তব্যে এটি উল্লেখ করা হয়েছে, তবে সেগুলি সহজেই মিস করা যায় This এই তথ্যটি আমাকে বিভিন্ন ক্ষেত্রে সহায়তা করেছিল)


1

ঠিক আছে! আমি শীঘ্রই এটি আমার ওয়েবে এটি করেছি, আমি কাস্টম গুগল ম্যাপ চিহ্নিতকারী তৈরির জন্য দুটি উপায় চেষ্টা করি, এই রান কোড ব্যবহার canvg.js ব্রাউজারের জন্য সেরা উপযুক্ততা Com মন্তব্য-আউট কোডটি আইই11 একত্রে সমর্থন করে না।

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;

  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>


-4

আপনি পাস প্রয়োজন optimized: false

যেমন

var img = { url: 'img/puff.svg', scaledSide: new google.maps.Size(5, 5) };
new google.maps.Marker({position: this.mapOptions.center, map: this.map, icon: img, optimized: false,});

পাস না করে optimized: false, আমার এসভিজি একটি স্থির চিত্র হিসাবে হাজির।

আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.