গুগল ম্যাপস এপিআই ভি 3: আমি কীভাবে গতিশীলভাবে চিহ্নিতকারী আইকনটি পরিবর্তন করব?

Question

গুগল ম্যাপস এপিআই ভি 3 ব্যবহার করে, আমি কীভাবে প্রোগ্রামারিকভাবে চিহ্নিতকারী আইকনটি পরিবর্তন করব?

আমি কী করতে চাই, যখন কেউ কোনও লিঙ্কের উপরে ঘোরাফেরা করে - মানচিত্রে সংশ্লিষ্ট চিহ্নিতকারী আইকনটি চিহ্নিত প্রশ্নকে চিহ্নিত করে রঙ পরিবর্তন করে।

মূলত, রুস্ট যা করে তা একই ফাংশন।

আপনি যখন বামদিকে কোনও হোম তালিকার উপরে ঘোরাবেন তখন ডানদিকে সংশ্লিষ্ট মার্কার রঙ পরিবর্তন করে

Comments

আপনার লাইভ উদাহরণ নীচে গিয়েছে। শুধু তোমাকে জানাতে চাচ্ছি. আমি ধরে নিয়েছি এটি এয়ারবিএনবি.কম এ ঘটে যাওয়ার মতোই?

— ফুজিরোয়েলে

Answer 1

কল করুন marker.setIcon('newImage.png')... ডক্সের জন্য এখানে দেখুন ।

আপনি এটি করার আসল উপায় সম্পর্কে জিজ্ঞাসা করছেন? আপনি কেবল প্রতিটি তৈরি করতে পারেন divএবং এমন একটি mouseoverএবং mouseoutশ্রোতা যুক্ত করুন যা আইকনগুলিকে পরিবর্তন করবে এবং চিহ্নিতকারীদের জন্য ফিরে আসবে।

Comments

এটি আমাকে চিহ্নিত করে যে কীভাবে কোনও চিহ্নিতকারীর অ্যানিমেশন পরিবর্তন করতে পারে:markersArray[0].setAnimation(google.maps.Animation.BOUNCE);

— রায় ২

Answer 2

আপনি চিহ্নিতকারী আইকন হিসাবে একটি বৃত্তও ব্যবহার করতে পারেন, উদাহরণস্বরূপ:

var oMarker = new google.maps.Marker({
    position: latLng,
    sName: "Marker Name",
    map: map,
    icon: {
        path: google.maps.SymbolPath.CIRCLE,
        scale: 8.5,
        fillColor: "#F00",
        fillOpacity: 0.4,
        strokeWeight: 0.4
    },
});

এবং তারপরে, আপনি যদি গতিশীলভাবে চিহ্নিতকরণ (মাউসওভারের মতো) পরিবর্তন করতে চান তবে উদাহরণস্বরূপ:

oMarker.setIcon({
            path: google.maps.SymbolPath.CIRCLE,
            scale: 10,
            fillColor: "#00F",
            fillOpacity: 0.8,
            strokeWeight: 1
        })

Answer 3

এই থ্রেডটি মৃত হতে পারে, তবে স্টাইল্ডমার্কার এপিআই ভি 3 এর জন্য উপলব্ধ। AddDomListener () পদ্ধতিটি ব্যবহার করে আপনি যে রঙের পরিবর্তনটি সঠিক DOM ইভেন্টে চান তা কেবল আবদ্ধ করুন । এই উদাহরণটি আপনি যা করতে চান তার খুব কাছাকাছি। আপনি যদি পৃষ্ঠার উত্সটি লক্ষ্য করেন তবে পরিবর্তন করুন:

google.maps.event.addDomListener(document.getElementById("changeButton"),"click",function() {
  styleIcon.set("color","#00ff00");
  styleIcon.set("text","Go");
});

যেমন কিছু:

google.maps.event.addDomListener("mouseover",function() {
  styleIcon.set("color","#00ff00");
  styleIcon.set("text","Go");
});

আপনাকে এগিয়ে চলার পক্ষে এটি যথেষ্ট হবে।

ডোম ইভেন্টগুলিতে উইকিপিডিয়া পৃষ্ঠাটি আপনাকে ক্লায়েন্ট-সাইডে ক্যাপচার করতে চাইলে ইভেন্টটি লক্ষ্য করতে সহায়তা করবে।

শুভকামনা (যদি আপনার এখনও এটি প্রয়োজন হয়)

Comments

হ্যাঁ, তবে মানচিত্রের পয়েন্টার পরিবর্তন

