javascript - street - google maps india




গুগল ম্যাপস জেএস এপিআই v3-সহজ একাধিক মার্কার উদাহরণ (8)

গুগল ম্যাপে অপেক্ষাকৃত নতুন অ্যাপি। আমি একটি ম্যাপে চক্র এবং চক্রান্ত করতে চান যে একটি অ্যারের তথ্য আছে। মোটামুটি সহজ মনে হয়, কিন্তু আমি পাওয়া সব মাল্টি-মার্কার টিউটোরিয়াল বেশ জটিল।

চলুন উদাহরণস্বরূপ google এর সাইট থেকে ডেটা অ্যারে ব্যবহার করি:

var locations = [
  ['Bondi Beach', -33.890542, 151.274856, 4],
  ['Coogee Beach', -33.923036, 151.259052, 5],
  ['Cronulla Beach', -34.028249, 151.157507, 3],
  ['Manly Beach', -33.80010128657071, 151.28747820854187, 2],
  ['Maroubra Beach', -33.950198, 151.259302, 1]
];

আমি কেবল এই সব পয়েন্ট প্লট করতে এবং একটি তথ্য আছে উইণ্ডো নাম প্রদর্শন করতে ক্লিক করার সময় পপ আপ করতে চান।


গৃহীত উত্তর, ES6 মধ্যে পুনরায় লেখা:

$(document).ready(() => {
  const mapEl = $('#our_map').get(0); // OR document.getElementById('our_map');

  // Display a map on the page
  const map = new google.maps.Map(mapEl, { mapTypeId: 'roadmap' });

  const buildings = [
    {
      title: 'London Eye, London', 
      coordinates: [51.503454, -0.119562],
      info: 'carousel'
    },
    {
      title: 'Palace of Westminster, London', 
      coordinates: [51.499633, -0.124755],
      info: 'palace'
    }
  ];

  placeBuildingsOnMap(buildings, map);
});


const placeBuildingsOnMap = (buildings, map) => {
  // Loop through our array of buildings & place each one on the map  
  const bounds = new google.maps.LatLngBounds();
  buildings.forEach((building) => {
    const position = { lat: building.coordinates[0], lng: building.coordinates[1] }
    // Stretch our bounds to the newly found marker position
    bounds.extend(position);

    const marker = new google.maps.Marker({
      position: position,
      map: map,
      title: building.title
    });

    const infoWindow = new google.maps.InfoWindow();
    // Allow each marker to have an info window
    google.maps.event.addListener(marker, 'click', () => {
      infoWindow.setContent(building.info);
      infoWindow.open(map, marker);
    })

    // Automatically center the map fitting all markers on the screen
    map.fitBounds(bounds);
  })
})

অ্যাসিঙ্ক্রোনাস সংস্করণ:

<script type="text/javascript">
  function initialize() {
    var locations = [
      ['Bondi Beach', -33.890542, 151.274856, 4],
      ['Coogee Beach', -33.923036, 151.259052, 5],
      ['Cronulla Beach', -34.028249, 151.157507, 3],
      ['Manly Beach', -33.80010128657071, 151.28747820854187, 2],
      ['Maroubra Beach', -33.950198, 151.259302, 1]
    ];

    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 infowindow = new google.maps.InfoWindow();

    var marker, i;

    for (i = 0; i < locations.length; i++) {  
      marker = new google.maps.Marker({
        position: new google.maps.LatLng(locations[i][1], locations[i][2]),
        map: map
      });

      google.maps.event.addListener(marker, 'click', (function(marker, i) {
        return function() {
          infowindow.setContent(locations[i][0]);
          infowindow.open(map, marker);
        }
      })(marker, i));
    }
}

function loadScript() {
  var script = document.createElement('script');
  script.type = 'text/javascript';
  script.src = 'https://maps.googleapis.com/maps/api/js?v=3.exp&' +
      'callback=initialize';
  document.body.appendChild(script);
}

window.onload = loadScript;
  </script>

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

এই সমস্যাটি মোকাবেলা করার সবচেয়ে সহজ উপায় হল মার্কার ক্লাস্টার সমাধানটি ব্যবহার করা। মূল ধারণাটি প্রদর্শন করা বিন্দুর সংখ্যা সহ একটি গোষ্ঠীতে ভৌগোলিকভাবে একই অবস্থানগুলিকে গোষ্ঠীভুক্ত করা। ব্যবহারকারী মানচিত্রে জুম হিসাবে এই গোষ্ঠী নীচে পৃথক চিহ্নিতকারী প্রকাশ করতে প্রসারিত।

সম্ভবত markerclusterer লাইব্রেরি। নিম্নরূপ (লাইব্রেরি আমদানি করার পরে) একটি মৌলিক বাস্তবায়ন হবে:

