所以,我的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,它们只是检索并保存一个服务的纬度和经度.
这工作正常,我可以移动地图,每次存储的位置将被正确更新.
问题是,当我离开视图(选择一个位置)然后返回(位置仍然保持与最后一个相同),它看起来像标记没有指向正确的位置,但有点进一步(它总是相同的偏移).
有人知道为什么会发生这种情况吗?
编辑:
第一次访问视图时,标记将显示在正确的位置.但是,我连续访问的视图,标记没有指向正确的位置,但几个像素.我也应该提到,视图没有被缓存,所以每次都重新创建地图.
最后,我注意到一个好奇的是,我第一次访问这个视图,地图在它可见之后,它做了一个小的弹跳,并稍微扩展!
使用自定义标记,您可以使用html完全工作的标记.它也响应所有事件点击,鼠标悬停使用谷歌地图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
FYI,我是ngmap的创建者.