🚚 🙌🏽 ♂️ विभिन्न मानचित्र एपीआई के साथ काम करने के उदाहरण 🧑🏿‍🤝‍🧑🏼 👨‍👩‍👧‍👧 🦁

Google मानचित्र Api और Yandex Map Api की खोज के विषय पर कई लेख हैं, लेकिन अन्य मानचित्र सेवाओं के बारे में बहुत अधिक व्यावहारिक सामग्री नहीं है। हाल ही में आपी के साथ काम किया:

गूगल मैप
यांडेक्स नक्शा
याहू का नक्शा
बिंग नक्शा
ओपनस्ट्रीट का नक्शा

और मैं उपरोक्त सेवाओं के साथ काम को संक्षेप में प्रस्तुत करना चाहता था, अर्थात् माउस को क्लिक करके मानचित्र की शुरुआत और मार्करों की स्थापना। लेख में सामग्रियों को HTML कोड, जावास्क्रिप्ट और परिणाम के रूप में प्रस्तुत किया गया है - एक स्क्रीनशॉट, साथ ही साथ 2010 MVC3 के लिए स्रोत कोड।

Google मानचित्र के साथ, स्थिति सबसे आसान है: बहुत सारी व्यावहारिक सामग्री है, मेरा उदाहरण इस प्रकार है:
HTML पृष्ठ:

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false" ></script> <script src="@Url.Content("~/Scripts/jquery-1.5.1.min.js")" type="text/javascript"></script> <script src="@Url.Content("~/Scripts/LoadGoogle.js")" type="text/javascript"></script> <h2>GoogleMap</h2> <div id="map" style="width: 1400px; height: 500px;"></div>

स्क्रिप्ट:

 $(document).ready(function () { initialize(); }); //   div "map" function initialize() { var haightAshbury = new google.maps.LatLng(51.0532, 31.83);//(, ) var mapOptions = { zoom: 12,// center: haightAshbury,//     mapTypeId: google.maps.MapTypeId.TERRAIN//   }; map = new google.maps.Map(document.getElementById("map"), mapOptions);//  google.maps.event.addListener(map, 'click', function (event) { addMarker(event.latLng); });//    } //   function addMarker(location) { var shadow = new google.maps.MarkerImage('/Images/roles.png', new google.maps.Size(37, 32), new google.maps.Point(0, 0), new google.maps.Point(0, 32)); //   var image = new google.maps.MarkerImage('/Images/smilies.png', new google.maps.Size(20, 32), new google.maps.Point(0, 0), new google.maps.Point(0, 32)); //  marker = new google.maps.Marker({ position: location, map: map, shadow: shadow, icon: image, title: "My title!)", zIndex: 999 });//

परिणामस्वरूप, हमें मार्कर जोड़ने की क्षमता वाला एक Google मानचित्र प्राप्त होता है:

यांडेक्स मानचित्र को आरंभीकृत करने के लिए, आपको एक सेवा पहुंच कुंजी और निम्न उदाहरण की आवश्यकता है:
HTML पेज:

 <script src="http://api-maps.yandex.ru/1.1/index.xml?key=XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX" type="text/javascript"></script> <script src="@Url.Content("~/Scripts/jquery-1.5.1.min.js")" type="text/javascript"></script> <script src="@Url.Content("~/Scripts/LoadYandex.js")" type="text/javascript"></script> <h2>YandexMap</h2> <div id="YMapsID" class="YMaps YMaps-cursor-grab" style="width: 1400px; height: 500px;"> </div>

