YandexMap 2 : немесе үйге қайтып бара жатқанда...

Яндекс Карта туралы аздап оқыған соң жұмыс істеп көрсем қайтеді деп ойладым.
Ең алдымен Картаның АПИ ін оқыған дұрыс.
Кімге қызық соларға арналған.ҚҚҚ
Яндекс Картаны косу үшін 
<head>
<script src="http://api-maps.yandex.ru/2.1/?lang=ru_RU" type="text/javascript"></script>
</head>
....

жазып қашып кетеміз
Қашу

Ойнаймын әрине ))
Бетімізде контейнер карта орналасатын зона жасаймыз. Яғни карта осының ішінде орналасатын болады. Хм, имХо.
Сүйтіп, боди дың жабылар алдына картаны «крит» етеміз:
var myMap;

// DOM, АПИ дайын болганын кутемиз:
ymaps.ready(create);

function create () {
    // картанын параметрлары го.
    myMap = new ymaps.Map(
        // ID DOM-элемента.
        'map',
        // Параметрлер.
        {
            // Географиялык центрлери картанын
            center: [51.15, 71.42], // Астана
            // Масштаб.
            zoom: 10,
            // Карта типы: "Спутник".
            type: 'yandex#satellite',
            controls: ["zoomControl"]
        }
    );
}

Карта типы мыналар бола алады:
Спутник (yandex#satellite);
Гибрид (yandex#hybrid);
Народная(карапайым халыкка арнлган) карта (yandex#publicMap);
Халыктын гибриди дей ма, сондай :) (yandex#publicMapHybrid).
controls — Картадагы баскару құралдары, мұнда масштабты өзгерту, линейка, пробкаларды көрсету кнопкаларын орналастыруға болады.
Картаны жою ушин 
myMap.destroy()
жетип жатыр.

Енди, картамызга placemark косайык (place+mark)- метка, для местоположения деп аудардым озим :)
Олардын туры мынадай болып коринеди картада:

Плейсмарк — ол геоОбъект, өзіне тән эвенттері, пропертистары бар.
Плейсмарк құру үшін Яндекс АПИ дің Placemark класын пайдаланамыз.
// Плейсмарк крит ету.
var placemark = new ymaps.Placemark([48, 40], {
    balloonContent: '<img src="http://img-fotki.yandex.ru/get/6114/82599242.2d6/0_88b97_ec425cf5_M" />',
    iconContent: "тест"
}, {
    preset: "twirl#yellowStretchyIcon",
    // Балунды жабатын кнопканы сөндіреміз.
    balloonCloseButton: false,
    // Балун будем открывать и закрывать кликом по иконке метки. Түсінікті деп ойлаймын :)
    hideIconOnBalloonOpen: false
});

Негізгі пропертистары, бізге керектілері, олар balloonContent,iconContent болып табылады.
Оларды кәдімгі <div /> контейнер ретінде пайдалана беруге болады, яғни ішіне кез келген элементті орналастыруга болады html тэгтер арқылы әрине. Ал значокты (icon) preset қалайша стилін өзгертуге болатынын, тіпті өзіңіздің фотоңызды қойсаңыз да болады картаға,мына жерден оқып аласыз гой да?

Енді осы плейсмеркке эвент жазып көрейік, мысалы бізге картаға кез келген жеріне басқан кезде сол жерге плейсмарк жылжитындай болу қажет делік.

Ия, ия onClick эвенті қажет )))
Яғни картаға он клик эвенті орындалуы қажет, себебі біз картаны басамыз ғой:

myMap.events.add('click', function (e) {
      // Нүктенің географиялық координаталарын .get('coords') арқылы білуге болады
     // долгота,широта мандерин окимыз:				
     var position = e.get('coords');
     console.log('coords:'+position);
     // Плейсмарктің координаталарын өзгертеміз осы кезде:
     placemark.geometry.setCoordinates(position);
});

Өте қарапайым, солай ғой да?
Ия, плейсмаркті қозғалттық. Керемет әрине, бірақ біқ картаға жай ғана баса салдық қой.
Енді сол қайда түскенімізді анықтап көрсек қайтеді?

