как расположить элементы на странице, такие как карта Google или другой сайт карты

Question

Сейчас мы пытаемся создать библиотеку карт, например google / bing / yahoo, мы будем использовать ее в автономном режиме.

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

1) the map tiles (small image 256X256)

2)the overlayer(marker/informationwindow/polygon...)

3)the control.

Я должен попытаться прочитать html исходники google, bing и т. Д. Но я обнаружил, что их трудно понять.

Например, этот фрагмент скопирован с другого сайта онлайн-карты Китая.

Как видите, это всего лишь пример того, как добавить маркер на карту.

Но возьмите код, есть так много вложенных div, большинство из них имеют свойство "width: 0; height: 0", я не знаю почему?

Поскольку, по моему мнению, маркер - это просто значок, просто поместите его на страницу.

Зачем использовать так много вложенных div и даже тег "map"?

Но я думаю, что они должны иметь преимущества, которых я не могу найти.

Кто-нибудь может дать некоторые предложения?

Answer 1

Обычно вы вставляете div в HTML, когда хотите создать элемент блока, но больше нет семантически загруженного элемента с правильным значением.

Я думаю, что ответом на ваш вопрос является использование толькостолько элементов div, сколько вам нужно для ваших целей.Не добавляйте больше только потому, что можете.Иногда вам вообще не нужны элементы div - вы можете использовать другие более значимые элементы, такие как img, ul, p и т. Д. Иногда вы можете избежать вставки div с помощью CSS для изменения встроенного элемента, такого как в элемент блока.

Если вам нужно больше позже, добавьте их позже.Не беспокойтесь о том, что делают Google / Bing / Yahoo.Их требования, вероятно, отличаются от ваших.

Answer 2

Используйте API Карт Google, вы можете увидеть пример пользовательских плиток здесь: http://code.google.com/apis/maps/documentation/javascript/examples/maptype-base.html

Вам нужно будет скопировать все файлы на свой компьютер, чтобы иметь возможность работать в автономном режиме.Ваш javascript будет выглядеть примерно так:

function CoordMapType() {
}

CoordMapType.prototype.tileSize = new google.maps.Size(256,256);
CoordMapType.prototype.maxZoom = 19;

CoordMapType.prototype.getTile = function(coord, zoom, ownerDocument) {
  var div = ownerDocument.createElement('DIV');
  div.style.backgroundImage=coord+'.js';
  return div;
};

CoordMapType.prototype.name = "Tile #s";
CoordMapType.prototype.alt = "Tile Coordinate Map Type";

var map;
var chicago = new google.maps.LatLng(41.850033,-87.6500523);
var coordinateMapType = new CoordMapType();

function initialize() {
  var mapOptions = {
    zoom: 10,
    streetViewControl: false,
    mapTypeId: 'coordinate',
    mapTypeControlOptions: {}
  };
  map = new google.maps.Map(document.getElementById("map_canvas"),
      mapOptions);

  google.maps.event.addListener(map, 'maptypeid_changed', function() {
    var showStreetViewControl = map.getMapTypeId() != 'coordinate';
    map.setOptions({'streetViewControl': showStreetViewControl});
  });

  // Now attach the coordinate map type to the map's registry
  map.mapTypes.set('coordinate', coordinateMapType);
}

Answer 3

Как насчет того, чтобы просто использовать сетку div 5x5, перемещать их по мере их перетаскивания, а затем динамически текстурировать их с помощью вызовов AJAX.

Если я правильно вас понимаю, все слои могут быть наложены друг на друга с помощью z-index.

<div id="control" style="z-index:-1;"></div>
<div id="overlay" style="z-index:-2;"></div>
<div id="map" style="z-index:-3;"></div>

Затем вы можете использовать каждый из этих элементов в качестве контейнеров для разных частей вашей карты.

Когда вы перетаскиваете 1 деление, скажем, вправо, оно автоматически поднимается к левой стороне вашей сетки и ретекстурирует себя (background-image) посредством вызова ajax.

Я бы так и сделал, по крайней мере.

Answer 4

Вы смотрели пример кода Google и демонстрационную галерею?

http://code.google.com/apis/maps/documentation/javascript/demogallery.html

http://code.google.com/apis/maps/documentation/javascript/examples/index.html

Я не уверен, как бы вы использовали этот «офлайн», учитывая, что образец, который вы предоставили, вызывает Интернет, чтобы получить карту. Также все эти типы карт в большой степени зависят от вызовов javascript и ajax для постоянного обновления карты. Вы имеете в виду, что эти страницы будут защищены, а не общедоступны?