谷歌地图与离子

2023-11-22

我正在尝试使用 google 地图和 Ionic 来实现地图。我按照这个编码Link但我得到的只是一个空白屏幕,不知道哪里出了问题。请帮忙

这是控制器

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>

请帮忙。


我改变了一些东西来让它工作:

您不再需要 google 地图的 api 密钥,这对于脚本 src 来说就足够了(请参阅Google 地图 API 密钥是什么):

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

将“functioninitialize()”替换为“$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>

我不知道为什么它不能与 domListener 一起使用,但在显示数据之前需要初始化数据(请参阅Google MAP API 未捕获类型错误:无法读取 null 的属性“offsetWidth”)。使用 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')
    };
});

希望这有帮助!

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

谷歌地图与离子 的相关文章

  • 将 Cordova console.log 写入文件

    有谁知道是否有可能console log写入文件或类似的东西 我已经记录了我的应用程序 但它仅写在控制台上 出于远程目的debugging我也需要将现有日志写入文件 我想创建一个文件并将日志写入该文件中 但这将使我复制现有的日志代码 因此
  • 如何在 Google 地图中突出显示悬停时的标记以获得可排序的表格?

    我有一个使用 jQuery 插件进行排序的表格表排序器 2 0 http tablesorter com docs 在同一页面上 我有一个 Google 地图 它显示表中每个项目的标记 现在 我想要做到这一点 以便当 tr 悬停时 Goog
  • 从 google 地图 api v3 获取英文地址

    我使用谷歌地图 API v3 来获取某个点的坐标和地址 但谷歌返回法语地址 这是我用来获取地址的脚本 如何强制谷歌地图以英语返回结果 var map var geocoder var mapOptions center new google
  • Google 地图信息窗口根据内部内容调整大小

    我正在使用此方法创建自定义信息窗口 UIView mapView GMSMapView mapView markerInfoWindow GMSMarker marker基于UIStoryboard使用自动布局 我预计一些内部视图将被调整大
  • PhoneGap - 构建错误

    我对phonegap非常陌生 并尝试通过输入phonegap上描述的命令来创建一个简单的测试应用程序install http phonegap com install webpage 不幸的是 我在命令行中收到以下错误 BUILD FAIL
  • cordova 添加平台 - 执行命令“ant”时出错

    在一开始的时候 我知道这个问题已经被问了太多次了 我检查了所有的答案 尝试了我发现的每一种组合和每一种解决方案 但到目前为止没有任何效果对我有用 问题 我已经成功安装了cordova 从官方网站下载了它 并且我一直在遵循指南 我已经添加wp
  • 如何在pyqt5中创建小部件来显示谷歌地图

    如何从用户那里获取纬度和经度并在 pyqt5 小部件的地图上显示该位置 我的操作系统是Windows 我找到了这个链接 https github com eyllanesc qMap https github com eyllanesc q
  • 添加滚动到顶部按钮(Ionic 2 | Typescript)

    大家好 我正在尝试添加 滚动到顶部按钮 实现以下内容 1 当用户向下滚动时显示按钮 2 当用户向上滚动时隐藏按钮 3 如果点击该按钮 则滚动到顶部并隐藏该按钮 关于如何使其正确的任何建议 多谢 简化scrollToTop from adri
  • 使用phonegap发送电子邮件[关闭]

    很难说出这里问的是什么 这个问题是含糊的 模糊的 不完整的 过于宽泛的或修辞性的 无法以目前的形式得到合理的回答 如需帮助澄清此问题以便重新打开 访问帮助中心 help reopen questions 任何人都可以帮助使用 Phonega
  • 如何在react-google-maps中添加标记?

    在中使用 React JS流星1 5 https www meteor com Question 需要一种添加方式Marker using 反应谷歌地图 https github com tomchentw react google map
  • 未捕获的ReferenceError:google未定义(索引):21初始化(Google Maps API)

    继续在控制台中收到此错误 Uncaught ReferenceError google is not Defined 已经做了一段时间了 但没有运气 非常感谢任何帮助 提前致谢
  • 我可以将 OverlappingMarkerSpiderfier 与 react-google-maps 一起使用吗?

    我正在开发一个使用react google maps https github com tomchentw react google maps https github com tomchentw react google maps 图书馆
  • 如何获取PhoneGap将看到的android目录中的文档

    我希望能够将一些文件复制到我的 PhoneGap Cordova 的 Documents 目录中 以便当我使用 cordova plugin file API 列出该目录时它们会显示出来 不幸的是 文件 API 与平板电脑存储上的实际内容之
  • Visual Studio Taco - Remotebuild 将不再部署到远程设备

    直到最近 2016 年 9 月 15 日左右 我还能够使用 VS2015 以及最新版本的 TACO 和 Remotebuild 来构建 Cordova 项目并将其部署到远程设备 iPhone 6 我现在运行的是 ios 10 并更新了 iT
  • 修复了 Google 地图混搭中的图例

    我有一个带有 Google 地图混搭的页面 其中的图钉按日期 周一 周二等 进行颜色编码 包含地图的 IFrame 是动态调整大小的 因此当浏览器窗口调整大小时 它也会调整大小 我想在地图窗口的一角放置一个图例 告诉用户每种颜色的含义 Go
  • cordova.js 导致引用错误“未定义需求”

    我想用恩科尔多瓦检测设备的网络状态 然而 一旦我包括科尔多瓦 js我收到一个错误 未捕获的引用错误 未定义 require cordova js 23 我已经安装并成功运行Node js and Cordova 我已经下载并安装了恩科尔多瓦
  • Android 4.3 和 PhoneGap,无法点击链接

    我在 Galaxy Note 3 上使用 PhoneGap 2 9 我的布局类似于 Facebook 手机的布局 它有一个从左侧滑出的导航栏 我遇到的问题是 当导航栏的按钮超出屏幕大小并需要滚动时 无法点击它们 也就是说 它们不会执行预期的
  • 如何在android中的地图上显示当前位置标记?

    我正在开发一个应用程序 我想在地图中使用标记显示当前位置 我正在使用谷歌地图 v2 在这里 当 GPS 关闭时 我可以显示地图和标记 但当 GPS 打开时 地图上看不到任何标记 我的要求是在地图上显示当前位置的标记 我尝试这样 Overri
  • 已执行最大重试次数。上传ipa问题

    我使用 build phonegap com 构建了 ipa 我试图将此 ipa 卸载到商店 但收到此错误 我解决了这个问题 安装xCode 4 并使用该xCode 4的版本应用程序加载器 这个问题得到解决
  • 使用 google Directions API 的地图视图绘制方向 - 解码折线

    我正在尝试使用 Google 方向 API 在我的地图视图上显示方向 但我在从 JSON 响应获取数据时遇到困难 我可以获得 级别 和 点 字符串 但无法弄清楚如何将它们解码为地图上的点 任何帮助将非常感激 我有一个类可以为您解码它们 添加

随机推荐