基于JS 高德地图设置设备图标

前言：最近做项目客户提了一个需求，就是要在高德地图上将设备用图标显示出来，并且可以移动设备来更改设备经纬度。
第一时间我就去查高德地图，结果发现高德地图的jsapi文档好坑，有一些功能藏在示例里面。搞得我烦死了，于是决定将这次的经历写下来与大家分享。

功能需求：

高德地图卫星地图与基础图层切换；
根据不同设备批量生成不同点标注显示于地图上；
点标注与信息窗口
拖拽点坐标，并且在拖拽完成后更新设备经纬度；

功能实现

图层切换

图层切换这一功能高德的开发文档已经介绍的很详细。

layerCtrl = new BasicControl.LayerSwitcher({//  控件位置position: {top:'8%',right:'26%',},theme: 'dark',//高德基础图层      enable: true：默认开启baseLayers: [{enable: true,id: 'tile',name: '图层A',layer: new AMap.TileLayer(),}, {enable: true,id: 'satellite',name: '图层B',layer: new AMap.TileLayer.Satellite(),}],//自定义覆盖图层overlayLayers: [{id: 'traffic',name: '图层C',layer: new AMap.TileLayer.Traffic()}, {enable: true,id: 'roadNet',name: '图层D',layer: new AMap.TileLayer.RoadNet()}]});

创建点标注

点标注创建

var marker = new AMap.Marker({position: new AMap.LngLat(vm.lng, vm.lat),offset: new AMap.Pixel(-10, -10),icon: '../statics/img/svg/dw.svg', // 添加 Icon 图标 URLtitle: name,map:map});

创建信息窗口

 //在指定位置打开信息窗体var info = [];info.push("<div style=\"padding:7px 0px 0px 0px;\"><h4>位置信息</h4>");info.push("<p class='input-item'>name</p>");info.push("<p class='input-item'>address</p></div></div>");var oneInfo = new AMap.InfoWindow({content: info.join("")  //使用默认信息窗体框样式，显示信息内容});//鼠标点击marker弹出自定义的信息窗体marker.on('click', function () {oneInfo.open(map, marker.getPosition());});

批量添加Marker和InfoWindow

var Markers=[];
var infoWindow = new AMap.InfoWindow({offset: new AMap.Pixel(0, 0)});
function saveMarker(lnglat, id, type, devName) {var iconImg = '';if(type == 'arrest'){iconImg = 'arrestDev.svg';}else if(type == 'video'){iconImg = 'svg';}else if(type == 'carDev'){iconImg = 'carDev.svg';}else {iconImg = 'doorDev.svg';}// 信息窗体var devMarker = new AMap.Marker({position: lnglat,icon: iconImg ,// 信息锚点anchor:'top-center',// 偏移量offset: new AMap.Pixel(0, 0),// 设置是否可以拖拽  pointer / movedraggable: false,cursor: 'pointer',map:map});devMarker.id = id;devMarker.type = type;devMarker.content = name;// 点击事件devMarker.on('click', markerClick);devMarker.emit('click', {target: devMarker});// 拖拽事件devMarker.on('dragend', function(e) {console.log('MarkerArrest坐标:'+ e.lnglat.getLng() + ',' + e.lnglat.getLat())console.log("WWW:"+e.target.id);console.log("WWW:"+e.target.type);updateDragendMarker(e.lnglat.getLng(), e.lnglat.getLat(), e.target.id, e.target.type);});map.add(devMarker);// 自适应缩放Markers.push(devMarker);
}
// 信息窗体事件
function markerClick(e) {infoWindow.setContent(e.target.content);infoWindow.open(map, e.target.getPosition());
}

拖拽事件

devMarker.on('dragend', function(e) {console.log('MarkerArrest坐标:'+ e.lnglat.getLng() + ',' + e.lnglat.getLat())updateDragendMarker(e.lnglat.getLng(), e.lnglat.getLat());});

基于JS 高德地图设置设备图标相关推荐

高德地图html js开发例子,vue.js高德地图实现热点图代码实例
1.在index.html引入高德地图JSAPI 2.地图dom 3.js实现 export default { data() {}, methods:{ initMap(){ let map = n ...
AMap JS 高德地图，修改渲染图层层级
AMap高德地图,修改渲染图层层级问题官网方法手动方法更改层级演示最后问题前端使用 AMap JS 高德地图时,覆盖物绘制线条(AMap.Polyline),会覆盖住下方的路段名称,路段 ...
前端vue js 高德地图实现雷达扫描加载，借鉴百度地图等方法，采用Canvas解决雷达背景透明度问题，解决Canvas动态指针扫描造成浏览器卡顿问题
前端vue js 高德地图实现雷达扫描加载,借鉴百度地图等方法,采用Canvas解决雷达背景透明度问题,解决Canvas动态指针扫描造成浏览器卡顿问题经过3天的尝试,借鉴了好几个博客的思路,开发了一 ...
js 调用android定位,基于html5+ 高德地图JS API使用安卓定位sdk用来进行定位
使用Native.js打开Android的H5辅助定位 mui.plusReady(function() { if(plus.os.name == 'Android') { var AMapLocat ...
微信小程序使用高德地图实现标点图标修改
微信小程序引入高德地图高德地图开放平台根据入门指南完成前五步后建议在app.js中引入 amap-wx.js 并初始化高德地图 app.json // 引入路径根据自己文件所在位置引入 v ...
android 高德地图设置不能旋转_地图经常导航错误，盘点高德、百度、腾讯、搜狗地图哪家强？...
出门在外,经常去不熟路的情况下,什么手机导航最精准,或者哪个地图软件更好用?也经常出现导航错误,盘点看看哪家导航强. 很多新手或者老司机,开车都需要用到导航.但是根据车的配置,有些车没有自带导航功能, ...
vue.js高德地图实现热点图
1.在index.html引入高德地图JSAPI <script src="https://webapi.amap.com/maps?v=1.3&key=xxx"&g ...
高德地图各种摄像头图标_高德地图Overlay的应用以及照相功能的实现
暑假第二十一天,今天天气有点小热,长时间对着电脑眼睛还真有点不适应,下午刚刚出地下室吃饭的时候,两眼眺望了一下远方,就感觉小有压力,眼睛和头都有点不舒服,哎!程序员真苦逼啊!!!伤不起的还是我们这群程 ...
js+高德地图api实现地理定位
需求:使用高德地图进行签到思路:使用高德地图获取当前定位,比对与目标定位点距离,根据距离值判断是否定位成功创建api_key 高德地图官方地址点击报到按钮,显示地图信息列表,若在报到范围内,可以 ...

基于JS 高德地图设置设备图标

功能需求：

功能实现

图层切换

创建点标注

创建信息窗口

批量添加Marker和InfoWindow

基于JS 高德地图设置设备图标相关推荐

最新文章

热门文章