个人源博客地址:点击打开链接
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