Anuglar8集成高德地图

@我是一只小菜鸡传送门
Anuglar8集成高德地图github源码
一、自己新建一个angualr项目。emm…新建项目就不用教了吧。

TODO…

二、开始搞事情吧
新建一个组件,命名为map.component.ts,建一个map.component.html
Let`s do it!
在html 代码里撸上二个div
#container 是用于放地图和，#panel 是用于电子围栏

<div id='container' style='width:1200px; height:600px;'></div>
<div id="panel"></div>

如果你要与实际业务结合，那你就自己去后台取数据自己绑吧。

示例代码如下：

//轨迹回放gethistorical() {var marker, lineArr = [[112.54711, 37.794917],[112.544632, 37.796698],[112.543357, 37.801004],[112.544318, 37.801398],[112.545455, 37.802072],[112.548588, 37.802128],[112.548942, 37.803073],[112.549011, 37.803831],[112.549113, 37.806442],[112.549269, 37.807358],[112.551356, 37.807404]];var map = new AMap.Map("container", {resizeEnable: true,center: [112.546925, 37.794941],zoom: 17});marker = new AMap.Marker({map: map,position: [112.547247, 37.794907],icon: "https://webapi.amap.com/images/car.png",offset: new AMap.Pixel(-26, -13),autoRotation: true,angle: -90,});// 绘制轨迹var polyline = new AMap.Polyline({map: map,path: lineArr,showDir: true,strokeColor: "#28F",  //线颜色// strokeOpacity: 1,     //线透明度strokeWeight: 6,      //线宽// strokeStyle: "solid"  //线样式});var passedPolyline = new AMap.Polyline({map: map,// path: lineArr,strokeColor: "#AF5",  //线颜色// strokeOpacity: 1,     //线透明度strokeWeight: 6,      //线宽// strokeStyle: "solid"  //线样式});marker.on('moving', function (e) {passedPolyline.setPath(e.passedPath);});map.setFitView();//开始移动marker.moveAlong(lineArr, 200);//暂停移动// marker.pauseMove();// //继续播放// marker.resumeMove();// //停止播放// marker.stopMove();}//圆getCircle() {//初始化地图对象，加载地图var map = new AMap.Map("container", {resizeEnable: true,});var marker = new AMap.Marker({map: map,icon: "https://webapi.amap.com/theme/v1.3/markers/n/mark_b.png",position: [112.557453, 37.801733]});var lineArr = [[112.55329, 37.801598],[112.553891, 37.80726],[112.561315, 37.804242],[112.557582, 37.801971]];var circle = new AMap.Circle({map: map,center: lineArr[0],          //设置线覆盖物路径radius: 500,strokeColor: "#3366FF", //边框线颜色strokeOpacity: 0.3,       //边框线透明度strokeWeight: 3,        //边框线宽fillColor: "#FFA500", //填充色fillOpacity: 0.35//填充透明度});map.setFitView();}//不规则图形getpolygon() {  //初始化地图对象，加载地图var map = new AMap.Map("container", {resizeEnable: true});var marker = new AMap.Marker({map: map,icon: "https://webapi.amap.com/theme/v1.3/markers/n/mark_b.png",position: [112.571572, 37.789423]});var polygonArr = [[112.567109, 37.79],[112.572645, 37.792916],[112.575048, 37.786642]];var polygon = new AMap.Polygon({map: map,path: polygonArr,//设置多边形边界路径strokeColor: "#FF33FF", //线颜色strokeOpacity: 0.2, //线透明度strokeWeight: 3,    //线宽fillColor: "#1791fc", //填充色fillOpacity: 0.35//填充透明度});map.setFitView();}//起点-终点路线getLine() {var map = new AMap.Map("container", {resizeEnable: true,center: [112.547088, 37.794912],//地图中心点zoom: 13 //地图显示的缩放级别});//构造路线导航类map.plugin(['AMap.Driving'], () => {// 设置地位标记为自定义标let driving = new AMap.Driving({map: map,panel: "panel"});// 根据起终点经纬度规划驾车导航路线driving.search(new AMap.LngLat(112.547088, 37.794912), new AMap.LngLat(112.546982, 37.807023), function (status, result) {// result 即是对应的驾车导航信息，相关数据结构文档请参考  https://lbs.amap.com/api/javascript-api/reference/route-search#m_DrivingResultif (status === 'complete') {console.log('绘制驾车路线完成')} else {console.log('获取驾车数据失败：' + result)}});//  添加插件map.addControl(new driving);});}//获取自己的定位getlocaltion() {// //   实例化一个地图let map = new AMap.Map('container', {resizeEnable: true,});// //  设置我们需要的目标城市// map.setCity("成都"); // 或者输入精度//  自定义一个标识(marker)let customMarker = new AMap.Marker({// 这个是在高德API里面的参考手册的基础类里面// 自定义偏移量offset: new AMap.Pixel(-14, -34), // 使用的是Pixel类// 这个是在高德API里面的参考手册的覆盖物里面//  自定义图标icon: new AMap.Icon({ // 复杂图标类// 设定图标的大小size: new AMap.Size(27, 36),// 图片地址imgae: '//vdata.amap.com/icons/b18/1/2.png',imageOffset: new AMap.Pixel(-28, 0)// 相对于大图的取图位置})});//  添加地图插件：地图工具条map.plugin(['AMap.ToolBar'], () => {// 设置地位标记为自定义标let toolBar = new AMap.ToolBar({locationMarker: customMarker});//  添加插件map.addControl(new toolBar);});//  添加比例尺插件map.plugin(['AMap.Scale'], () => {//   初始化插件let scale = new AMap.Scale();//   加载插件map.addControl(new scale);});//  加载地图实景map.plugin(["AMap.MapType"], () => {let type = new AMap.MapType();map.addControl(type);});// //  加载鹰眼map.plugin(["AMap.OverView"], () => {let view = new AMap.OverView({// 鹰眼是否展示visible: true,// 鹰眼是否展开isOpen: true});map.addControl(view);// 调用方法 显示鹰眼窗口view.show();});// 添加定位map.plugin('AMap.Geolocation', () => {let geolocation = new AMap.Geolocation({enableHighAccuracy: true, // 是否使用高精度定位，默认:truetimeout: 10000,          // 超过10秒后停止定位，默认：无穷大maximumAge: 0,           // 定位结果缓存0毫秒，默认：0convert: true,           // 自动偏移坐标，偏移后的坐标为高德坐标，默认：trueshowButton: true,        // 显示定位按钮，默认：truebuttonPosition: 'LB',    // 定位按钮停靠位置，默认：'LB'，左下角buttonOffset: new AMap.Pixel(10, 20), // 定位按钮与设置的停靠位置的偏移量，默认：Pixel(10, 20)showMarker: true,         //    定位成功后在定位到的位置显示点标记，默认：trueshowCircle: true,        // 定位成功后用圆圈表示定位精度范围，默认：truepanToLocation: true,     // 定位成功后将定位到的位置作为地图中心点，默认：truezoomToAccuracy: true,      // 定位成功后调整地图视野范围使定位位置及精度范围视野内可见，默认：false});// 加载插件map.addControl(geolocation);// 调用方法 获取用户当前的精确位置信息geolocation.getCurrentPosition();//  定时刷新位置geolocation.watchPosition(2);AMap.event.addListener(geolocation, 'complete', (data) => {console.log(data);// var marker = new AMap.Marker({//     icon: '//vdata.amap.com/icons/b18/1/2.png',//     position: data.position,   // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]//     title: data.formattedAddress,// });// // 将创建的点标记添加到已有的地图实例：// map.add(marker);console.log("定位成功");}); //  返回定位信息AMap.event.addListener(geolocation, 'error', () => {console.log("定位失败");});      // 返回定位出错信息});//   获取输入类的let autoOptions = {input: 'tipinput'};//  加载输入类插件map.plugin('AMap.Autocomplete', () => {//  实例化let auto = new AMap.Autocomplete(autoOptions);// 加载插件map.addControl(auto);});// 加载收索类插件map.plugin('AMap.PlaceSearch', () => {//   实例化let placeSearch = new AMap.PlaceSearch({map: map});  // 构造地点查询类//   加载插件map.addControl(placeSearch);//  注册监听事件，当选中某条记录的时候就会触发AMap.event.addListener(new AMap.Autocomplete(autoOptions), "select", (e) => {placeSearch.setCity(e.poi.adcode);placeSearch.search(e.poi.name);  //关键字查询查询});});}

@我是一只小菜鸡
嗯。。不会的还有demo的源码可以直接看到效果。
Anuglar8集成高德地图github源码

Anuglar8集成高德地图相关推荐

Vue中集成高德地图API实现定位与自定义样式信息窗体
场景若依前后端分离版手把手教你本地搭建环境并运行项目: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/108465662 在上面 ...
flutter集成高德地图获取位置
flutter集成高德地图获取位置准备工作在创建安卓应用获取SHA1 获取当前位置添加依赖文件配置 build.gradle文件配置 AndroidManifest.xml配置获取定位准 ...
【QA】集成高德地图SDK闪退问题
集成高德地图SDK闪退问题昨天集成高德地图SDK,地图显示正常,但是点击返回键退出地图的时候,程序闪退,排查发现销毁地图时调用,mapView.onDestroy() 闪退,不调用的话内存溢出,这. ...
Android 集成高德地图
需要完成效果:集成高德地图,实现定位功能,并且实时刷新位置,每25秒自动刷新位置. 布局: <?xml version="1.0" encoding="utf-8& ...
Android一步一步教你集成高德地图
转载请注明出处:http://blog.csdn.net/alpha58/article/details/56488734 前言当项目中需要使用地图SDK的时候, 是选择高德地图还是百度地图呢?从对 ...
Android中集成高德地图SDK实现地图定位和导航功能（二）
我们接着上一篇文章开始继续实现android中集成高德地图的SDK实现地图定位,搜索,导航的功能如何让地图在手机上实现呢? 1.配置AndroidManifest 中的权限申请可以参考官方文档 ...
Android中集成高德地图SDK实现地图定位和导航功能（一）
一.前期准备工作 1.在高德地图开发者平创建一个自己的项目名称和应用类型随便填 2.添加Key 1.添加key 2.获取SHA1值 2.1.使用windwos+R 输入cmd 打开控制窗口输入 w ...
vue集成高德地图后搜索按钮国际化的问题
这里就不详细介绍 vue如何集成高德地图了, 如有问题请参考:https://elemefe.github.io/vue-amap/#/zh-cn/introduction/install 咱先说下 ...
android高德地图后台运行,Android手把手教你集成高德地图
在上一篇博客上,和大家分享了如何在Android中集成高德定位以及定位的基本使用.今天我们就来看看高德地图在Android中如何使用吧. 同样,我将本篇博客的内容分为如下部分: (1)添加高德SDK ...

Anuglar8集成高德地图

Anuglar8集成高德地图

Anuglar8集成高德地图相关推荐

最新文章

热门文章