谷歌地圖setCenter不居中地圖正確

在我離子/角移動應用程序，我有一個尤伯杯般的地圖，其中基本上用戶可以拖動地圖，選擇一個位置，總有在中央固定標記。谷歌地圖setCenter不居中地圖正確

爲了實現這個目標，我也跟着從here和here的說明。

所以，我的HTML看起來像下面這樣：

<ion-view cache-view="false" view-title="Choose location"> 
    <ion-content has-header="true" class="new-meeting" has-bouncing="false"> 
     <div id="chooseLocationMap" class="full-map"></div> 
    </ion-content> 
</ion-view>

相關的SASS：

.full-map { 
    width: 100%; 
    height: 100%; 

    .center-marker { 
     position: absolute; 
     background: url(../img/default-marker.svg) -10px -5px; 
     top: 50%; 
     left: 50%; 
     z-index: 1; 
     width: 40px; 
     height: 50px; 
     margin-top: -50px; 
     margin-left: -22px; 
     cursor: pointer; 
    } 
}

最後，我的控制器，與地圖涉及的部分是這樣的：

function initialize() { 
    var initialPosition = loadStoredPosition(); 

    var mapOptions = { 
     zoom: 16, 
     mapTypeId: google.maps.MapTypeId.ROADMAP, 
     disableDefaultUI: true 
    }; 

    map = new google.maps.Map(document.getElementById('chooseLocationMap'), mapOptions); 

    google.maps.event.addListener(map, 'center_changed', function() { 
     updateStoredPosition(map.getCenter()); 
    }); 

    var markerDiv = document.createElement('div'); 
    markerDiv.className = 'center-marker'; 
    angular.element(map.getDiv()).append(markerDiv); 
} 

ionic.Platform.ready(initialize);

正如你所看到的，我有兩種方法，loadStoredPosition和updateStoredPosition，它們只是檢索並保存服務的經緯度。

這工作正常，我可以移動地圖，每次存儲的位置都會正確更新。

問題是，當我離開視圖（選擇位置後）然後返回（位置仍然保持與最後一個相同）時，它看起來像標記沒有指向正確的位置，但稍微進一步（它總是相同的偏移量）。

有誰知道爲什麼會發生這種情況？

編輯：

標記出現在正確的位置，第一次，我訪問視圖。但是，在我訪問視圖的所有連續時間中，標記不再指向正確的位置，而是向上幾個像素。我還應該提到，視圖不會被緩存，因此每次都會重新創建地圖。

最後，我注意到一個奇怪的事情是，我第一次訪問這個觀點，這是明顯的後地圖上，它一個小反彈，並稍微膨脹！

來源

2015-08-23 Alex

你提到標記始終關閉相同的偏移量;你有這個近似值嗎？ – DRobinson

我剛查過，大約30px。任何理論？ – Alex

只是一個想法：在SASS可能的錯誤？ 'height：50px; margin-top：-50px;'可能無法保證正確的居中。 – petr

ngmap最近爲此目的添加了「自定義標記」。

隨着custom-marker，你可以有充分的工作標記與HTML。它也響應所有事件click，mouseover使用谷歌地圖API。

這是例子。

https://rawgit.com/allenhwkim/angularjs-google-maps/master/testapp/custom-marker-2.html

這是所需的代碼，https://github.com/allenhwkim/angularjs-google-maps/blob/master/testapp/custom-marker-2.html。

正如你在代碼中看到的，沒有Javascript要求。

爲中心的標誌，所有的時間，所有你需要做的是添加on-center-changed="centerCustomMarker()"到地圖指示，下面給您的控制器。

$scope.centerCustomMarker = function() { 
     $scope.map.customMarkers.foo.setPosition(this.getCenter()); 
    }

我嘗試不同的方法比你問，但它可能值得一試。

GitHub上：https://github.com/allenhwkim/angularjs-google-maps

僅供參考，我的ngmap的創造者。

來源

2015-08-29 15:33:27 allenhwkim

我試過這種方法，但問題是標記的位置變化不是很平滑。理想情況下，我們希望始終保持中心地位......在您的方法中，當用戶移動地圖時，標記也會移動一點點，直到它重新調整到中心位置。 – Alex

谷歌地圖setCenter不居中地圖正確

回答

相關問題