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