Angular Ionic 引入第三方 jQuery,高德地图

个人源博客地址:点击打开链接

 

JQuery

方法一:

在 index.html 里引入

<scriptsrc="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>

然后在对应的TS里写代码,即可正常使用

declare var $:any;

 

方法二:

和方法一方式不同的是引入方式不同,区别在用到的TS里 import 。

import "assets/jquery-3.3.1.min.js";  

方法三:

也是引入方式不同,在 .angular-cli.json 文件中加入。

"scripts": ["assets/jquery-3.3.1.min.js"]

 

高德地图

开发文档:http://lbs.amap.com/api/javascript-api/summary

首先在 index.html 引入 

<scripttype="text/javascript"src="http://webapi.amap.com/maps?v=1.4.6&key=你的KEY"></script>

然后 html 和 css 中写入样式

<divid="container"></div>

 

#container {

width:100%;

height:100%;

}

下面是 载入地图 和 标点 和 标点拖拽事件 以及 标点点击事件的示例。

import{Component}from'@angular/core';

import{NavController}from'ionic-angular';

    

declarevarAMap;

@Component({

  selector:'page-home',

  templateUrl:'home.html'

})

    

exportclassHomePage {

    

public map:any;

    

constructor(public navCtrl:NavController) {

    

  }

ionViewDidLoad() {

this.loadMap();

this.marker(116.480983,39.989628);

  }

    

// 加载地图   http://lbs.amap.com/api/javascript-api/reference/location/

loadMap() {

this.map=newAMap.Map('container', {

        resizeEnable:true,

        zoom:16,

        center: [116.39,39.9]

      });

var _that =this;

var geolocation:any;

AMap.plugin(['AMap.Geolocation','AMap.ToolBar'],function(){

              geolocation =newAMap.Geolocation({

                enableHighAccuracy:true,//是否使用高精度定位,默认:true

                timeout:10000,          //超过10秒后停止定位,默认:无穷大

                maximumAge:0,           //定位结果缓存0毫秒,默认:0

                convert:true,           //自动偏移坐标,偏移后的坐标为高德坐标,默认:true

                showButton:true,        //显示定位按钮,默认:true

                buttonPosition:'LB',    //定位按钮停靠位置,默认:'LB',左下角

                buttonOffset:newAMap.Pixel(10, 20),//定位按钮与设置的停靠位置的偏移量,默认:Pixel(10, 20)

                showMarker:true,        //定位成功后在定位到的位置显示点标记,默认:true

                showCircle:true,        //定位成功后用圆圈表示定位精度范围,默认:true

                panToLocation:true,     //定位成功后将定位到的位置作为地图中心点,默认:true

                zoomToAccuracy:true//定位成功后调整地图视野范围使定位位置及精度范围视野内可见,默认:false

            });

_that.map.addControl(geolocation);

geolocation.getCurrentPosition();

AMap.event.addListener(geolocation, 'complete', _that.geoOnComplete);//返回定位信息

AMap.event.addListener(geolocation, 'error', _that.geoOnError);      //返回定位出错信息

_that.map.addControl(newAMap.ToolBar());

      });

  }

    

// 定位更新成功

geoOnComplete(e){

console.log(e)

  }

    

// 定位更新失败

geoOnError(e){

console.log(e)

  }

    

// 标点  http://lbs.amap.com/api/javascript-api/guide/draw-on-map/marker-point

marker(lng:any, lat:any){

var _that =this;

var marker =newAMap.Marker({

        position: [lng, lat],//marker所在的位置

        map:_that.map, //创建时直接赋予map属性

        clickable:true,

// draggable:true, // 是否可以拖拽

    });

marker.setMap(_that.map);                 // 绘制地图

marker.setExtData({hello:'123'});         // 设置数据

    

// 设置点击事件

AMap.event.addListener(marker, "click", function(e){

console.log(marker.getExtData());       // 获取数据

returntrue;

    }); 

    

// 设置拖拽事件 draggable属性为true

// AMap.event.addListener(marker, "dragging", function(e){

//   console.log(e);

//   return true;

// }); 

  }

    

}

安装定位插件

cordova plugin add cordova-plugin-geolocation

安装了插件生成安装包会有申请GPS权限,如果定位超时或失败,就到室外会定位成功。 也可以换成 native 原生的定位,下面是参考文章。

https://segmentfault.com/a/1190000014720362?utm_source=tag-newest

https://blog.csdn.net/a1_a1_a/article/details/80164040

  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值