高德地图 自定义marker+信息窗口
先上效果图
首先在index.html引入高德地图,你的key。其中plugin后面拼接是是所依赖的插件。版本不同,有些写发也不同,望注意;这里我使用2.0版本。
<script src="https://webapi.amap.com/maps?v=2.0&key= yourKey &plugin=AMap.MarkerClusterer&plugin=AMap.Autocomplete"></script>
一个盒子,定义宽高。
<div id="container"></div>
地图初始化,mapstyle我使用的是内置的暗黑主题,如有需要,可去高德文档查找别的类型。
由于怕一下全部渲染地图上的所有marker点数据多,这里逻辑是,只渲染视图上地图的marker点。
前后端配合,前端传maxLng, minLng, maxLat, minLat给后端,后端返回应该渲染的数据;
build_map_online() { //初始化地图let map = new AMap.Map("container", {resizeEnable: true, //是否监控地图容器尺寸变化mapStyle: "amap://styles/darkblue",zoom: 12,//缩放程度})map.on("zoomend", (e)=> {//监听地图缩放this.markers_init(map);});map.on("dragend", (e)=> {//监听地图拖曳this.markers_init(map);});this.map = map;}
注意:其中图片路径我是放在public目录下,建了一个image文件夹放图片;
markers_init(map) {map.clearMap(); // 清除地图上所有添加的覆盖物let limitBounds = map.getBounds();let maxLng = limitBounds.northEast.lng;let minLng = limitBounds.southWest.lng;let maxLat = limitBounds.northEast.lat;let minLat = limitBounds.southWest.lat;maxMap(maxLng, minLng, maxLat, minLat, this.menuList).then(res=>{//获取地图视图 极值if(res.resp_code == 1){let arr = []res.datas.forEach(item=>{let point = new AMap.LngLat(+item.lng,+item.lat);//iconfont类是配合阿里图标库一起使用,避免多个pic,造成打包过大;//this.$myfun.get_color()自定义方法,return色号,实现渐变色效果let markerContent = `<div class="dx-marker iconfont" style="border-color: ${this.$myfun.get_color(0)};background-image:linear-gradient(to right,${this.$myfun.get_color(0,.8)},${this.$myfun.get_color(0,.3)});">${this.$myfun.get_icon(item.device_type)}</div>`let marker = new AMap.Marker({position:point,offset: new AMap.Pixel(-13, -30),content: markerContent,//自定义marker内容})map.add(marker);//接下来是marker的点击事件,点击展示 自定义信息窗口;marker.on('click',()=>{infoWindow.open(map, marker.getPosition());})map.on("click", ()=> {infoWindow && infoWindow.close();});//这里业务需要,根据状态,点击展示不同的信息框,背景图/高度/内容 有差异,所有提取出来。//仅供参考let backPicUrl = '';let backPicHeight= '200px';let closePic = '';let lineHeight = "26px"backPicUrl = './image/dialog-Blue.png';closePic = './image/close-Blue.png';let content = [];let title = ''content.push(`<div style="font-size: 14px;color: #fff;height:${backPicHeight};padding:15px;line-height:${lineHeight};background: url(${backPicUrl});background-size: 100%;position:relative;"><img src="${closePic}" class="closeLogo" οnclick="closeInfoWindow()"></img><div>产品类型:${item.device_type}</div><div>产品序号:${item.device_qrcode}</div><div ${ item.status!=1 ? 'class="hidden"' : 'class="text-yellow"' } >故障原因:低电压</div><div ${ item.status!=2 ? 'class="hidden"' : 'class="text-red"' } >报警原因:测试测试</div><div ${ item.status!=2 ? 'class="hidden"' : '' } >负责人:丁贤 12348174501</div><div>安装位置:${item.installocation}</div><div>详细地址:${item.address}</div><div ${ item.status==2 ? 'class="hidden"' : 'class="dx-detail"' } >点击查看详情 </div><div ${ item.status!=2 ? 'class="hidden"' : '' }><div class="infoWindow-btn">按钮</div><div class="infoWindow-btn">按钮</div><div class="infoWindow-btn">按钮</div><div class="infoWindow-btn">按钮</div></div></div>`)var infoWindow = new AMap.InfoWindow({isCustom: true, //使用自定义窗体content: this.createInfoWindow(content,closePic),offset: new AMap.Pixel(12, -30)})this.map = map;})}})},
然后是createInfoWindow函数,创造信息窗口;
createInfoWindow(content,closePicSrc){let info = document.createElement("div");info.style.width = "300px";//宽度设置let middle = document.createElement("div");// 定义中部内容middle.innerHTML = content;info.appendChild(middle);return info}
高德地图 自定义marker+信息窗口相关推荐
- 高德地图自定义Marker
1.添加Marker 的方法 // 添加多边形的边界点markerprivate void addPolygonMarker(LatLng latlng) { // markerOption.posi ...
- 高德地图 自定义marker
function AddPoint (arr) {let index = 1 + markerList.length // 序号var content = '<div class="m ...
- 首次高德地图自定义marker并清除marker,都是借鉴各位前辈的代码,然后融合了好多案例,感谢各位前辈
import * as THREE from 'three' // 第二步:初始化地图+数据获取更新 import AMapLoader from '@amap/amap-jsapi-loader' ...
- 七、vue项目使用高德地图自定义marker图标
效果如图 主要代码 data() {return {marker: "",markers: [{position: [118.791545, 31.9624],id: 1,icon ...
- android高德地图marker图标,高德地图自定义Marker显示文字
方法一: 调用: Marker localMarker=mAMap.addMarker(new MarkerOptions() .position(localLatLng) //.icon(Bitma ...
- 高德地图自定义Marker显示文字
方法一: 调用: Marker localMarker=mAMap.addMarker(new MarkerOptions() .position(localLatLng) //.icon(Bitma ...
- Android高德地图自定义Markers的例子
下文为各位重点介绍关于Android高德地图自定义Markers的例子,希望这篇文章能够让各位理解到Android高德地图自定义Markers的方法. 之前的博客里说了地图的嵌入和定位,今天就说说在地 ...
- Android 高德地图自定义线路规划选择方案之后按照方案进行导航
Android 高德地图自定义线路规划选择方案之后按照方案进行导航 因为我这边导航需求的问题,导致我这边不能使用高德地图官方的线路规划和导航.所以我这边线路规划和导航界面都是根据高德地图那边给的api ...
- vue框架中使用高德地图自定义icon问题
** vue框架中使用高德地图自定义icon问题 ** vue框架中使用高德地图自定义icon,在编译时,因为图片会有封装问题等,但是在高德地图中没有转化对应的路径,在最后结果中会出现找不到图标的问题 ...
最新文章
- Tian Ji -- The Horse Racing
- linux 线程操作问题undefined reference to ‘pthread_create‘的解决办法(cmake)
- 脚本事件中心与事件订阅器
- Netflix媒体数据库:媒体时间线数据模型
- Andorid之提示java.lang.RuntimeException: Unable to start service net.gotev.uploadservice.UploadService@
- 有源蜂鸣器和无源蜂鸣器的区别_电磁式蜂鸣器和压电式蜂鸣器的区别以及驱动方法...
- Hybrid App技术批量制作APP应用与跨平台解决方案
- b2c京东流程图_京东商城的商业模式及其运作流程(精)
- 驾考一点通维语版_驾校一点通维语版2019下载_驾校一点通维语版下载 v7.6.1 - 87G手游网...
- 降噪和变声的几个常用软件简单整理
- UG二次开发-程序视图根组
- 前端自学驿站:【建议收藏】css晦涩难懂的点都在这啦
- gis等高线注记掩膜
- 用d2rq转换MySQL为RDF数据
- hdu 1524 A Chess Game 博弈
- 【LeetCode】LCP 17. 速算机器人(C++)
- 获取VM中win10虚拟机映像
- 用FPGA实现尼康绝对值编码器的数据读取
- 奥特曼系列赛文飞踢是哪个服务器,昭和系6大奥特曼的“奥特飞踢”,泰罗的很敏捷,雷欧伤害最高!...
- 马云与史玉柱经典语录