Loading [MathJax]/jax/output/CommonHTML/config.js
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >将Google地图集成到ionic中

将Google地图集成到ionic中
EN

Stack Overflow用户
提问于 2016-09-28 04:17:51
回答 2查看 190关注 0票数 0

我在Visual Studio '15中工作,试图运行一个cordova选项卡模板项目。我只是想在我的tab-map.html上加载google地图,但我得到了以下错误:

代码语言:javascript
运行
AI代码解释
复制
TypeError: $scope.init is not a function
at new <anonymous> (http://localhost:4400/js/controllers.js:22:12)
at Object.instantiate (http://localhost:4400/lib/ionic/js/ionic.bundle.js:18010:14)
at $controller (http://localhost:4400/lib/ionic/js/ionic.bundle.js:23412:28)
at self.appendViewElement (http://localhost:4400/lib/ionic/js/ionic.bundle.js:59900:24)
at Object.render (http://localhost:4400/lib/ionic/js/ionic.bundle.js:57893:41)
at Object.init (http://localhost:4400/lib/ionic/js/ionic.bundle.js:57813:20)
at self.render (http://localhost:4400/lib/ionic/js/ionic.bundle.js:59759:14)
at self.register (http://localhost:4400/lib/ionic/js/ionic.bundle.js:59717:10)
at updateView (http://localhost:4400/lib/ionic/js/ionic.bundle.js:65398:23)
at http://localhost:4400/lib/ionic/js/ionic.bundle.js:65375:11

这是我的tab-map.html:

代码语言:javascript
运行
AI代码解释
复制
<ion-view view-title="Map">

  <ion-content class="padding">
    <ion-refresher (ionRefresh)="doRefresh($event)">
        <ion-refresher-content
            pullingIcon="arrow-dropdown"
            pullingText="Pull to refresh"
            refreshingSpinner="circles"
            refreshingText="Refreshing...">
        </ion-refresher-content>
    </ion-refresher>

    <h2 align="center">Map</h2>
    <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>

</ion-view>

还有我的controller.js,这个控制器在js文件的中间,所以它的末尾没有分号。

代码语言:javascript
运行
AI代码解释
复制
.controller('MapCtrl', function ($scope, $ionicLoading, $compile) {

$scope.init() = function () {
    console.log("Is this thing on?");
    var myLatlng = new google.maps.LatLng(35.182217, -83.381418);

    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: 'Franklin, NC'
    });

    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')
};

})
EN

回答 2

Stack Overflow用户

发布于 2016-09-28 05:08:02

编写init函数,如下所示

代码语言:javascript
运行
AI代码解释
复制
$scope.init = function () {}

而不是

代码语言:javascript
运行
AI代码解释
复制
$scope.init() = function () {}
票数 0
EN

Stack Overflow用户

发布于 2016-09-28 19:52:24

因此,我能够通过VS 2015在仿真上显示地图。在tab-map.html中,我添加了ng-init="init()“

代码语言:javascript
运行
AI代码解释
复制
<ion-content class="padding" ng-init="init()">

    <h2 align="center">Map</h2>
    <div id="map" data-tap-disabled="true"></div>
</ion-content>

现在,当我尝试在移动设备上运行时,我得到了这个错误:

代码语言:javascript
运行
AI代码解释
复制
"ReferenceError: google is not defined
at Scope.$scope.init (file:///android_asset/www/js/controllers.js:24:28)
at fn (eval at compile (file:///android_asset/www/lib/ionic/js/ionic.bundle.js:27638:15), <anonymous>:4:203)
at Scope.$eval (file:///android_asset/www/lib/ionic/js/ionic.bundle.js:30395:28)
at pre (file:///android_asset/www/lib/ionic/js/ionic.bundle.js:39095:15)
at invokeLinkFn (file:///android_asset/www/lib/ionic/js/ionic.bundle.js:22993:9)
at nodeLinkFn (file:///android_asset/www/lib/ionic/js/ionic.bundle.js:22371:11)
at compositeLinkFn (file:///android_asset/www/lib/ionic/js/ionic.bundle.js:21703:13)
at nodeLinkFn (file:///android_asset/www/lib/ionic/js/ionic.bundle.js:22387:24)
at compositeLinkFn (file:///android_asset/www/lib/ionic/js/ionic.bundle.js:21703:13)
at publicLinkFn (file:///android_asset/www/lib/ionic/js/ionic.bundle.js:21583:30)"

它指的是以下行:

代码语言:javascript
运行
AI代码解释
复制
    var myLatlng = new google.maps.LatLng(35.182217, -83.381418);
票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/39737968

复制
相关文章
jQuery Datepicker 日期插件
Datepicker日期选择插件是一个配置灵活的插件,可以自定义其展示方式,包括日期格式、语言、限制选择日期范围、添加相关按钮以及其它导航等。
阳光岛主
2019/02/19
3.2K0
jQuery Datepicker 日期插件
jQuery UI Datepicker使用介绍
本博客使用Markdown编辑器编写 在企业级web开发过程中,日历控件和图表控件是使用最多的2中第三方组件。jQuery UI带的Datepicker,日历控件能满足大多数场景开发需要。本文就主要讨论jQuery UI Datepicker的使用,和中文本地化配置。 1.jQuery UI介绍 jQuery UI是一套基于jQuery控件和动画效果Javascript类库。可以用来构建交互式的互联网应用程序。最新版本1.10.4.基于jQuery 1.6+ jQuery UI官方网站 2.jQuery
八哥
2018/01/18
2K0
jQuery UI Datepicker使用介绍
jQuery ui datepicker 日历转中文
做个笔记,以后详解 jQuery(function($){ $.datepicker.regional['zh-CN'] = { closeText: '关闭', prevText: '<上月', nextText: '下月>', currentText: '今天', monthNames: ['一月','二月','三月','四月','五月','六月', '七月','八月','九
deepcc
2018/05/16
1.1K0
利用jquery ui的datepicker开发一个课程日历
    这两天在开发某商学院的网站,里面有涉及到课程的模块,客户希望在网站的首页显示一个日历,在有课程的日期加上显眼的标识,使网站用户一眼看到日历后就能知道哪天商学院有课程以便他们安排时间报名修读。
风柏杨4711
2021/03/15
2.1K0
5-15 bootcss 之 modal 以及 jquery ui 之datepicker 小记
  最近公司在用bootstrap和Jquery UI做项目,类似与OA的东西前两天碰到点问题,记录一下。希望读者不要在遇到和我一样的问题。
_淡定_
2018/08/24
9300
Jquery(进阶一) 日期控件My97DatePicker的基本用法
My97DatePicker是一款非常灵活好用的日期控件。使用非常简单。 
Java架构师必看
2021/05/31
2K0
【说站】mysql间歇锁是什么
2、对于键值在条件范围内但并不存在的记录,在相等条件下请求给一个不存在的记录也会加锁,叫做间隙锁。
很酷的站长
2022/11/23
3760
【说站】mysql间歇锁是什么
bootstrap datepicker日期插件汉化
bootstrap datepicker是一款不错的日期插件,而且在国际化方面也有不错的支持,当然也支持简体中文了,我们只需要引入简体中文js(bootstrap-datepicker.zh-CN.js),并在datepicker属性配置language为‘zh-CN’即可,示例如下:
johnhuster的分享
2022/03/29
1.1K0
如何解决网络间歇问题?
在解决网络问题时,间歇性问题最难解决。仅在出现问题时尝试抓住问题可能需要数周的时间。解决间歇性问题有四个关键步骤。首先,您必须进入数据包的路径。其次,您需要能够长时间捕获,以确保您不会错过这个问题。最后,您需要一种方法来确定问题何时发生,以便您可以深入跟踪并查找问题数据包。继续阅读以了解如何使用IOTA 1G可靠地找到这些问题的根源。
虹科网络可视化与安全
2020/08/21
1.2K0
如何解决网络间歇问题?
勒索软件新技术趋势:间歇性加密
2021 年夏天,LockFile 勒索软件是首批引入间歇性加密技术的勒索软件家族之一。后来,越来越多的勒索软件都应用了这一技术。
FB客服
2022/11/14
9740
勒索软件新技术趋势:间歇性加密
Datepicker日期选择器插件
这个插件还是比较简单的,而且样式也比较漂亮,可以自定义选择年月日、年月日时分、年月、时间段选择等等。
从入门到进错门
2018/08/21
4K0
Datepicker日期选择器插件
好用的jQuery工作进度条
对于进度条,在HTML5下有个新标签就是用来呈现任务的进度,鉴于目前很多旧式浏览器还不完全支持HTML5,大家都喜欢用javascript和css实现进度条的功能。上周我在做OA里面的任务管理时,通过比较jQuery UI自带的[URL=http://jqueryui.com/progressbar]progress bar[/URL]还有jQuery easyui中的[URL=http://www.jeasyui.com/documentation/progressbar.php]progress bar[/URL],发现都不太符合我的需求,最后找到一个特别简单的实现,只需几行代码即可,读懂英文的看这里[URL=http://workshop.rs/2012/12/animated-progress-bar-in-4-lines-of-jquery/]ANIMATED PROGRESS BAR IN 4 LINES OF JQUERY[/URL],也可以看GitHub上的网址:[URL=https://github.com/kopipejst/progressbar]https://github.com/kopipejst/progressbar[/URL]
崔文远TroyCui
2019/02/26
9450
最好用的 12 款 Vue Timepicker 时间日期选择器测评推荐 - 卡拉云
本文首发:《最好用的 12 款 Vue Timepicker 时间日期选择器测评推荐 - 卡拉云》
蒋川
2022/02/28
8.7K0
最好用的 12 款 Vue Timepicker 时间日期选择器测评推荐 - 卡拉云
MCE | 间歇性禁食增强抗癌疗效
越来越多的研究表明,“禁食”不仅与免疫系统调控 、血糖调节有关,还对多种疾病的治疗有改善效果,如心血管疾病和癌症等。
MedChemExpress
2023/03/16
3500
MCE | 间歇性禁食增强抗癌疗效
jQuery ui 中文日历
jQuery ui 中文日历 <link href="css/jquery-ui-1.10.4.custom.min.css" rel="stylesheet" type="text/css" /> <script src="js/jquery-1.10.2.js"></script> <script src="js/jquery-ui-1.10.4.custom.min.js"></script> <script type="text/javascript"> jQuery(function(){
deepcc
2018/05/16
2.2K0
时间选择(DatePicker和TimePicker)使用
Android中日期选择控件-DatePicker的使用 android 开发 时间选择器TimePicker的使用
李小白是一只喵
2020/04/24
2.7K0
Angular 循环内使用 material datepicker
material datepicker 需要用到模板变量,如果需要在循环出来datepicker可以这么干
mafeifan
2019/02/25
1.9K0
点击加载更多

相似问题

JQuery间歇工作

10

jQuery函数间歇工作

11

JQuery DatePicker不工作

20

jquery - datepicker不工作

33

jQuery DatePicker不工作

20
添加站长 进交流群

领取专属 10元无门槛券

AI混元助手 在线答疑

扫码加入开发者社群
关注 腾讯云开发者公众号

洞察 腾讯核心技术

剖析业界实践案例

扫码关注腾讯云开发者公众号
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档