Интеграция Яндекс.Карт
2 октября 2012 г.
Всем привет хотелось бы поделиться с вами моим решением интеграции API Яндекс.Карт, но если что то не правильно прошу подправить(еще только разбираюсь с системой).
Решаю(стараюсь решить) задачи по мере их поступления, и одной из такой стала API Яндекс.Карт, нужно было автоматом выводить яндекс карту объекта без всяких YANDEX инструментов типа "Конструктор карт", "Определение координат" и вставки HTML кода с сайта yandex в объкт - ведь это много времени займет если будет много объектов и так для каждого эти операции придется делать! И так что я имел из дополнительных полей объекта - у меня был Город , Адрес , и номер дома, как раз этого и достаточно для определения координат.Этим я и решил воспользоваться! Начал стучать в бубен!)))
1. Для начала подключил API в template.html
<script type="text/javascript" src="http://api-maps.yandex.ru/2.0/?coordorder=longlat&load=package.full&wizard=constructor&lang=ru-RU&onload=fid_134250506289918332175"></script>
2. Потом долго вычитывал из документации нужные вещи! Мне нужно было из адреса получить координаты и поставить метку на карте. Вот что у меня получилось! Этот код я поместил в XSL-шаблоне
<script type="text/javascript">
function fid_134250506289918332175(ymaps) {
ymaps.geocode('<xsl:value-of disable-output-escaping="yes" select="property_value[property_id = 76]/value" />,<xsl:value-of disable-output-escaping="yes" select="property_value[property_id = 78]/value" />,<xsl:value-of disable-output-escaping="yes" select="property_value[property_id = 81]/value" />', { results: 1 }).then(function (res)
{
// Выбираем первый результат геокодирования
var firstGeoObject = res.geoObjects.get(0);
var map = new ymaps.Map("ymaps-map-id_134250506289918332175",
{
center: firstGeoObject.geometry.getCoordinates(),
zoom: 16,
type: "yandex#map"
});
map.controls
.add("zoomControl")
.add("mapTools")
.add(new ymaps.control.TypeSelector(["yandex#map", "yandex#satellite", "yandex#hybrid", "yandex#publicMap"]));
ymaps.geocode('<xsl:value-of disable-output-escaping="yes" select="property_value[property_id = 76]/value" />,<xsl:value-of disable-output-escaping="yes" select="property_value[property_id = 78]/value" />,<xsl:value-of disable-output-escaping="yes" select="property_value[property_id = 81]/value" />', { results: 1 }).then(function (res)
{
// Выбираем первый результат геокодирования
var firstGeoObject = res.geoObjects.get(0);
map.geoObjects
.add(new ymaps.Placemark(firstGeoObject.geometry.getCoordinates(), {balloonContent: "1"}, {preset: "twirl#lightblueDotIcon"}));
});
});
};
</script>
3. И в нужном месте поставил вывод карты
<div id="ymaps-map-id_134250506289918332175" style="width: 416px; height: 215px;"></div>
Вот и все карты создаются практически без моего участия я просто заполняю объект(товар) а из переданных значений в geocode яндекс выводит карту!
А потом нужно было выводить не метку а радиус , изменил код и всё как надо!)
<script type="text/javascript">
function fid_134250506289918332175(ymaps) {
ymaps.geocode('<xsl:value-of disable-output-escaping="yes" select="property_value[property_id = 76]/value" />,<xsl:value-of disable-output-escaping="yes" select="property_value[property_id = 78]/value" />,<xsl:value-of disable-output-escaping="yes" select="property_value[property_id = 81]/value" />', { results: 1 }).then(function (res)
{
// Выбираем первый результат геокодирования
var firstGeoObject = res.geoObjects.get(0);
var map = new ymaps.Map("ymaps-map-id_134250506289918332175",
{
center: firstGeoObject.geometry.getCoordinates(),
zoom: 16,
type: "yandex#map"
});
map.controls
.add("zoomControl")
.add("mapTools")
.add(new ymaps.control.TypeSelector(["yandex#map", "yandex#satellite", "yandex#hybrid", "yandex#publicMap"]));
map.geoObjects.add(new ymaps.Circle([firstGeoObject.geometry.getCoordinates(), 150]));
ymaps.geocode('<xsl:value-of disable-output-escaping="yes" select="property_value[property_id = 76]/value" />,<xsl:value-of disable-output-escaping="yes" select="property_value[property_id = 78]/value" />,<xsl:value-of disable-output-escaping="yes" select="property_value[property_id = 81]/value" />', { results: 1 }).then(function (res)
{
// Выбираем первый результат геокодирования
var firstGeoObject = res.geoObjects.get(0);
/*map.geoObjects
.add(new ymaps.Placemark(firstGeoObject.geometry.getCoordinates(), {balloonContent: "1"}, {preset: "twirl#lightblueDotIcon"}));*/
});
});
};
</script>
Вместо
ymaps.geocode('<xsl:value-of disable-output-escaping="yes" select="property_value[property_id = 76]/value" />,<xsl:value-of disable-output-escaping="yes" select="property_value[property_id = 78]/value" />,<xsl:value-of disable-output-escaping="yes" select="property_value[property_id = 81]/value" />', { results: 1 }).then(function (res)
Можно подставить свои значения или просто написать адрес
ymaps.geocode('Саратов Московская 55', { results: 1 }).then(function (res)
Строго не судите!
Решаю(стараюсь решить) задачи по мере их поступления, и одной из такой стала API Яндекс.Карт, нужно было автоматом выводить яндекс карту объекта без всяких YANDEX инструментов типа "Конструктор карт", "Определение координат" и вставки HTML кода с сайта yandex в объкт - ведь это много времени займет если будет много объектов и так для каждого эти операции придется делать! И так что я имел из дополнительных полей объекта - у меня был Город , Адрес , и номер дома, как раз этого и достаточно для определения координат.Этим я и решил воспользоваться! Начал стучать в бубен!)))
1. Для начала подключил API в template.html
<script type="text/javascript" src="http://api-maps.yandex.ru/2.0/?coordorder=longlat&load=package.full&wizard=constructor&lang=ru-RU&onload=fid_134250506289918332175"></script>
2. Потом долго вычитывал из документации нужные вещи! Мне нужно было из адреса получить координаты и поставить метку на карте. Вот что у меня получилось! Этот код я поместил в XSL-шаблоне
<script type="text/javascript">
function fid_134250506289918332175(ymaps) {
ymaps.geocode('<xsl:value-of disable-output-escaping="yes" select="property_value[property_id = 76]/value" />,<xsl:value-of disable-output-escaping="yes" select="property_value[property_id = 78]/value" />,<xsl:value-of disable-output-escaping="yes" select="property_value[property_id = 81]/value" />', { results: 1 }).then(function (res)
{
// Выбираем первый результат геокодирования
var firstGeoObject = res.geoObjects.get(0);
var map = new ymaps.Map("ymaps-map-id_134250506289918332175",
{
center: firstGeoObject.geometry.getCoordinates(),
zoom: 16,
type: "yandex#map"
});
map.controls
.add("zoomControl")
.add("mapTools")
.add(new ymaps.control.TypeSelector(["yandex#map", "yandex#satellite", "yandex#hybrid", "yandex#publicMap"]));
ymaps.geocode('<xsl:value-of disable-output-escaping="yes" select="property_value[property_id = 76]/value" />,<xsl:value-of disable-output-escaping="yes" select="property_value[property_id = 78]/value" />,<xsl:value-of disable-output-escaping="yes" select="property_value[property_id = 81]/value" />', { results: 1 }).then(function (res)
{
// Выбираем первый результат геокодирования
var firstGeoObject = res.geoObjects.get(0);
map.geoObjects
.add(new ymaps.Placemark(firstGeoObject.geometry.getCoordinates(), {balloonContent: "1"}, {preset: "twirl#lightblueDotIcon"}));
});
});
};
</script>
3. И в нужном месте поставил вывод карты
<div id="ymaps-map-id_134250506289918332175" style="width: 416px; height: 215px;"></div>
Вот и все карты создаются практически без моего участия я просто заполняю объект(товар) а из переданных значений в geocode яндекс выводит карту!
А потом нужно было выводить не метку а радиус , изменил код и всё как надо!)
<script type="text/javascript">
function fid_134250506289918332175(ymaps) {
ymaps.geocode('<xsl:value-of disable-output-escaping="yes" select="property_value[property_id = 76]/value" />,<xsl:value-of disable-output-escaping="yes" select="property_value[property_id = 78]/value" />,<xsl:value-of disable-output-escaping="yes" select="property_value[property_id = 81]/value" />', { results: 1 }).then(function (res)
{
// Выбираем первый результат геокодирования
var firstGeoObject = res.geoObjects.get(0);
var map = new ymaps.Map("ymaps-map-id_134250506289918332175",
{
center: firstGeoObject.geometry.getCoordinates(),
zoom: 16,
type: "yandex#map"
});
map.controls
.add("zoomControl")
.add("mapTools")
.add(new ymaps.control.TypeSelector(["yandex#map", "yandex#satellite", "yandex#hybrid", "yandex#publicMap"]));
map.geoObjects.add(new ymaps.Circle([firstGeoObject.geometry.getCoordinates(), 150]));
ymaps.geocode('<xsl:value-of disable-output-escaping="yes" select="property_value[property_id = 76]/value" />,<xsl:value-of disable-output-escaping="yes" select="property_value[property_id = 78]/value" />,<xsl:value-of disable-output-escaping="yes" select="property_value[property_id = 81]/value" />', { results: 1 }).then(function (res)
{
// Выбираем первый результат геокодирования
var firstGeoObject = res.geoObjects.get(0);
/*map.geoObjects
.add(new ymaps.Placemark(firstGeoObject.geometry.getCoordinates(), {balloonContent: "1"}, {preset: "twirl#lightblueDotIcon"}));*/
});
});
};
</script>
Вместо
ymaps.geocode('<xsl:value-of disable-output-escaping="yes" select="property_value[property_id = 76]/value" />,<xsl:value-of disable-output-escaping="yes" select="property_value[property_id = 78]/value" />,<xsl:value-of disable-output-escaping="yes" select="property_value[property_id = 81]/value" />', { results: 1 }).then(function (res)
Можно подставить свои значения или просто написать адрес
ymaps.geocode('Саратов Московская 55', { results: 1 }).then(function (res)
Строго не судите!
19 марта 2014 г.