<script type="text/javascript">
  function initialize() {
    var center = new google.maps.LatLng(37.4419, -122.1419);

    var map = new google.maps.Map(document.getElementById('map'), {
      zoom: 3,
      center: center,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    });

    var markers = [];
    for (var i = 0; i < 100; i++) {
      var location = yourData.location[i];
      var latLng = new google.maps.LatLng(location.latitude,
          location.longitude);
      var marker = new google.maps.Marker({
        position: latLng
      });
      markers.push(marker);
    }
    var markerCluster = new MarkerClusterer(map, markers);
  }
  google.maps.event.addDomListener(window, 'load', initialize);
</script>

ম্যাপে সরাসরি যুক্ত হওয়ার পরিবর্তে মার্কারগুলি একটি অ্যারে যোগ করা হয়েছে। এই অ্যারে তারপর লাইব্রেরিতে পাস করা হয় যা আপনার জন্য জটিল হিসাব পরিচালনা করে এবং মানচিত্রে সংযুক্ত।

এই বাস্তবায়নগুলি কেবলমাত্র ক্লায়েন্ট পার্শ্ব কার্যকারিতা বাড়ায় না তবে তারা অনেকগুলি ক্ষেত্রে সহজতর এবং কম ক্লাস্টারযুক্ত UI এবং বড় আকারের ডেটা সহজ পজিশনে নিয়ে যায়।

অন্যান্য বাস্তবায়ন গুগল থেকে পাওয়া যায়।

এই ম্যাপিং এর নানান যারা নতুন কিছু সাহায্য করে আশা করি।


এই সহজে আমি এটি হ্রাস করতে পারে:

<!DOCTYPE html>
<html> 
<head> 
  <meta http-equiv="content-type" content="text/html; charset=UTF-8" /> 
  <title>Google Maps Multiple Markers</title> 
  <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 locations = [
      ['Bondi Beach', -33.890542, 151.274856, 4],
      ['Coogee Beach', -33.923036, 151.259052, 5],
      ['Cronulla Beach', -34.028249, 151.157507, 3],
      ['Manly Beach', -33.80010128657071, 151.28747820854187, 2],
      ['Maroubra Beach', -33.950198, 151.259302, 1]
    ];

    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 infowindow = new google.maps.InfoWindow();

    var marker, i;

    for (i = 0; i < locations.length; i++) {  
      marker = new google.maps.Marker({
        position: new google.maps.LatLng(locations[i][1], locations[i][2]),
        map: map
      });

      google.maps.event.addListener(marker, 'click', (function(marker, i) {
        return function() {
          infowindow.setContent(locations[i][0]);
          infowindow.open(map, marker);
        }
      })(marker, i));
    }
  </script>
</body>
</html>

স্ক্রীনশট:

addListener পদ্ধতিতে callback যুক্তি পাস যখন ঘটছে কিছু বন্ধ জাদু আছে। আপনি বন্ধ কিভাবে কাজ সঙ্গে পরিচিত না হলে এই বেশ চতুর বিষয় হতে পারে। আমি একটি সংক্ষিপ্ত ভূমিকা জন্য নিম্নলিখিত মজিলা নিবন্ধ চেক আউট সুপারিশ করবে, যদি এটি ক্ষেত্রে:


এখানে একটি প্রায় সম্পূর্ণ উদাহরণ জাভাস্ক্রিপ্ট ফাংশন যা একটি JSONObject এ সংজ্ঞায়িত একাধিক চিহ্নিতকারীগুলিকে অনুমতি দেবে।

এটি কেবল ম্যাপের সীমানার সাথে থাকা মার্কারগুলি প্রদর্শন করবে।

এটি গুরুত্বপূর্ণ কারণ আপনি অতিরিক্ত কাজ করছেন না।

এছাড়াও আপনি মার্কারগুলির জন্য একটি সীমা নির্ধারণ করতে পারেন যাতে আপনি মার্কারগুলির চরম পরিমাণ দেখান না (যদি আপনার ব্যবহারের কোনও জিনিস থাকে তবে):

যদি মানচিত্রের কেন্দ্র 500 মিটারের বেশি না পরিবর্তিত হয় তবে এটি মার্কারগুলিও প্রদর্শন করবে না।
এটি গুরুত্বপূর্ণ কারণ একজন ব্যবহারকারী চিহ্নিতকারীর উপর ক্লিক করে এবং ভুল করার সময় মানচিত্রে দুর্ঘটনাক্রমে ড্র্যাগ করে তবে আপনি মানচিত্রগুলি পুনরায় লোড করতে চান না।

