<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
,它们只是从服务中检索和保存纬度和经度。
这很正常,我可以移动地图,每次存储的位置都会被正确更新。
问题在于,当我离开视图(在选择位置后)然后返回时(位置仍然与上一个相同),看起来标记不指向正确的位置,而是稍微偏上一些(偏移总是相同的)。
有谁知道为什么会发生这种情况吗?
编辑:
标记出现在第一次访问视图时的正确位置。但是,在所有后续访问视图时,标记不再指向正确位置,而是向上移动了几个像素。我还应该提到,该视图未缓存,因此每次都会重新创建地图。
最后,我注意到一个奇怪的事情是,我第一次访问这个视图时,地图在可见之后会跳动一下并略微扩展!
height: 50px; margin-top: -50px;
可能不能确保正确的居中。 - petr