Ibraheem Osama Mohamed (ابراهيم اسامه محمد)

Welcome to my blog :)

JavaScript فى تطبيقات ويندوز 8 فى ال Bing Maps استخدام خرائط

with 3 comments

Begin كثير من التطبيقات الان فى علمنا الحديث يتطلب الدقه فى تحديد الاماكن و سهوله الوصف و هذا ينطبق على الخرائط ففى هذا المقال سوف اشرح كيفيه استخدام الخرائط فى تطبيقك بال JavaScript اولا : لاستخدام Bing Maps يجب ان يكون لك مفتاح للخريطه و بامكانك بسهوله الحصول عليه من غير مقابل مادى و للمزيد عن مفتاح Bing Maps اقرأ هذا المقال 
ثانيا : يجب ان تحمل Bing Maps SDK  و لتحميلها اضغط هنا
بعد الحصول على مفتاح و تحميل المفتاح انشئ تطبيق ويندوز 8 جديد بلغه ال JavaScript
قم باضافه Reference داخل التطبيق ل Bing Maps for JavaScript
12

الان تستطيع استخدام Bing Maps داخل التطبيق و الان قم باضافه div فى default.html و سميه Map

<div id=”Map” style=”position:relative;width:100%;height:100%” ></div>

ثم افتح default.js داخل ملف js  و اضف الاتى

Microsoft.Maps.loadModule('Microsoft.Maps.Map', { callback: initMap });

وقم باضافه هذه ال function

function initMap() {
        var mapDiv = document.querySelector("#Map");
        var localLocation = {};
        localLocation.latitude = 30;
        localLocation.longitude = 30;
        var mapOptions =
       {
           credentials: "AiDB_DdtnS73OATY0W9164SnaxcgGDn9E8UvJYc51o7NLmI_EjNbt3C-83IQiBKY",
           center: localLocation,
           mapTypeId: Microsoft.Maps.MapTypeId.road,
           zoom: 8
       };
        var map = new Microsoft.Maps.Map(mapDiv, mapOptions);
    }

و الان شغل التطبيق

3

ولاكن ماذا لو اردنا تحديد مكان تواجد المستخدم ؟؟
اضف امكانيه تحديد المكان فى package.appxmanifest فى capabilities و اختار ال Location

4

و لتحديد المكان استبدل ال Function القديمه بهذه

 function initMap() {
        Windows.Devices.Geolocation.Geolocator().getGeopositionAsync().then(function (e) {
            var mapDiv = document.querySelector("#Map");
            var localLocation =  {};
            localLocation.latitude = e.coordinate.latitude;
            localLocation.longitude = e.coordinate.longitude;
            var mapOptions =
           {
               credentials: "AiDB_DdtnS73OATY0W9164SnaxcgGDn9E8UvJYc51o7NLmI_EjNbt3C-83IQiBKY",
               center: localLocation,
               mapTypeId: Microsoft.Maps.MapTypeId.road,
               zoom: 8
           };
            var map = new Microsoft.Maps.Map(mapDiv, mapOptions);
        });

    }

و ماذا لو ارادت ان تظهر مكان للمستخدم او رسمه ؟؟ يمكنك استخدام ال PushPin هيا بنا. هنا ال pushPin ياخذ عاملين
1) المكان الذى تريده ان يظهر فيه و فى هذا المثال هو كانك الان
2)بعض المعطيات التى سوف اقوم بشرحها بعد ذلك

var pushpin = new Microsoft.Maps.Pushpin(localLocation, null);

و الكود كاملا

function initMap() {
        Windows.Devices.Geolocation.Geolocator().getGeopositionAsync().then(function (e) {
            var mapDiv = document.querySelector("#Map");
            var localLocation =  {};
            localLocation.latitude = e.coordinate.latitude;
            localLocation.longitude = e.coordinate.longitude;
            var mapOptions =
           {
               credentials: "AiDB_DdtnS73OATY0W9164SnaxcgGDn9E8UvJYc51o7NLmI_EjNbt3C-83IQiBKY",
               center: localLocation,
               mapTypeId: Microsoft.Maps.MapTypeId.road,
               zoom: 8
           };
            var map = new Microsoft.Maps.Map(mapDiv, mapOptions);
            var pushpin = new Microsoft.Maps.Pushpin(localLocation, null);

            map.entities.push(pushpin);
        });

    }
5

ولان ماذا عن معطيات ال Pushpin ؟؟ من الممكن اعطائه صوره او كلام او بامكانك اعطاء صالحيه تحريكه للمستخدم

 function initMap() {
        Windows.Devices.Geolocation.Geolocator().getGeopositionAsync().then(function (e) {
            var mapDiv = document.querySelector("#Map");
            var localLocation =  {};
            localLocation.latitude = e.coordinate.latitude;
            localLocation.longitude = e.coordinate.longitude;
            var mapOptions =
           {
               credentials: "AiDB_DdtnS73OATY0W9164SnaxcgGDn9E8UvJYc51o7NLmI_EjNbt3C-83IQiBKY",
               center: localLocation,
               mapTypeId: Microsoft.Maps.MapTypeId.road,
               zoom: 8
           };
            var map = new Microsoft.Maps.Map(mapDiv, mapOptions);
            var pushpin = new Microsoft.Maps.Pushpin(localLocation, {
                icon: "images/mint.png", text: "Mint", height: 80, width: 80, draggable: true, anchor: new
    Microsoft.Maps.Point(0, 50)
            });

            map.entities.push(pushpin);
        });

    }
6

نتوقف عند هذا الحد 🙂 و ان كان لك اي استفسارات اخر ارجو ان تتواصل معى و لن أتأخر ان شاء الله
شكرا

2056910448_thanks_xlarge

إبراهيم اسامه محمد
@IbraheemOsamaMo

Advertisements

Written by Ibraheem Osama Mohamed

February 15, 2013 at 5:29 pm

3 Responses

Subscribe to comments with RSS.

  1. Hi Ibraheem, we would like to talk to you about your Windows 8 app, Animals and Birds Sound, and the potential to include this in an education campaign, please can you contact me on ukedpart@microsoft.com.

    regards
    UK Education Partner Team

    Mark Stewart

    April 17, 2013 at 3:59 pm

  2. هل تسمح مايكروسوفت باستخدام مثل هكذا تطبيق بشكل تجاري أم يجب دفع رسوم حتى تستخدم الخرائط في برنامجك

    i.occulttechie

    July 3, 2013 at 4:25 pm

    • بعد التحديث الاخير لالخرائط اصبح هناك ثلاث انواع من الاستخدامات للخرائط فى تطبيقك
      اولا : الاستخدام المؤقت و يعطيك مفتاح يعمل لمدة 90 يوم و لن يكون باستطاعتك استخدام جميع مميزات الخرائط
      ثانيا : الاستخدام البسيط و يعطيك مفتاح مجانى لاستخدام الخرائط فى تطبيقك مع القليل من مميزات الخرائط و يجب ان يكون التطبيق غير هادف للربح
      ثالثا : الاستخدام على مستوى المشروعات الكبيرة او المربحة و لاستخدام هذة الميزة يجب ان يكون لديك ترخيص لاستخدام الخرائط فى تطبيقك
      و لمزيد من الايضاح و المعرفة ارجوا ان تقراء هذا المقال عن كيفية الحصول على مفتاح للخرائط من مايكروسوفت
      http://msdn.microsoft.com/en-us/library/ff428642.aspx
      شكرا و ان كان لك اى سؤال اخر ارجوك لا تترد فى سؤالى


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: