问题：

谷歌地图与离子

马阳曦

2023-03-14

我试图实现一个地图使用谷歌地图与离子。我遵循了这个链接中的编码，但我得到的只是一个空白屏幕，不知道我哪里出错了。请帮忙

这是控制器

angular.module('starter', ['ionic'])

.controller('MapCtrl', function($scope, $ionicLoading, $compile) {
  function initialize() {
    var myLatlng = new google.maps.LatLng(43.07493,-89.381388);

    var mapOptions = {
      center: myLatlng,
      zoom: 16,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    var map = new google.maps.Map(document.getElementById("map"),
        mapOptions);

    //Marker + infowindow + angularjs compiled ng-click
    var contentString = "<div><a ng-click='clickTest()'>Click me!</a></div>";
    var compiled = $compile(contentString)($scope);

    var infowindow = new google.maps.InfoWindow({
      content: compiled[0]
    });

    var marker = new google.maps.Marker({
      position: myLatlng,
      map: map,
      title: 'Uluru (Ayers Rock)'
    });

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

    $scope.map = map;
  }
  google.maps.event.addDomListener(window, 'load', initialize);

  $scope.centerOnMe = function() {
    if(!$scope.map) {
      return;
    }

    $scope.loading = $ionicLoading.show({
      content: 'Getting current location...',
      showBackdrop: false
    });

    navigator.geolocation.getCurrentPosition(function(pos) {
      $scope.map.setCenter(new google.maps.LatLng(pos.coords.latitude, pos.coords.longitude));
      $scope.loading.hide();
    }, function(error) {
      alert('Unable to get location: ' + error.message);
    });
  };

  $scope.clickTest = function() {
    alert('Example of infowindow with ng-click')
  };

});

这是html文件

 <script src="//maps.googleapis.com/maps/api/js?key=AIzaSyB16sGmIekuGIvYOfNoW9T44377IU2d2Es&sensor=true"></script>


<body ng-controller="MapCtrl">
<ion-header-bar class="bar-dark" >
  <h1 class="title">Map</h1>
</ion-header-bar>
<ion-content>

  <div id="map" data-tap-disabled="true"></div>
</ion-content>
<ion-footer-bar class="bar-dark">
  <a ng-click="centerOnMe()" class="button button-icon icon ion-navigate">Find Me</a>
</ion-footer-bar>
  </body>

请帮忙。

共有3个答案

松和安

2023-03-14

如果您使用的是最新版本的Ionic，那么在部署android时可能会遇到一个空白屏幕，但在web浏览器中运行解决方案时，您会看到地图。要解决您需要添加白名单插件的问题，请运行：爱奥尼亚插件添加科尔多瓦插件白名单。

徐嘉谊

2023-03-14

或者干脆把这个换掉

google.maps.event.addDomListener(window, 'load', initialize);

为此

ionic.Platform.ready(initialize);

参考http://codepen.io/mircobabini/developer/ionic-google-maps-nightly

班景龙

2023-03-14

我改变了一些事情来让它工作：

您不再需要google maps的api键，这对于脚本src来说已经足够了（请参阅google maps api键是什么）：

<script src="//maps.googleapis.com/maps/api/js?sensor=false"></script>

将“function initialize（）”替换为“$scope.init（）”，并注释掉其中的行：

//google.maps.event.addDomListener(window, 'load', initialize);

还可以将ng init=“init（）”添加到html中，如下所示：

<ion-header-bar class="bar-dark" ng-init="init()">
    <h1 class="title">Map</h1>
</ion-header-bar>

我不知道为什么它不能与DOMStener一起工作，但是数据需要在显示之前进行初始化（请参阅Google MAP API Uncaught TypeError:Cannot read属性'offsetWidth'of null）。使用ng init可以实现这一点。

最终控制器应该是这样的：

.controller('MapCtrl', function($scope, $ionicLoading, $compile) {

    $scope.init = function() {
        var myLatlng = new google.maps.LatLng(43.07493,-89.381388);

        var mapOptions = {
          center: myLatlng,
          zoom: 16,
          mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        var map = new google.maps.Map(document.getElementById("map"),
            mapOptions);

        //Marker + infowindow + angularjs compiled ng-click
        var contentString = "<div><a ng-click='clickTest()'>Click me!</a></div>";
        var compiled = $compile(contentString)($scope);

        var infowindow = new google.maps.InfoWindow({
          content: compiled[0]
        });

        var marker = new google.maps.Marker({
          position: myLatlng,
          map: map,
          title: 'Uluru (Ayers Rock)'
        });

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

        $scope.map = map;
    };

    // google.maps.event.addDomListener(window, 'load', initialize);

    $scope.centerOnMe = function() {
        if(!$scope.map) {
            return;
        }

        $scope.loading = $ionicLoading.show({
          content: 'Getting current location...',
          showBackdrop: false
        });

        navigator.geolocation.getCurrentPosition(function(pos) {
          $scope.map.setCenter(new google.maps.LatLng(pos.coords.latitude, pos.coords.longitude));
          $scope.loading.hide();
        }, function(error) {
          alert('Unable to get location: ' + error.message);
        });
    };

    $scope.clickTest = function() {
        alert('Example of infowindow with ng-click')
    };
});

希望这有帮助！

类似资料：

谷歌地图-点到折线的距离

我有一些谷歌地图折线。我试图在它们周围画两条折线，这样它们就形成了某种边界：所以对于原始折线的每一个点，我计算边界线点，从原点算起25米：在这个例子中，让我们省略折线的第一个和最后一个点。所以我总是看上一个点和下一个点，计算中心点的偏移量。
Android谷歌地图

所以我看到了一个特殊的例外，我敢肯定的是谷歌地图的绘图代码。我有一个片段，在那里我以编程方式添加了一个支持地图片段，然后我在其中操纵谷歌地图实例。这是stacktrace：我无法可靠地复制它（尽管这种情况经常发生），我已经查看了ReadWriteDirectByteBuffer和ShortToByteBufferAdapter，但没有任何东西突然出现在我面前。有什么想法吗？
CodeNameOne谷歌地图

我认为问题是我需要添加构建提示。我可以找到在哪里添加他们，但我不确定他们应该是什么格式。我也不知道要补充什么。我想我发现了一个帖子，说我需要添加Android.xapplication=Android:value=“Your Key”/>Android.xPermissions= 但我不确定构建提示条目表单中的格式是什么
5.1.1谷歌地图

LSV默认的对谷歌影像进行了加载，如果需要加载其他的谷歌地图数据，可以通过LSV中直接点击即可加载。
谷歌身份验证版本与谷歌地图冲突

我正在遵循官方的Google身份验证流程。我的应用程序已经使用了最新版本的Google地图。项目应用程序地图下方有一条红线，弹出窗口显示找到了11.8.0和11.4.2。构建错误消息如下：，错误：任务“：应用程序：进程”的执行失败。请通过更新谷歌服务插件的版本来修复版本冲突（有关最新版本的信息，请访问https://bintray.com/android/android-tools/co
基于距离过滤谷歌地图标记

我正在考虑根据与用户当前位置的距离过滤谷歌地图标记。我将此设置为从数据库中引入标记并显示在地图上，但我想限制这些标记的显示，仅显示距离用户当前位置3英里的标记。我收到JSON形式的标记（具有lat long详细信息）如下：收到的JSON示例：我将地图放在用户位置的中心，如下所示：我认为处理这个问题最有效的方法是过滤JSON，但我甚至不知道从哪里开始，因为我对谷歌地图API还不熟悉？我相信应

谷歌地图与离子

共有3个答案

相关问答

相关文章

相关阅读

相关工具

相关文档