logo

Zobrazení nitkového kříže uprostřed JavaScriptové mapy Google

Chtěl bych zobrazit zaměřovací kříž/zaměřovací kříž, který je upevněn ve středu mapy Google, stejně jako to dělá Wikimapia.org. Bohužel používají v2 API a já používám v3.

Když uživatel posouvá mapu, zaměřovací kříž by měl zůstat fixovaný ve středu.

Neexistuje žádné CENTER možnost pro výčet ControlPosition, takže si představuji, že jakékoli řešení bude trochu složité.

Zkoušel jsem to překrýt jako div mimo mapu, ale nepodařilo se mi to přimět, aby se zobrazil v horní části mapy – zdá se, že je to přemoženo při zúčtování v pořadí z.

Odpověď

Uvedené řešení pro mě nefungovalo, protože překrývající se div vytváří na mapě mrtvé místo. Lepším řešením pro můj projekt, využívající Google Maps JavaScript API V3, bylo vytvořit záměrný kříž na mapě jako značku s tvarem obdélníku o velikosti 1 pixel. Poté pomocí události maps bounds_changed vycentrujte značku.

Obrázek mřížky je 63 x 63 png. (images/reticle.png)

Definujte obrázek a tvar značky…

  var reticleImage = new google.maps.MarkerImage(
    'images/reticle.png',            // marker image
    new google.maps.Size(63, 63),    // marker size
    new google.maps.Point(0,0),      // marker origin
    new google.maps.Point(32, 32));  // marker anchor point
  var reticleShape = {
    coords: [32,32,32,32],           // 1px
    type: 'rect'                     // rectangle
  };

Po vytvoření naší mapy (main_map) přidáme značku…

  reticleMarker = new google.maps.Marker({
    position: latlng,
    map: main_map,
    icon: reticleImage, 
    shape: reticleShape,
    optimized: false,
    zIndex: 5
  });

Zde je var latlng stejný objekt LatLng, který se používá k vytvoření main_map. ZIndex by měl být větší než jakýkoli jiný marker zIndex, aby nitkový kříž zůstal nahoře.

Potom přidáme obslužnou rutinu události, která se zavolá, když se spustí map bounds_changed.

  google.maps.event.addListener(main_map, 'bounds_changed', centerReticle);

a nakonec tu máme funkci centerReticle().

  function centerReticle(){
    reticleMarker.setPosition(main_map.getCenter());
  }

Protože s událostí ‚bounds_changed‘ neděláme nic jiného, ​​můžeme kód uklidit předáním anonymní funkce do volání addListener... To nám brání definovat funkci centerReticle(). 

  google.maps.event.addListener(main_map, 'bounds_changed',
      function(){reticleMarker.setPosition(main_map.getCenter());});

Ve skutečnosti to funguje docela hladce. Doufám, že to pomůže ostatním.

Děkuji.

Přeskočit