Ол үшін бізге географиялық координаталарымызды (долгота, широта) мекен жай форматына конвертациялау қажет болады.
Ол үшін статикалық geocode функциясын пайланамыз. Аргумент ретінде координатаны берсек ол бізге адреске айналдырып береді, ал егер қала, көше атын берсек: «geocode(»Астана, Казахстан")" ол бізге ең ықтималдылығы жоғары геокоординатаны қайтарады. geocode функциясы асинхронды жұмыс істейді.

myMap.events.add('click', function (e) {
      // Нүктенің географиялық координаталарын .get('coords') арқылы білуге болады
     // долгота,широта мандерин окимыз:				
     var position = e.get('coords');
     console.log('coords:'+position);
     // Плейсмарктің координаталарын өзгертеміз осы кезде:
     placemark.geometry.setCoordinates(position);
     // Орналастырып болган сон балунга мынадай үйреншікті контент лоадер орналастырамыз
     placemark.properties.set('balloonContent', "Күте тұрыңыз...");
     placemark.balloon.open();
     
    // Енді геокодтаймыз;
    ymaps.geocode(placemark.geometry.getCoordinates(), {
	results: 1
    }).then(function (res) {
	var newContent = res.geoObjects.get(0) ?
	res.geoObjects.get(0).properties.get('balloonContent') :'Адрес анықталмады :(';
	// Балунға жаңа мәліметтер орналастырамыз.
	placemark.properties.set('balloonContent', newContent);
	placemark.properties.set('iconContent', newContent);
	placemark.properties.set('hintContent', newContent);
	});
});


Плейсмаркті картаға орналастыратын уақыт келді

myMap.geoObjects.add(placemark);

Өшіру үшін
myMap.geoObjects.remove(placemark);


Біздің ең ақырғы кодымыздың түрі мынадай болды сонда:

<script type="text/javascript">
$(document).on('ready',function(){
	var myMap;

// DOM, АПИ дайын болганын кутемиз:
ymaps.ready(create);


});


function create () {
    // картанын параметрлары го.
    myMap = new ymaps.Map(
        // ID DOM-элемента.
        'map',
        // Параметрлер.
        {
            // Географиялык центрлери картанын
            center: [51.15, 71.42], // Астана
            // Масштаб.
            zoom: 10,
            // Карта типы: "Спутник".
            type: 'yandex#satellite',
            controls: ["zoomControl"]
        }
    );
	var placemark = new ymaps.Placemark([48, 40], {
    balloonContent: '<img src="http://img-fotki.yandex.ru/get/6114/82599242.2d6/0_88b97_ec425cf5_M" />',
    iconContent: "тест"
}, {
    preset: "twirl#yellowStretchyIcon",
    // Балунды жабатын кнопканы сөндіреміз.
    balloonCloseButton: false,
    // Балун будем открывать и закрывать кликом по иконке метки. Түсінікті деп ойлаймын :)
    hideIconOnBalloonOpen: false
});

myMap.events.add('click', function (e) {
      // Нүктенің географиялық координаталарын .get('coords') арқылы білуге болады
     // долгота,широта мандерин окимыз:				
     var position = e.get('coords');
     console.log('coords:'+position);
     // Плейсмарктің координаталарын өзгертеміз осы кезде:
     placemark.geometry.setCoordinates(position);
     // Орналастырып болган сон балунга мынадай үйреншікті контент лоадер орналастырамыз
     placemark.properties.set('balloonContent', "Күте тұрыңыз...");
     placemark.balloon.open();
     
    // Енді геокодтаймыз;
    ymaps.geocode(placemark.geometry.getCoordinates(), {
	results: 1
    }).then(function (res) {
	var newContent = res.geoObjects.get(0) ?
	res.geoObjects.get(0).properties.get('balloonContent') :'Адрес анықталмады :(';
	// Балунға жаңа мәліметтер орналастырамыз.
	placemark.properties.set('balloonContent', newContent);
	placemark.properties.set('iconContent', newContent);
	placemark.properties.set('hintContent', newContent);
	});
});
myMap.geoObjects.add(placemark);
}


</script>


Осымен аяқтадым. Кімге қызық болса, келесі жолы маршруттар туралы, арақашықтықты анықтау, т.б туралы жазамын, тек ол үшін осы статьяга ♥ 100 лайк койылуы қажет ҚҚҚҚ
  • +7
4 пікір
Abylai_adil
рахмет, түсінікті жазылыпты. жалғасын күтемін )
shainek
«крит» дегенді біраз уақыт түсінбей отырдым, "құру" деп жаза берсең болады ғой ))
Жалғасын күтеміз. Картамен талай нарсе істеуге болады)
vfvtnjd
Раскладка ауыстыруга еринемин))))
Тек тіркелген қолданушылар ғана пікір қалдыра алады.