精华内容
下载资源
问答
  • infoWindow
    2020-12-18 14:38:57
    1.从后台获取数据后,循环时对每个要素进行属性设置;
    hexfeature.setAttributes( {"XCoord":111,"YCoord":222,"Plant":"Mesa Mint"});
    2.将要素添加到要素图层上,当点击要素图层时,响应点击事件,点击后弹出弹出框;
    var showInfowindow= hexlayer.on("click",addInfo);
     function addInfo(evt){
            var attributes=evt.graphic.attributes;
                    map.infoWindow.setTitle("Coordinates");
                    map.infoWindow.setContent(
                        '<div style="background-color:lightblue;color:white;">' +
                      "XCoord : " +attributes.XCoord +'</div>'
                    );
                    map.infoWindow.show(evt.mapPoint, map.getInfoWindowAnchor(evt.screenPoint));
                };
    3.隐藏弹出框;
    map.infoWindow.hide();
    4.解除弹出框绑定事件;
    showInfowindow.remove();

     

    更多相关内容
  • InfoWindow

    2017-06-28 14:47:39
    自定义arcgis api for javascript窗口的样式
  • 可以在地图上显示多个InfoWindow框架 这个框架可以在地图上的marker上显示多个infoWindow(高德默认只能同时显示一个infoWindow) 效果图如下: 使用 !!!!! 请在使用前 将高德地图的sdk加到工程中 allprojects { ...
  • 下面小编就为大家带来一篇arcgis for js 修改infowindow样式的方法。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
  • arcgis 自定义infowindow

    2018-08-28 09:42:51
    自定义的infowindow,想弹几个弹几个,不受约束,源码支持修改
  • 高德地图自定义infowindow,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,
  • 百度InfoWindow实现的demo有详细注释,看不懂代码可以下载这个demo自己调试
  • 百度地图上展示多个marker的同时,能展示多个infowindow,避免只有最后一个infowindow能展示的问题。 博客地址:http://blog.csdn.net/qq_19666821/article/details/70195267
  • arcgis javascript中自定义infowindow实现,包含infowindow.js和infowindow.css和一个测试用的html页面,通过继承InfoWindowBase来实现
  • 无法在infowindow里面添加的div进行绑定事件处理,官方的API,发现了google.maps.InfoWindow下面的Events里面有个domready事件
  • 示范使用SuperMap iClient 6R for Flex开发模式,通过设置InfoWindow 类的各种Styles属性,自定义信息窗InfoWindow样式。
  • 百度地图V3.6.0系列——覆盖物和InfoWindow的使用
  • 代码为博客实例代码:http://blog.csdn.net/lmj623565791/article/details/37737213 有问题请博客中留言
  • 百度地图API——修改infowindow样式

    千次阅读 2022-02-23 10:28:15
    前言 最近又用到了百度地图api,之前用到的是百度地图...用到了的覆盖物较多,信息窗体infowindow——直角边框加白底黑字,那么的 普通 ,肯定要修改一下,可是封装好的vue组件也不支持直接给style换底色和圆角,参阅其

    前言

    最近又用到了百度地图api,之前用到的是百度地图js api的写法,需要一个个定义对象,添加事件或者监控,最后画到地图上,时不时还有渲染时序不对的情况,非常的不友好。所以这次用了vue Baidu Map,基于百度地图 JS API 开发的开源库的封装,减少了代码量,虽然文档部分封装和说明文档不是友好,但交互性相比之前的好多了。
    用到了的覆盖物较多,信息窗体infowindow——直角边框加白底黑字,那么的 普通 ,肯定要修改一下,可是封装好的vue组件也不支持直接给style换底色和圆角,参阅其他文章的学习与不断调试后,最终效果如下所示,算是达到预期,大概也归结了两种方法。
    在这里插入图片描述
    在这里插入图片描述

    在原来基础上修改CSS样式

    总的来说就是修改这个窗体的风格样式,新样式加 !important 覆盖掉旧样式。
    想法不错,但这个窗体写的属实有点复杂了,通过审查解析窗体结构,发现官方的信息窗口内部是由9个div组成的!分别是左上小正方体(1),上顶部(2),右上小正方体(3),中间主体内容部分(4),左下小正方体(5),下底部(6),右下小正方体(7),回到主体部分的一个div(8),最下面指向点的箭头(9)。而且官方没有给它们绑定任何的类名或id。所以我们找到它们的父级标签使用序选择器,直接修改。
    还有一点不得不提,我本以为最下方的箭头是用css画成的箭头,结果居然是张图片,没办法,只能把原图下方原有的箭头替换一下颜色,然后代替一下原图片。
    在这里插入图片描述
    主要的css风格代码如下:

    <style>
    
    /*地图标题 infoWindow*/
    .BMap_bubble_title{
      color:#fff;
      font-size:18px;
      /*font-weight: bold;*/
      text-align:left;
      background:transparent !important;
    }
    
    .BMap_pop .BMap_top{
      background:#3F4358 !important;
      border:0 !important;
    }
    .BMap_pop .BMap_center{
      width:251px !important;
      border:0 !important;
      background:#3F4358 !important;
    }
    .BMap_pop .BMap_bottom{
      border:0 !important;
      background:#3F4358 !important;
    }
    
    .BMap_pop div:nth-child(3){
      background:transparent !important;
    }
    .BMap_pop div:nth-child(3) div{
      border-radius:7px;
      background:#3F4358 !important;
      border:0 !important;
    }
    .BMap_pop div:nth-child(1){
      border-radius:7px 0 0 0;
      background:transparent !important;
      border:0 !important;
    }
    .BMap_pop div:nth-child(1) div{
      background:#3F4358 !important;
    }
    .BMap_pop div:nth-child(5){
      border-radius:0 0 0 7px;
      background:transparent !important;
      border:0 !important;
    }
    .BMap_pop div:nth-child(5) div{
      border-radius:7px;
      background:#3F4358 !important;
    }
    .BMap_pop div:nth-child(7){
      background:transparent !important;
    }
    .BMap_pop div:nth-child(7) div{
      border-radius:7px;
      background:#3F4358 !important;
    }
    
    .BMap_pop div:nth-child(8) div{
      /*border-radius:7px;*/
      background:#3F4358 !important;
    }
    /*窗体阴影*/
    .BMap_shadow div:nth-child(5) img{
      margin-left: -1100px !important;
    }
    
    .BMap_shadow div:nth-child(4){
      width: 262px !important;
    }
    
    /*下面箭头替换为自己本地修改过的*/
    img[src="http://api0.map.bdimg.com/images/iw3.png"] {
      content: url('../img/Screen/arrow.png');
    }
    img[src="https://api.map.baidu.com/images/iw3.png"] {
      margin-top: -692px !important;
      filter: alpha(opacity=70);
      content: url('../img/Screen/arrow.png');
    }
    </style>
    

    在窗体内容部分写的就比较随意了,调到了一个合适的宽度(阴影也不会出现重叠或者缺色)后,避免里面内容太长而导致窗体变形,在bm-info-window下所有的div都规定了一个宽度。

     <bm-info-window  title="工单详情" :position="{lng: point.lng, lat: point.lat}"  :show="point.showFlag" @close="infoWindowClose(point)" @open="infoWindowOpen(point)">
    
    	<div style="color:#fff;font-size:16px;">
    	   <div style="margin-top:5px;height: 2px; width:100%;background-color: #1981E1 !important;"></div>
    	
    	   <div style="margin-top:10px;width:220px">  异常区域:{{ point.regionName }}</div>
    	   <div style="margin-top:5px;width:220px">  详细地址:{{ point.location }}</div>
    	   <div style="margin-top:5px;width:220px">  严重程度:{{ point.severity }}</div>
    	   <div style="margin-top:5px;width:220px">  上报人:{{ point.reporterName }}</div>
    	   <div style="margin-top:5px;width:220px">  联系方式:{{ point.reporterPhone }}</div>
    	   <div style="margin-top:5px;width:220px">  指派人:{{ point.orderPeopleStr }}</div>
    	   <div style="margin-top:5px;width:220px">  故障开始时间:{{ point.repairStartTime }}</div>
    	   <div style="margin-top:5px;width:220px">  详细信息:{{ point.information }}</div>
    	 </div>
    	
    </bm-info-window>
    

    重写自定义覆盖物

    如果觉得改原有的样式太过繁琐的话,重写一个新的自定义覆盖物可能是个比较好的选择。我正好需要一个窗体展示简略信息,效果如下:
    在这里插入图片描述
    可以参考官方的教程https://dafrok.github.io/vue-baidu-map/#/zh/overlay/overlay,官方的推荐写法是二次封装成组件,这里我就不得不吐槽一下,封装的好一点不就可以不用二次封装了吗。首先是这个属性和事件都这么点,好歹能传个坐标啊;其次是覆盖物position 属性必须得用 “position: absolute;” ,不然会在最左上角放置覆盖物/汗
    在这里插入图片描述

    剩下的就比较简单了,在bm-overlay下加各种div,然后定义成自己想要的风格即可。

    总结

    确实,开源组件啥的自由度还是差些,想要达到自己的要求,还是得慢慢磨,好好看官方文档,不知道会被莫名其妙的bug卡住。
    春节后的第一篇完成liao
    在这里插入图片描述

    展开全文
  • // 设置label markerMC.setLabel({ offset: new AMap.Pixel(20, -10), content: 'label内容' }) // 可配合marker点击方法传入相关参数 function markerClickMC(e) { var infoWindowMenci = new AMap.InfoWindow({ is...
    
    // 创建一个marker 在地图上显示
                  var markerMC = new AMap.Marker({
                    icon: '',//图标
                    title:'',//标题
                    position: ['经度','纬度'],
                    map: map
                  });
                  markerMC.content = `自定义marker内容`;
                  markerMC.on('click', markerClickMC);//点击marker点调用方法
                  // markerMC.emit('click', {   : markerMC });默认点击
    
    // 设置label
                  markerMC.setLabel({
                      offset: new AMap.Pixel(20, -10),
                      content: 'label内容'
                    })
    
    
    
    // 可配合marker点击方法传入相关参数
        function markerClickMC(e) {
          var infoWindowMenci = new AMap.InfoWindow({
            isCustom: true,//启用自定义窗体
            content: InfoWindowMC(e.target.content),//调用窗体方法 传入html字符串
            offset: new AMap.Pixel(0, -30)//信息窗偏移
          });
          // 设置了infowindows content就不能显示自定义信息窗体?
          // infoWindowMenci.setContent(e.target.content);
          infoWindowMenci.open(map, e.target.getPosition());//打开信息窗
        }
    
    
    
    //构建自定义信息窗体
    function InfoWindowMC(cont) {
      // cont自定义内容 html字符串
      var info = document.createElement("div");
        info.className = "custom-info input-card content-window-card";
    
        //可以通过下面的方式修改自定义窗体的宽高
        //info.style.width = "400px";
        // 定义顶部标题
        var top = document.createElement("div");
        var titleD = document.createElement("div");
        var closeX = document.createElement("img");
        top.className = "info-top";
        // titleD.innerHTML = title;
        closeX.src = "https://webapi.amap.com/images/close2.gif";
        closeX.style.float='right'
        closeX.onclick = closeInfoWindow;
    
        top.appendChild(titleD);
        top.appendChild(closeX);
        info.appendChild(top);
    
        // 定义中部内容
        var middle = document.createElement("div");
        middle.className = "info-middle";
        middle.style.backgroundColor = '';
        middle.innerHTML = cont;
        info.appendChild(middle);
    
        // 定义底部内容
        var bottom = document.createElement("div");
        bottom.className = "info-bottom";
        bottom.style.position = 'relative';
        bottom.style.top = '0px';
        bottom.style.margin = '0 auto';
        var sharp = document.createElement("img");
        sharp.src = "";
        bottom.appendChild(sharp);
        info.appendChild(bottom);
        return info;
    }

    // 点击关闭信息窗体
    function closeInfoWindow() {
        map.clearInfoWindow();
    }

    展开全文
  • 百度地图自动循环打开infoWindow信息窗口 需求是打开地图时自动循环打开信息窗口并且可以手动点击打开窗口,关闭手动选择的窗口后继续循环打开信息窗口,效果如下

    百度地图自动循环打开infoWindow信息窗口

    需求是打开地图时自动循环打开信息窗口并且可以手动点击打开窗口,关闭手动选择的窗口后继续循环打开信息窗口,效果如下
    在这里插入图片描述代码如下

    <!--定时任务-->
            var infoWindows = new Array();//InfoWindow数组
            var coords = new Array();//coord数组
            var clickInfoWindow;//当前点击的InfoWindow
            var interval = setInterval(open, 3000);
    
            <!--打开信息窗口-->
            var i = 0;
            function open() {
                if (!infoWindows[i].isOpen()) {
                    map.openInfoWindow(infoWindows[i], coords[i]); //自动开启信息窗口
                }
                if (i == infoWindows.length - 1) {
                    i = 0;
                } else {
                    i++;
                }
            };
    
            <!--监测信息窗口关闭-->
            function func() {
                if (clickInfoWindow.isOpen()==false){
                    clearInterval(interval);//停止监测窗口
                    interval = setInterval(open, 3000);//自动开启信息窗口
                }
            };
    
            <!--获取站点信息-->
            function zhandian() {
                $.ajax({
                    type: "POST",
                    url: "../api/zhandian.json",
                    success: function (res) {
                        var data = res.data;
    
                        for (var i = 0; i < data.length; i++) {
                            let coord = new BMapGL.Point(data[i].longitude, data[i].latitude);
                            coords[i] = coord;
                            let marker = new BMapGL.Marker(coord);  // 创建标注
                            map.addOverlay(marker);              // 将标注添加到地图中
                            let opts = {
                                width: 100,     // 信息窗口宽度
                                height: 50,     // 信息窗口高度
                                title: data[i].name, // 信息窗口标题
                            }
                            let infoWindow = new BMapGL.InfoWindow("地址:" + data[i].location + "<br>联系电话:" + data[i].phone, opts);  // 创建信息窗口对象
                            infoWindows[i] = infoWindow;
                            marker.addEventListener("click", function () {
                                map.openInfoWindow(infoWindow, coord); //开启信息窗口
                                clearInterval(interval);//停止自动开启信息窗口
                                clickInfoWindow=infoWindow;
                                interval = setInterval(func, 1000);//监测信息窗口是否关闭
                            });
                        }
                    }, error: function () {
                        layer.msg("获取数据失败");
                    }
                });
            };
    
    展开全文
  • let infoWindow = new AMap.InfoWindow({ //挂载的组件 content: this.$refs.infoWindow.$el, }); infoWindow.open(this.map, e.target.getPosition()); }, 2.引入弹窗组件。 3.弹窗组件接收markerData 再赋值就好...
  • 前言:最近要实现在多个marker上添加分别添加InfoWindow并同时显示,效果如下图,可是使用高德提供的InfoWindow只是在点击某个marker显示当前的InfoWindow无法同时显示。 通过自定义marker的icon实现,具体代码如下...
  • this.infoWindow = new AMap.InfoWindow({ offset: new AMap.Pixel(0, -30), }); this.map.clearMap(); }, billList() { getMap().then((res) => { if (res.data.code == 200) { let vlastLocation = res.data.data...
  • 几步实现高德地图自定义InfoWindow

    千次阅读 2018-06-20 17:24:18
    高德的地图显示,定位,再到根据后台给你的经纬度在地图上标记Marker,以及Marker的点击事件,以及Marker的InfoWindow,还有导航等 都有,这篇文章主要是讲InfoWindow的。 我会贴出全部代码 ,供大家参考。 先看效果...
  • 接下来就看看地图上的功能是如何实现的:实现的方式编写自定义的infowindow一,书写布局样式(自定义随意写)android:layout_width="match_parent"android:layout_height="match_parent"android:background="@drawab.....
  • " 自定义内容" // 自定义提示框内容 this.markerTip = new AMap.InfoWindow({ // 提示插件 position: new AMap.LngLat(item.lon, item.lat), // 经纬度 content: markerTipContent, offset: new AMap.Pixel(2, -6) /...
  • <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8">...meta content="width=device-width,initial-scale=1.0,maxi...
  • var content = ` 车牌号: {{item.chepaihao}} 所属客户: {{item.kehu}} 设备时间: {{item.shijian}} 状态: {{item.zhuangtai}} 位置: {{item.weizhi}}` var infoWindow = new BMap....
  • 学习笔记,方便以后查阅。解决上一篇留下的问题。拖拽图钉,弹出交互信息窗口。读取和使用交互窗口中的控件。
  • }, getInfoWindow(item) { let infoWindow = new T.InfoWindow(); let content = ` 站点信息 站点名: ${item.title} 经度: ${Math.round(item.lon * 100) / 100} 纬度: ${Math.round(item.lat * 100) / 100} ...
  • 在使用高德地图做地图相关开发时,经常会使用到标记点marker功能,如果业务较复杂,标记点需要增加自定义的信息窗口infoWindow,自定义信息窗口支持传入content参数,content 可以是 dom 对象,也可以是 html 识别的...
  • 高德 InfoWindow解决2.0版本无法滚动问题
  • vue给InfoWindow添加按钮绑定事件

    千次阅读 2019-09-20 17:40:37
    info[i] = new BMap.InfoWindow(content) info[i].addEventListener("click", function() { this.buttonClick(device.id) }); marker[i].addEventListener('click', function() { this.openInfoWindow(info[i]...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 7,666
精华内容 3,066
关键字:

infoWindow