2

我有以下 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 浏览器，而且我试过 weinre 无济于事。

您可以在实时站点上亲自查看：ontappapp.azurewebsites.net 并转到菜单中的“附近”或“发现附近的啤酒厂”。谢谢！

4

0 回答 0