— সিএসএসে

এই স্ট্যাকওভারফ্লো প্রশ্ন এবং উত্তরগুলি আপনাকে আরও গাইড করতে পারে।

— ট্যাটারার

Answer 4

GMaps ইউটিলিটি লাইব্রেরি একটি প্লাগইন বলা MapIconMaker এটা সহজ মাছি উপর বিভিন্ন মার্কার শৈলী উৎপন্ন সহজ করে। এটি চিহ্নিতকারীদের আঁকতে গুগল চার্ট ব্যবহার করে।

এখানে একটি ভাল ডেমো রয়েছে যা দেখায় যে এটির সাথে আপনি কী ধরনের মার্কার তৈরি করতে পারেন।

Comments

MapIconMaker মানচিত্রের API v3- এর জন্য উপলভ্য নয়

— বেনজিসাইল

স্টাইলডমার্কার এপিআই ভি 3 এর জন্য রয়েছে। আছে HTH।

— ট্যাটলার

দুর্ভাগ্যক্রমে গুগল চার্টস এপিআই সম্প্রতি গুগল দ্বারা আনুষ্ঠানিকভাবে হ্রাস করা হয়েছে :(

— ড্যানি সি

Answer 5

আপনি এই কোড চেষ্টা করতে পারেন

    <script src="http://maps.googleapis.com/maps/api/js"></script>
<script type="text/javascript" src="http://google-maps-utility-library-v3.googlecode.com/svn/trunk/infobox/src/infobox.js"></script>

<script>

    function initialize()
    {
        var map;
        var bounds = new google.maps.LatLngBounds();
        var mapOptions = {
                            zoom: 10,
                            mapTypeId: google.maps.MapTypeId.ROADMAP    
                         };
        map = new google.maps.Map(document.getElementById("mapDiv"), mapOptions);
        var markers = [
            ['title-1', '<img style="width:100%;" src="canberra_hero_image.jpg"></img>', 51.508742, -0.120850, '<p> Hello - 1 </p>'],
            ['title-2', '<img style="width:100%;" src="canberra_hero_image.jpg"></img>', 51.508742, -0.420850, '<p> Hello - 2 </p>'],
            ['title-3', '<img style="width:100%;" src="canberra_hero_image.jpg"></img>', 51.508742, -0.720850, '<p> Hello - 3 </p>'],
            ['title-4', '<img style="width:100%;" src="canberra_hero_image.jpg"></img>', 51.508742, -1.020850, '<p> Hello - 4 </p>'],
            ['title-5', '<img style="width:100%;" src="canberra_hero_image.jpg"></img>', 51.508742, -1.320850, '<p> Hello - 5 </p>']
        ];

        var infoWindow = new google.maps.InfoWindow(), marker, i;
        var testMarker = [];
        var status = [];
        for( i = 0; i < markers.length; i++ ) 
        {
            var title = markers[i][0];
            var loan = markers[i][1];
            var lat = markers[i][2];
            var long = markers[i][3];
            var add = markers[i][4];


            var iconGreen = 'img/greenMarker.png'; //green marker
            var iconRed = 'img/redMarker.png';     //red marker

            var infoWindowContent = loan + "\n" + placeId + add;

            var position = new google.maps.LatLng(lat, long);
            bounds.extend(position);

            marker = new google.maps.Marker({
                map: map,
                title: title,
                position: position,
                icon: iconGreen
            });
            testMarker[i] = marker;
            status[i] = 1;
            google.maps.event.addListener(marker, 'click', ( function toggleBounce( i,status,testMarker) 
            {
                return function() 
                {
                    infoWindow.setContent(markers[i][1]+markers[i][4]);
                    if( status[i] === 1 )
                    {
                        testMarker[i].setIcon(iconRed);
                        status[i] = 0;

                    }
                    for( var k = 0; k <  markers.length ; k++ )
                    {
                        if(k != i)
                        {
                            testMarker[k].setIcon(iconGreen);
                            status[i] = 1;

                        }
                    }
                    infoWindow.open(map, testMarker[i]);
                }
            })( i,status,testMarker));
            map.fitBounds(bounds);
        }
        var boundsListener = google.maps.event.addListener((map), 'bounds_changed', function(event)
        {
            this.setZoom(8);
            google.maps.event.removeListener(boundsListener);
        });
    }
    google.maps.event.addDomListener(window, 'load', initialize);

</script>

<div id="mapDiv" style="width:820px; height:300px"></div>