स्क्रिप्ट:

 $(document).ready(function () { initialize(); }); function initialize() { map = new YMaps.Map(document.getElementById("YMapsID"));//  map.setCenter(new YMaps.GeoPoint(31.87, 51.0532)//(, ) , 12 // , YMaps.MapType.MAP);//  map.addControl(new YMaps.TypeControl());//   map.addControl(new YMaps.ToolBar());// map.addControl(new YMaps.Zoom());//  map.addControl(new YMaps.MiniMap());//   map.addControl(new YMaps.ScaleLine());//  YMaps.Events.observe(map, map.Events.Click, function (map, mEvent) { addMarker(mEvent.getGeoPoint()); });//      } //   function addMarker(location) { var geoPlacemark = new YMaps.Placemark(new YMaps.GeoPoint(location.__lng, location.__lat), { draggable: 1 }); //   geoPlacemark.name = "  "; geoPlacemark.description = "  "; map.addOverlay(geoPlacemark);//  }

परिणामस्वरूप, हमें मार्कर जोड़ने की क्षमता वाला एक यैंडेक्स मानचित्र मिलता है:

निर्देशांक पर ध्यान दें, पहले Google पर अक्षांश, फिर अक्षांश, और Yandex के विपरीत जाएं!

याहू मानचित्र एपीआई के साथ काम करने का एक उदाहरण:
HTML पेज:

 <script type="text/javascript" src="http://api.maps.yahoo.com/ajaxymap?v=3.8&appid=appidhere"></script> <script src="@Url.Content("~/Scripts/LoadYahoo.js")" type="text/javascript"></script> <body onload="initialize_ymap()"> <h2>YahooMap</h2> <div id="ymap" style="width: 1400px;height: 500px;"></div> </body>

स्क्रिप्ट:

 function initialize_ymap() { var yPoint = new YGeoPoint(51.0532, 31.83);//(, ) var map = new YMap(document.getElementById('ymap'));//  map.setMapType(YAHOO_MAP_SAT);//  map.drawZoomAndCenter(yPoint, 6);// map.addTypeControl();//   YEvent.Capture(map, EventsList.MouseClick, reportPosition); //    //   function reportPosition(_e, _c){ var mapmapCoordCenter = map.convertLatLonXY(map.getCenterLatLon()); //  var currentGeoPoint = new YGeoPoint( _c.Lat, _c.Lon ); //     map.addMarker(currentGeoPoint); //  } }

परिणामस्वरूप, हमें मार्करों को जोड़ने की क्षमता वाला एक याहू मैप मिलता है:

बिंग मानचित्र एपीआई के साथ काम करने के लिए आपको कुंजी लेने की आवश्यकता है:
www.microsoft.com/maps/developers/web.aspx
बिंग मानचित्र एपीआई के साथ काम करने का उदाहरण:
HTML पेज:

 <script charset="UTF-8" type="text/javascript" src="http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0"></script> <script charset="UTF-8" type="text/javascript" src="https://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0&s=1"></script> <script src="@Url.Content("~/Scripts/LoadBing.js")" type="text/javascript"></script> <body onload="GetMap();"> <h2>BingMap</h2> <div id='mapDiv' style="position:absolute; width:1400px; height:500px;"></div> </body>

स्क्रिप्ट:

 function GetMap() { var map = new Microsoft.Maps.Map(document.getElementById("mapDiv"), { credentials: "xxxxxxxxxxxxxxxxx",// center: new Microsoft.Maps.Location(51.0532, 31.83),//(,) mapTypeId: Microsoft.Maps.MapTypeId.road,//( ) zoom: 8// }); //      Microsoft.Maps.Events.addHandler(map, 'click', displayLatLong); function displayLatLong(e) { if (e.targetType == "map") { var point = new Microsoft.Maps.Point(e.getX(), e.getY());//   var loc = e.target.tryPixelToLocation(point);//  var pin = new Microsoft.Maps.Pushpin(loc);// map.entities.push(pin);//  } } }

परिणामस्वरूप, हमें मार्करों को जोड़ने की क्षमता वाला एक बिंग मानचित्र मिलता है:

OpenStreet map api के साथ काम करने का एक उदाहरण:

HTML पेज:

 <script src="http://www.openlayers.org/api/OpenLayers.js"></script> <script src="@Url.Content("~/Scripts/LoadOpenStreet.js")" type="text/javascript"></script> <body onload="GetMap();"> <h2>OpenStreetMap</h2> <div id="OSMap" style="position:absolute; width:1400px; height:500px;"></div> </body>

स्क्रिप्ट:

 function GetMap() { map = new OpenLayers.Map("OSMap");//  var mapnik = new OpenLayers.Layer.OSM();//   map.addLayer(mapnik);//  map.setCenter(new OpenLayers.LonLat(31.83, 51.0532) //(, ) .transform( new OpenLayers.Projection("EPSG:4326"), //   WGS 1984 new OpenLayers.Projection("EPSG:900913") //   ), 10 //  ); var layerMarkers = new OpenLayers.Layer.Markers("Markers");//    map.addLayer(layerMarkers);//     map.events.register('click', map, function (e) { var size = new OpenLayers.Size(21, 25);//    var offset = new OpenLayers.Pixel(-(size.w / 2), -size.h); //    var icon = new OpenLayers.Icon('/Images/smilies.png', size, offset);//   layerMarkers.addMarker(//     new OpenLayers.Marker(map.getLonLatFromViewPortPx(e.xy), //   icon));//  }); //     }

नतीजतन, हमें मार्करों को जोड़ने की क्षमता के साथ एक OpenStreet map प्राप्त होता है:

ये कार्ड के साथ काम करने के दिलचस्प उदाहरण हैं, मुझे लगता है कि कोई उपयोगी होगा।

VS2010 MVC3 पर सूत्र ।

विभिन्न मानचित्र एपीआई के साथ काम करने के उदाहरण

More articles: