2000字范文,分享全网优秀范文,学习好帮手!
2000字范文 > Angular Ionic 引入第三方 jQuery 高德地图

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

时间:2019-04-06 08:04:05

相关推荐

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

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

JQuery

方法一:

在 index.html 里引入

<scriptsrc="/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"]

高德地图

开发文档:/api/javascript-api/summary

首先在 index.html 引入

<scripttype="text/javascript"src="/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);

}

//加载地图 /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)

}

//标点 /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 原生的定位,下面是参考文章。

/a/1190000014720362?utm_source=tag-newest

/a1_a1_a/article/details/80164040

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。