আমি এই ফাংশনটিকে মানচিত্রের জন্য নিষ্ক্রিয় ইভেন্ট শ্রোতাতে সংযুক্ত করেছি তাই ম্যাপগুলি কেবল তখনই দেখাবে যখন মানচিত্রটি নিষ্ক্রিয় হবে এবং একটি ভিন্ন ইভেন্টের পরে চিহ্নিতকারীগুলিকে পুনরায় প্রদর্শন করবে।

কর্ম স্ক্রিন শট ইন infowindow আরো কন্টেন্ট দেখাচ্ছে স্ক্রিন শট একটু পরিবর্তন আছে। pastbin.com থেকে pasted

<script src="//pastebin.com/embed_js/uWAbRxfg"></script>


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

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

এই infowindow প্রশ্নগুলিতে এটি কখনও উল্লেখ করা হয় না, যে স্ট্যান্ডার্ড ইনভাউন্ডো চিহ্নিতকারী বিন্দুর ল্যাট এবং lng এ স্থাপন করা হয় না, বরং মার্কার চিত্রের উপরে। মার্কার দৃশ্যমানতাটি এই কাজের জন্য লুকানো থাকতে হবে, অন্যথায় মানচিত্র API ইনফাউন্ডো অ্যাঙ্করটিকে মার্কার চিত্রের উপরে আবার ফিরে ঠেলে দেবে।

চিহ্নিতকারীর অ্যারেতে মার্কারের রেফারেন্সটি পরবর্তী কোনও অতিরিক্ত প্রক্রিয়াকরণের কাজগুলির জন্য মার্কার ঘোষণার পরে অবিলম্বে তৈরি করা হয় (লুকানো / দেখানো, দড়ি দখল ইত্যাদি ...)। এটি মার্কার অবজেক্টকে 'মার্কার' এ নির্দিষ্ট করার জন্য অতিরিক্ত পদক্ষেপ সংরক্ষণ করে এবং তারপরে মার্কার অ্যারে 'চিহ্নিতকারী' চাপিয়ে দেয় ... আমার বইয়ে অনেক অপ্রয়োজনীয় প্রক্রিয়াকরণ।

যাইহোক, infowindows উপর একটি ভিন্ন নিতে, এবং আশা করি এটি আপনাকে জানাতে এবং অনুপ্রাণিত করতে সাহায্য করে।

    var locations = [
      ['Bondi Beach', -33.890542, 151.274856, 4],
      ['Coogee Beach', -33.923036, 151.259052, 5],
      ['Cronulla Beach', -34.028249, 151.157507, 3],
      ['Manly Beach', -33.80010128657071, 151.28747820854187, 2],
      ['Maroubra Beach', -33.950198, 151.259302, 1]
    ];
    var map;
    var markers = [];

    function init(){
      map = new google.maps.Map(document.getElementById('map_canvas'), {
        zoom: 10,
        center: new google.maps.LatLng(-33.92, 151.25),
        mapTypeId: google.maps.MapTypeId.ROADMAP
      });

      var num_markers = locations.length;
      for (var i = 0; i < num_markers; i++) {  
        markers[i] = new google.maps.Marker({
          position: {lat:locations[i][1], lng:locations[i][2]},
          map: map,
          html: locations[i][0],
          id: i,
        });

        google.maps.event.addListener(markers[i], 'click', function(){
          var infowindow = new google.maps.InfoWindow({
            id: this.id,
            content:this.html,
            position:this.getPosition()
          });
          google.maps.event.addListenerOnce(infowindow, 'closeclick', function(){
            markers[this.id].setVisible(true);
          });
          this.setVisible(false);
          infowindow.open(map);
        });
      }
    }

google.maps.event.addDomListener(window, 'load', init);

এখানে একটি কাজ করছেন JSFiddle

অতিরিক্ত নোট
আপনি এই প্রদত্ত Google উদাহরণ ডেটাতে একটি অবস্থানের সাথে 'অবস্থানে' অ্যারের চতুর্থ স্থানটি লক্ষ্য করবেন। উদাহরণস্বরূপ, আপনি বর্তমান লুপ মানের পরিবর্তে চিহ্নিতকারী আইডিটির জন্য এই মানটি ব্যবহার করতে পারেন, যেমন ...

var num_markers = locations.length;
for (var i = 0; i < num_markers; i++) {  
  markers[i] = new google.maps.Marker({
    position: {lat:locations[i][1], lng:locations[i][2]},
    map: map,
    html: locations[i][0],
    id: locations[i][3],
  });
};

ড্যানিয়েল ভাসাল্লোর উত্তর থেকে , এখানে একটি সংস্করণ যা ক্লোজার ইস্যুটি সহজ ভাবে ডিল করে।

