Клуб API Карт

Переход по координатам

Пост в архиве.

 на основе примера делаю это

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ru" lang="ru">
<head>
 <title>Мой слой</title>
 <script src="http://api-maps.yandex.ru/1.1/index.xml?key=AGM6I04BAAAASaRfRAMAO9-OOUQX_b5LqU3hXC_28fnY57kAAAAAAAAAAAAvJ-LAM3r6JueMKCRJAii2rvxwKw==" type="text/javascript"></script>

 <script type="text/javascript">



 YMaps.jQuery(function () {
 // Опишем свой класс тайлов
 function myTile (dataSource) {
 // позиция тайла в пикселах относительно левого верхнего угла карты
 var myPos = new YMaps.Point(),

 // HTML-элемент тайла
 element = YMaps.jQuery("<div/>").addClass("myTile"),

 // размер тайла
 originalSize = new YMaps.Point(5000);

 // добавляет тайл на карту
 this.onAddToMap = function (map, parentContainer) {
 element.appendTo(parentContainer);
 };

 // удаляет тайл с карты
 this.onRemoveFromMap = function () {
 element.remove(
 };

 // задает новую позицию тайлу
 this.setPosition = function (position) {
 myPos.moveTo(position);
 element.css({
 left : myPos.x,
 top : myPos.y
 }
 };
 
 // возвращает текущую позицию тайла
 this.getPosition = function () {
 return myPos.copy(
 };


 
 // осуществляет загрузку тайла
 this.load = function (tile, zoom) {
 element
 .removeClass("myTileFail")
 .addClass("myTileSuccess");
 };
 
 // выставляет 404 тайл, если для данной области нет изображения
 this.error = function () {
 element
 .removeClass("myTileSuccess")
 .addClass("myTileFail");
 };

 // отмена загрузки
 this.abort = function () {
 element
 .removeClass("myTileFail")
 .addClass("myTileSuccess");
 };

 // масштабирование тайла
 this.scale = function (coeff) {
 var newSize = originalSize.copy().scale(coeff);
 element.css({
 width : newSize.x,
 height : newSize.y
 }
 };
 }
 
 // Создаем декартову систему координат:
 var myCoordSystem = new YMaps.CartesianCoordSystem(
 new YMaps.Point(-2500, -2500), // координаты левого нижнего угла
 new YMaps.Point(2500, 2500), // координаты правого верхнего угла
 1000 // масштаб
 ),

 // Создаем карту
 map = new YMaps.Map(YMaps.jQuery("#YMapsID")[0], {
 coordSystem: myCoordSystem // передаем нашу систему координат
 }),


 // Создаем собственный источник тайлов
 myData = new YMaps.TileDataSource(),

 // Создаем собственный тип карты
 myType = new YMaps.MapType(["plot"], "Чертеж", {textColor: "#000000", minZoom: 0, maxZoom: 10 }),

 // Создаем миникарту
 miniMap = new YMaps.MiniMap(

 // Переопределим функцию получения тайла
 myData.getTile = function () {
 return new myTile(
 }


 // Добавим в список слоев новый слой, использующий наш источник данных
 YMaps.Layers.add("plot", function () { return new YMaps.Layer(myData) }

 // Выставим карте и миникарте наш тип
 map.setType(myType);
 miniMap.setType(myType);

 // Добавим панель инструментов и ползунок масштаба
 map.addControl(new YMaps.ToolBar()
 map.addControl(new YMaps.Zoom({ noTips: true })

 // Выставим центр карты и масштаб
 map.setCenter(new YMaps.Point(0, 0), 0);

 // Включим масштабирование колесом мыши
 map.enableScrollZoom(
 map.addControl(new YMaps.ScaleLine()
 
 // Создадим какой-нибудь чертеж
 

 // Зададим стиль многоугольника
 var style = new YMaps.Style(
 style.polygonStyle = new YMaps.PolygonStyle(
 style.polygonStyle.outline = true
 style.polygonStyle.fillColor = "f9001d1f"
 YMaps.Styles.add("polygon#yandex", style);

 // Рисуем
 var polygon1 = new YMaps.Polygon([
 new YMaps.Point(-2500, -2500),
 new YMaps.Point(2500, -2500),
 new YMaps.Point(2500, 2500),
 new YMaps.Point(-2500, 2500),
 ], { style: "polygon#yandex", clickable: false }),

 polygon2 = new YMaps.Polygon([
 new YMaps.Point(165.00, 285.00),
 
 new YMaps.Point(165.00, 260.00)
 ], { style: "polygon#yandex", clickable: false }

 map.addOverlay(new YMaps.Placemark(new YMaps.Point(-1549, 205))
 
 map.addOverlay(polygon1);
 // map.addOverlay(polygon2);
 }
function gocoord (value) {
map.panto(value,{flying: 1})
}

 </script>

 <style type="text/css">
 .myTile {
 position: absolute;
 width: 10px;
 height: 10px;
 border: 1px dashed gray;
 border-collapse: collapse;
 }
 
 .myTileSuccess {
 background: #FFF;
 }
 
 .myTileFail {
 background: antiquewhite;
 }
 </style>
</head>
<body>
 <form action="#" onsubmit="gocoord(this.xc.value);return false;">
 <p>
 <input type="text" id="xc" style="width:100px;" value="0" />
 <input type="text" id="yc" style="width:100px;" value="0" />
 <input type="submit" value="перейти" />
 </p>
 <div id="YMapsID" style="height: 500px; width: 500px"></div>
<a href="javascript:map.panto(geoPoint(0, 0),{flying: 1})">centr</a><br />
 </form>

</body>

</html>

 

хочу, чтобы при нажатии кнопки карта съезжала по заданным координатам, а по ссылке переходила на центр. Всякое перепрововал - не помогает.

то map undefined внутри функции, то саму функцию не видит, если внутрь блока определения карты вставить.

при нажатии на ссылку не видит map...

подскажите где туплю плиз!

3 комментария
Александр Новиков
28 января 2016, 05:51

Если честно, то лень разбираться в этой простыне.

Но есть ощущение что проблема в видимости переменных. И идет путаница локальных и глобальных переменных.

Попробуйте все же четко определить какие переменные у вас должны быть глобальными и четко это указать.

да, именно так и происходит. Поэтому и прошу помочь, в каком месте разместить функцию, чтобы она вызывалась нажатием кнопки и выполняла действия на карте

Почитайте документацию по джаваскрипту.  Когда у вас будет понятие чем переменная объявленная с var отличается от переменной объявленной без var,и где лежат границы в области видимости то таких вопросов не возникнет.