地理定位问题答案

【问题标题】：Problems with geolocation地理定位问题
【发布时间】：2017-08-15 03:42:38
【问题描述】：

我想制作一个应用程序，用标记在地图上显示您的当前位置。我所做的代码似乎有效，但它不显示标记。有人能帮助我吗？这是我的 app.js：

    var app = angular.module('starter', ['ionic', 'ngCordova']);

app.run(function($ionicPlatform) {
  $ionicPlatform.ready(function() {
    // Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
    // for form inputs)
    if (window.cordova && window.cordova.plugins.Keyboard) {
      cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
    }
    if (window.StatusBar) {
      StatusBar.styleDefault();
    }
  });
});

app.controller('MapController', function($scope, $cordovaGeolocation, $ionicLoading, $ionicPlatform) {

  $ionicPlatform.ready(function() {

    $ionicLoading.show({
      template: '<ion-spinner icon="bubbles"></ion-spinner><br/>Acquiring location!'
    });

    var posOptions = {
      enableHighAccuracy: true,
      timeout: 20000,
      maximumAge: 0
    };

    $cordovaGeolocation.getCurrentPosition(posOptions).then(function(position) {
      var lat = position.coords.latitude;
      var long = position.coords.longitude;

      var myLatlng = new google.maps.LatLng(lat, long);

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

      var map = new google.maps.Map(document.getElementById("map"), mapOptions);

      $scope.map = map;
      $ionicLoading.hide();

    }, function(err) {
      $ionicLoading.hide();
      console.log(err);
    });
    google.maps.event.addListener($scope.map, 'idle', function() {

      var marker = new google.maps.Marker({
        map: $scope.map,
        position: new google.map.LatLng(myLatlng)
        icon:'http://i.imgur.com/fDUI8bZ.png'

      });

      var infoWindow = new google.maps.InfoWindow({
        content: "Here I am!"
      });

      google.maps.event.addListener(marker, 'click', function() {
        infoWindow.open(map, marker);
      });
      infowindow.open(map, marker);


    });
  })
});

【问题讨论】：

标签： html angularjs cordova ionic-framework cordova-plugins

【解决方案1】：

您正在使用 var long = position.coords.longitude; 而long是javascript中的关键字。检查下面的链接。 https://www.w3schools.com/js/js_reserved.asp 除非你使用 ECMAScript 5/6 标准

【讨论】：

【解决方案2】：

尝试按照以下方式将纬度和经度添加到new google.map.LatLng(...)

var marker = new google.maps.Marker({
        map: $scope.map,
        position: new google.map.LatLng(lat, long)
        icon:'http://i.imgur.com/fDUI8bZ.png'

      });

希望对你有帮助

【讨论】：

【解决方案3】：

花了一个小时左右的时间，试图让 W3C 地理定位的旧示例在我的特定应用程序中工作。没看到这个：

https://developers.google.com/web/updates/2016/04/geolocation-on-secure-contexts-only

如果您不使用 https，您可能（会？）在 Chrome 和 Firefox 中获得无声、无法运行的结果！我一切换到 https 就很好了。

【讨论】：