在JavaScript Google地圖的中心顯示十字線

我想顯示固定在Google地圖中心的十字線/十字線，就像Wikimapia.org一樣。不幸的是，他們正在使用API的v2，並且正在使用v3。在JavaScript Google地圖的中心顯示十字線

當用戶平移地圖時，十字準線應保持固定在中心位置。

ControlPosition枚舉沒有CENTER選項，所以我想任何解決方案都會有點詭異。

我試圖覆蓋它作爲一個div在地圖之外，但我沒有設法讓它顯示在地圖上 - 它似乎得到了一個z順序攤牌。

2010-11-09 Drew Noakes

給定的解決方案對我無效，因爲覆蓋的div在地圖中創建了一個死角。使用Google Maps JavaScript API V3爲我的項目提供更好的解決方案是在地圖上以1像素矩形形狀創建標線。然後使用地圖bounds_changed事件重新標記標記。

十字線圖像是63 x 63 png。（圖片/ reticle.png）

定義標記圖像和形狀...

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 
    };

創造我們的地圖（main_map）我們添加了標記後...

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

這裏var latlng與用於創建main_map的LatLng對象相同。 zIndex應該比任何其他標記zIndex大，以保持標線在最上面。

然後我們添加一個事件處理程序，當映射bounds_changed被觸發時被調用。

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

最後我們有了centerReticle（）函數。

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

因爲我們沒有做任何事情都要用「的bounds_changed」事件，我們可以通過傳遞一個匿名函數傳遞給addListener調用整理代碼...這讓我們不必定義centerReticle（）功能。

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

它實際上很漂亮。我希望這可以幫助別人。

謝謝。

跳過

來源

2011-05-02 06:14:43 BentFX

奇妙的是，我的解決方案創造了一個非常煩人的死角，儘管很小。給我一點點白色來測試這個...... – 2011-05-02 12:46:41

嗨德魯，我很高興你注意到我的答案，因爲它似乎是個把戲。像往常一樣，我在尋找答案時發現了你的問題，但是在意識到我不會對它滿意之前，從來沒有從地圖的左上角離開覆蓋的div。我目前正在研究PithyTwits，一個twitter web應用程序。我避開地理編碼這個術語，因爲人們想要把它全部科學化。我不做地理編碼，我只是收集LatLng並將它們放在地圖上。以下是一些帶截圖的推文。 - http://bit.ly/iuo9Ia http://bit.ly/iTOjeb – BentFX 2011-05-02 14:58:48

我剛剛嘗試這個，它完美的作品 - 沒有更多的死角！非常感謝。希望我可以投這兩次:) – 2011-05-03 16:51:55

好吧，我是個傻瓜，正在讓它比應該是更難。

而不是刪除的問題，這裏的的情況下，一個解決方案可以幫助別人了：

<div id="container"> 
    <div id="map"></div> 
    <div id="reticule"><img src="reticule.gif" /></div> 
</div>

而且有些款式：

#container { position:relative; } 
#map { height:100%; width:100%; } 
#reticule { 
    position:absolute; 
    width:13px; 
    height:13px; 
    left:50%; 
    top:50%; 
    margin-top:-8px; 
    margin-left:-8px; 
    pointer-events: none; 
}

這不是地圖的正中心

來源

2010-11-09 03:36:39

您應該將此標記爲您的答案 – Galen 2010-11-09 04:42:07

@gGalen，直到詢問問題兩天後才能接受您自己的答案。 – 2010-11-09 12:05:53

我使用，我發現在DaftLogic.com的解決方案。它似乎與BentFX基本相同，但更簡潔。

var marker = new google.maps.Marker({ 
    map: map, 
    icon: '/images/reticle.png' 
}); 
marker.bindTo('position', map, 'center');

不幸的是，它也遭受了德魯注意到十字線未永久固定在地圖中心的問題。如果您快速拖動地圖或放大和縮小，您會看到十字線稍稍移動，直到有時間重新調整。如果有人想出更好的解決方案，請告訴我們。

來源

2011-05-24 21:26:45

marker.bindTo（）;功能很棒。請注意DaftLogic.com的解決方案，當您將光標懸停在光罩上時，光標會發生變化，當您拖過光標時，光標會出現死角。這兩個問題都可以通過爲標記定義一個空的（1px矩形）形狀來克服。 – BentFX 2011-07-07 23:18:58

在JavaScript Google地圖的中心顯示十字線

回答

相關問題