যেহেতু সমস্ত চিহ্নিতকারীর একটি পৃথক InfoWindow থাকবে এবং যেহেতু আপনি কোনও বস্তুর অতিরিক্ত বৈশিষ্ট্য যোগ করলে জাভাস্ক্রিপ্টটি যত্ন করে না তাই আপনাকে যা করতে হবে তা মার্কারের বৈশিষ্ট্যগুলিতে InfoWindow যুক্ত করুন এবং তারপরে InfoWindow থেকে .open .open() কে কল করুন। নিজেই!

সম্পাদনা: পর্যাপ্ত ডেটা দিয়ে, প্যাগেল লোড অনেক সময় নিতে পারে, তাই মার্কারের সাথে InfoWindow নির্মাণের পরিবর্তে, নির্মাণের প্রয়োজন শুধুমাত্র তখনই হওয়া উচিত। উল্লেখ্য যে InfoWindow গঠন করতে ব্যবহৃত যেকোনো ডেটা মার্কারকে সম্পত্তি ( data ) হিসাবে যুক্ত করা আবশ্যক। এছাড়াও লক্ষ্য করুন যে প্রথম ক্লিক ইভেন্টের পরে, infoWindow এটির মার্কারের সম্পত্তি হিসাবে চলতে থাকবে যাতে ব্রাউজারটি ক্রমাগত পুনর্গঠন করার প্রয়োজন হয় না।

var locations = [
  ['Bondi Beach', -33.890542, 151.274856, 4],
  ['Coogee Beach', -33.923036, 151.259052, 5],
  ['Cronulla Beach', -34.028249, 151.157507, 3],
  ['Manly Beach', -33.80010128657071, 151.28747820854187, 2],
  ['Maroubra Beach', -33.950198, 151.259302, 1]
];

var map = new google.maps.Map(document.getElementById('map'), {
  center: new google.maps.LatLng(-33.92, 151.25)
});

for (i = 0; i < locations.length; i++) {  
  marker = new google.maps.Marker({
    position: new google.maps.LatLng(locations[i][1], locations[i][2]),
    map: map,
    data: {
      name: locations[i][0]
    }
  });
  marker.addListener('click', function() {
    if(!this.infoWindow) {
      this.infoWindow = new google.maps.InfoWindow({
        content: this.data.name;
      });
    }
    this.infoWindow.open(map,this);
  })
}

var arr = new Array();
    function initialize() { 
        var i;  
        var Locations = [
                {
                  lat:48.856614, 
                  lon:2.3522219000000177, 
                  address:'Paris',
                  gval:'25.5',
                  aType:'Non-Commodity',
                  title:'Paris',
                  descr:'Paris'           
                },        
                    {
                  lat: 55.7512419, 
                  lon: 37.6184217,
                  address:'Moscow',
                  gval:'11.5',
                  aType:'Non-Commodity',
                  title:'Moscow',
                  descr:'Moscow Airport'              
                },     

                {
              lat:-9.481553000000002, 
              lon:147.190242, 
              address:'Port Moresby',
              gval:'1',
              aType:'Oil',
              title:'Papua New Guinea',
              descr:'Papua New Guinea 123123123'              
            },
            {
           lat:20.5200,
           lon:77.7500,
           address:'Indore',
            gval:'1',
            aType:'Oil',
            title:'Indore, India',
            descr:'Airport India'
        }
    ];

    var myOptions = {
        zoom: 2,
        center: new google.maps.LatLng(51.9000,8.4731),
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };

    var map = new google.maps.Map(document.getElementById("map"), myOptions);

    var infowindow =  new google.maps.InfoWindow({
        content: ''
    });

    for (i = 0; i < Locations.length; i++) {
            size=15;        
            var img=new google.maps.MarkerImage('marker.png',           
                new google.maps.Size(size, size),
                new google.maps.Point(0,0),
                new google.maps.Point(size/2, size/2)
           );

        var marker = new google.maps.Marker({
            map: map,
            title: Locations[i].title,
            position: new google.maps.LatLng(Locations[i].lat, Locations[i].lon),           
                icon: img
        });

        bindInfoWindow(marker, map, infowindow, "<p>" + Locations[i].descr + "</p>",Locations[i].title);  

    }

}

function bindInfoWindow(marker, map, infowindow, html, Ltitle) { 
    google.maps.event.addListener(marker, 'mouseover', function() {
            infowindow.setContent(html); 
            infowindow.open(map, marker); 

    });
    google.maps.event.addListener(marker, 'mouseout', function() {
        infowindow.close();

    }); 
} 

সম্পূর্ণ কাজ উদাহরণ। আপনি শুধু কপি, পেস্ট এবং ব্যবহার করতে পারেন।





google-maps-api-3