Question

我有以下HTML代码：

<section data-ng-controller="NearbyController" ng-init="getUserLocation()">

  <!-- spinner while map is loading -->
  <span us-spinner spinner-key="spinner-1" spinner-start-active="true"></span>

  <div class="left-half-container">
    <ui-gmap-google-map center="map.center" zoom="map.zoom" draggable="true" options="options">

      <!-- marker to show current user location -->
      <ui-gmap-marker coords="marker.coords" options="marker.options" idkey="marker.id">
        <ui-gmap-window show="true" closeClick="closeClick()">
        </ui-gmap-window>
      </ui-gmap-marker>

      <ui-gmap-window ng-repeat="marker in allMarkers" show="marker.showWindow" options="marker.infoWindow" coords="marker.coords">
      </ui-gmap-window>
      <ui-gmap-markers models="allMarkers" coords="'coords'" options="'options'" icon="'icon'" click="'onClick'">
      </ui-gmap-markers>

    </ui-gmap-google-map>
  </div>
</section>

这是来自控制器的相关代码（我认为）：

// pushing breweries data from $http request and place markers
var handleSuccess = function(data, status){
  if (data.data){
    $scope.breweries = data.data;
    placeMarker();
  }
  usSpinnerService.stop('spinner-1'); //stop the spinner
};

var createMarker = function (i) {
  var name = $scope.breweries[i].brewery.name;
  var addr = ($scope.breweries[i].streetAddress !== undefined) ? $scope.breweries[i].streetAddress + '<br>' : '';
  var phone = ($scope.breweries[i].phone !== undefined) ? $scope.breweries[i].phone + '<br>' : '';
  var id = $scope.breweries[i].brewery.id;
  var dist = $scope.breweries[i].distance + ' miles away<br>';
  var desc = '<div class="info-window"><a href="#!/brewery/' + id + '"><strong>' +
             name + '</strong></a><br>' + dist + addr + phone + '</div>';
  var ret = {
    id: i,
    coords : {
      latitude: $scope.breweries[i].latitude,
      longitude: $scope.breweries[i].longitude,
    },
    options: {
      title: name,
    },
    infoWindow: {
      content: desc
    },
    icon: '/modules/nearby/images/beer-icon.png',
    showWindow: false
  };
  ret.onClick = function() {
    if ($scope.oldWindow > -1) {
      $scope.allMarkers[$scope.oldWindow].showWindow = false;
    }
    $scope.oldWindow = ret.id;
    ret.showWindow = !ret.showWindow;
  };

  return ret;
};

// create markers for all breweries
var placeMarker = function() { // places all the brewery markers
  var markers = [];
  for (var i = 0; i < $scope.breweries.length; i++) {
    markers.push(createMarker(i));
  }
  $scope.allMarkers = markers;
};

$scope.getUserLocation = function(){
    // function to access users geolocation coordinates, draw map and place markers
  geolocation.getLocation().then(function(data){
    $scope.coords = {lat:data.coords.latitude, long:data.coords.longitude};

    uiGmapGoogleMapApi.then(function(maps) {
      $scope.map = { center: { latitude: $scope.coords.lat, longitude: $scope.coords.long }, zoom: 12};
      $scope.windowOptions = {
        visible: true
      };

      curLocationMarker(); // add marker for current location
      Breweries.getData($scope.coords).success(handleSuccess); // get brewery data from factory
    });
  });
};

这一切都可以正常使用：Windows桌面，Macbook Air，Windows手机和Android手机。这个问题特别适用于iPad和iPhone上的Safari浏览器（iPad和iPhone上的Chrome浏览器可以使用！）。当您第一次去地图时，只显示地图，没有当前位置标记或啤酒厂标记。如果您在浏览器中返回然后再转发，则可以显示当前位置标记，但仍然没有啤酒厂标记！

我已经花了几天时间试图解决这个问题，我无法弄明白。我运行Windows 7安装程序，因此无法使用Web Inspector连接到Safari浏览器，我尝试过无效。

您可以在实际网站上看到这个：ontappapp.azurewebsites.net，然后转到菜单中的“附近”或“发现附近的Breweries”。谢谢！

angularjs谷歌地图标记没有在iPad / iPhone上显示

0 个答案: