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