精华内容
下载资源
问答
  • 高德地图infowindow
    2021-09-10 14:48:10
    
    // 创建一个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();
    }

    更多相关内容
  • // 将markers添加到地图实例 this.map.add(this.markers); }); }, // 设置info弹窗 setInfoWindow(e) { //console.log(e); //this.markerData 是我在data()中定义的,用来给子组件传值 this.markerData = e.target....

     效果展示:

    1.先遍历好marker,为marker添加markerData 属性,用于给组件传值。

    点击marker的时候,调用setInfoWindow() 

      initMarker() {
          this.markers = [];
            //本地模拟的数据
          this.axios.get("/device.json").then((res) => {
            let list = res.data;
            list.map((data) => {
              var content;
             //这个是自定义的marker样式,由于有3种状态,所以写了3种。
              if (data.status == 1) {
                content = `<div class='goodDevice DeviceStyle'>${data.voltage}</div>`;
              } else if (data.status == 2) {
                content = `<div class='warningDevice DeviceStyle' >${data.voltage}</div>`;
              } else if (data.status == 3) {
                content = `<div class='alarmDevice DeviceStyle'>${data.voltage}</div>`;
              }
              var marker = new AMap.Marker({
                position: new AMap.LngLat(data.longitude, data.latitude),
                content: content,
                //点标记显示位置偏移量
                offset: new AMap.Pixel(-15, -15),
              });
              // 将data数据存放到marker下
              marker.markerData = data;
              marker.on("click", (e) => {
                //自定义点击弹窗
                this.setInfoWindow(e);
              });
              this.markers.push(marker);
            });
            // 将markers添加到地图实例
            this.map.add(this.markers);
          });
        },
    
    
       // 设置info弹窗
        setInfoWindow(e) {
           //console.log(e);
          //this.markerData 是我在data()中定义的,用来给子组件传值
          this.markerData = e.target.markerData;
          let infoWindow = new AMap.InfoWindow({
            //挂载的组件
            content: this.$refs.infoWindow.$el,
          });
          infoWindow.open(this.map, e.target.getPosition());
        },
    

    2.引入弹窗组件。

     3.弹窗组件接收markerData 再赋值就好了 

    <template>
      <div class="device_info_wrap">
        <div class="wrap_top">
          <div class="status_row">
            <div class="status_icon">
              <i
                :class="{
                  'el-icon-success': markerData.status == 1,
                  'el-icon-warning': markerData.status == 2,
                  'el-icon-error': markerData.status == 3,
                }"
              ></i>
            </div>
            <div class="device_info">
              <div class="device_name">{{ markerData.name }}</div>
              <div class="device_status">
                <span class="success_span" v-if="markerData.status == 1">
                  Device success
                </span>
                <span class="warning_span" v-else-if="markerData.status == 2">
                  Device success
                </span>
                <span class="error_span" v-else> Device error </span>
              </div>
            </div>
          </div>
          <div class="info_row">
            <div class="dianliang">78% <img src="" alt="" /></div>
            <div class="other_info">
              <div class="time_text">2022/03/08/ 18:11(UTC)</div>
              <div class="tool_btn">
                <div class="screen_btn">FullScreen</div>
                <div class="graph_btn">Map Graph</div>
              </div>
            </div>
          </div>
        </div>
        <div class="wrap_content">
          <div class="item_info">
            <div class="item_value">{{ markerData.temp }}℃</div>
            <div class="item_type">Temp</div>
          </div>
          <div class="item_info">
            <div class="item_value">{{ markerData.wind }}m/s</div>
            <div class="item_type">Wind spd</div>
          </div>
          <div class="item_info">
            <div class="item_value">{{ markerData.Hum }}%RH</div>
            <div class="item_type">Hum</div>
          </div>
          <div class="item_info">
            <div class="item_value">{{ markerData.rain }}mm/h</div>
            <div class="item_type">Rain-f</div>
          </div>
          <div class="item_info">
            <div class="item_value">{{ markerData.press }}hPa</div>
            <div class="item_type">Press</div>
          </div>
          <div class="item_info">
            <div class="item_value">{{ markerData.latitude }}°N</div>
            <div class="item_type">Latitude</div>
          </div>
          <div class="item_info">
            <div class="item_value">{{ markerData.longitude }}°W</div>
            <div class="item_type">Longitude</div>
          </div>
          <div class="item_info">
            <div class="item_value">{{ markerData.voltage }}V</div>
            <div class="item_type">Voltage</div>
          </div>
        </div>
      </div>
    </template>
    <script>
    export default {
      props: ["markerData"],
      data() {
        return {};
      },
    };
    </script>
    


     

    展开全文
  • 高德地图Infowindow位置设置

    千次阅读 2021-04-17 13:34:53
    如图: 如果想设备Infowindow相对于点标记的位置时,可以在创建时就通过offset设置偏移量。 具体设置如下图,第一位数字表示左右偏移量,第二位数字表示上下偏移量;

    如图:
    如果想设备Infowindow相对于点标记的位置时,可以在创建时就通过offset设置偏移量。

    在这里插入图片描述
    具体设置如下图,第一位数字表示左右偏移量,第二位数字表示上下偏移量;

    在这里插入图片描述

    展开全文
  • 请在使用前 将高德地图的sdk加到工程中 allprojects { repositories { ... maven { url 'https://jitpack.io' } } } dependencies { implementation '...
  • 地图开发中,我们经常会需要用到infowindow,通常情况下,我们都是用拼接字符串的方式来填充content属性 let content = [ '<div class="shipInfoPop">', '<div class="h...

    在地图开发中,我们经常会需要用到infowindow,通常情况下,我们都是用拼接字符串的方式来填充content属性

                     let content = [
                                '<div class="shipInfoPop">',
                                '<div class="head" style="color:#333; font-size:16px; border-bottom: 1px solid #d8d8d8;">',
                                ship.title + ' <span style="color:#548CF9;font-size:14px;">详情</span></div>',
                                '<ul>',
                                    '<li>船舶信息</li>',
                                    '<li>视频监控</li>',
                                    '<li>天线状态</li>',
                                    '<li>Modem信息</li>',
                                    '<li>运动分析</li>',
                                    '<li>运动轨迹</li>',
                                '</ul>',
                                '<div class="info">',
                                    '<p>卫星: '+ ship.satellites +'</p>',
                                    '<p>时间: '+ ship.dateTime +'</p>',
                                    '<p>航向: '+ ship.headingAngle +'</p>',
                                    '<p>航速: '+ ship.speed +'</p>',
                                    '<p>经度: '+ ship.gpsWVal +'</p>',
                                    '<p>纬度: '+ ship.gpsJval +'</p>',
                                '</div></div>'
                            ]; 
    

    在vue中还要使用这种写法实在让人有些头疼,机智的小伙伴提出了一个非常comfortable的解决方案。就是把这部分内容提取成为一个子组件

    <div class="shipInfoPop">
            <div class="head" style="color:#333; font-size:16px; border-bottom: 1px solid #d8d8d8;">
            {{title}}<span style="color:#548CF9;font-size:14px;">详情</span></div>
            <ul>
                <li>船舶信息</li>
                <li>视频监控</li>
                <li>天线状态</li>
                <li>Modem信息</li>
                <li>运动分析</li>
                <li>运动轨迹</li>
            </ul>
            <div class="info">
                <p>卫星: {{satellites}}</p>
                <p>时间: {{dateTime}}</p>
                <p>航向: {{headingAngle}}</p>
                <p>航速: {{speed}}</p>
                <p>经度: {{gpsWVal}}</p>
                <p>纬度: {{gpsJval}}</p>
            </div>
        </div>
    

    在父组件中添加引用,注意这里为了避免页面上出现多出的一块,我们可以外面包裹一层div把它隐藏起来

    <div style="display:none;">
                <infowindow 
                    ref="infowindow"
                    :title="title" 
                    :satellites="satellites" 
                    :dateTime="dateTime"
                    :headingAngle="headingAngle"
                    :speed="speed"
                    :gpsWVal="gpsWVal"
                    :gpsJval="gpsJval"></infowindow>
            </div>
    

    最后在地图infowindow中填充就可以啦

                            let infoWindow = new AMap.InfoWindow({
                                content: that.$refs.infowindow.$el
                            }); 
    
    展开全文
  • 首先要想使用高德地图js api,需要先在高德开放平台注册成为开发者,注册后,可以新建一个应用,获取你应用的key。 获得Key之后,我们就可以需要在项目中添加JS API 的入口脚本标签,这里我选择添加到public/index....
  • 地图加载完成不想把info窗体显示,所以找了很多都没有。最后测试之后这样改: 官网API的代码如下: 结果如下: 默认不打开,把 marker.emit('click', {target: marker});删掉就行。  ...
  • 高德地图InfoWindow无法显现问题

    千次阅读 2015-07-22 10:50:00
    在开发的时候,给marker增加了title和snipper,但点击Marker的时候,无法显示infowindow,百度出来解决方案如下: 显示infowindow必须设置title或者sinnipet,同时注册aMap.setInfoWindowAdapter(this);此监听 ...
  • 前言:最近要实现在多个marker上添加分别添加InfoWindow并同时显示,效果如下图,可是使用高德提供的InfoWindow只是在点击某个marker显示当前的InfoWindow无法同时显示。 通过自定义marker的icon实现,具体代码如下...
  • 高德地图自定义infowindow,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,
  • 几步实现高德地图自定义InfoWindow

    千次阅读 2018-06-20 17:24:18
    最近做地图相关的比较多,对照着高德开发者文档,发现如果要实现定位,mark,地图显示等多种功能的时候,很多代码都是重复的,而且每个部分的教程里用到的代码对象名称都不一样,比如同样是MapView,有的是aMapView...
  • 在使用高德地图做地图相关开发时,经常会使用到标记点marker功能,如果业务较复杂,标记点需要增加自定义的信息窗口infoWindow,自定义信息窗口支持传入content参数,content 可以是 dom 对象,也可以是 html 识别的...
  • 高德 InfoWindow解决2.0版本无法滚动问题
  • 高德地图信息窗体InfoWindow 使用element UI组件 需求:高德地图信息窗体InfoWindow里面的图片可以进行大图预览 解决方案,使用Vue.extend和element UI的el-image import { Image } from 'element-ui' //先要引入...
  • emmmm~由于项目中需要信息窗体(如下效果图),官方信息窗体的demo是html的,百度查了好久Vue实现infoWindow,有些是代码不全,有些不方便直接使用,所以自己整理了一下代码,方便以后项目使用,要是能帮助到更多人的...
  • 安卓高德地图之自定义infowindow

    千次阅读 2016-12-05 16:48:14
    安卓高德地图之自定义infowindow
  • 高德地图 ----- 播放视频
  • 笔者自定义的infoWindow效果如图 图中的infoWindow背景用的是图片,自定义infoWindow用到的主要方法如下 @Override public View getInfoContents(Marker arg0) { return null; } /** * 监听自定义...
  • 最近的项目里有功能模块需要实现地图显示,用的是高德地图.前不久发现个小问题,项目需要实现点击某个Marker时将地图放大到合适的级别,中心点设置为当前Marker的坐标,并显示一个InfoWindow;问题所在就是当点击该Marker...
  • 百度查了好一会vue实现infoWindow,都因代码不全,或其他原因。不方便直接使用,所以借鉴了篇文章后,给出全一点点的代码。 借鉴的文章:https://blog.csdn.net/qq493820798/article/details/105403046 效果图: 不...
  • vue[高德地图自定义InfoWindow弹出框中@click事件问题]

    千次阅读 热门讨论 2020-05-27 17:05:39
    vue[高德地图使用自定义InfoWindow事件]
  • 高德地图 信息窗体(InfoWindow

    万次阅读 2017-08-24 16:01:33
    参考高德地图API:信息窗体 1、先分析高德给的例子: 默认样式信息窗体 var infoWindow; var map = new AMap.Map("container", { resizeEnable:true,...
  • 高德地图infowindow点击其他地方消失

    千次阅读 2017-01-05 16:37:37
    http://blog.csdn.net/u013042707/article/details/46438487
  • 高德地图的信息窗体infoWindow

    千次阅读 2020-07-18 09:17:29
    对于高德地图中的信息窗体,在官方文档中也介绍了两种。 1.高德已经封装好了的信息窗体,只需要往里面传值就行。 2.高德也提供了自定义的信息窗体 这两个都存在一个问题,那就是你没有点击坐标还是会一个一个加载...
  • 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...
  • 网上找了一圈,没有找到好方法,于是自己琢磨了一下,发现这样或许可行: 设置全局变量: private boolean infoWindowShown = false; public boolean onMarkerClick(Marker marker) { infoWindowShown = false;...
  • 高德地图API——信息窗体InfoWindow

    万次阅读 2018-05-23 09:57:01
    信息窗体包括InfoWindow和AdvancedInfoWindow两个类,InfoWindow可以实现默认信息窗体、自定义信息窗体,AdvancedInfoWindow是封装了周边搜索和三种路线规划的高级信息窗体。这篇文章只讲述InfoWindow。信息窗体是...
  • 一句话 :自定义一个infowindow,注意布局根部要设置全透明。 1、自定义一个infowindow public class InfoWinNoAdapter implements AMap.InfoWindowAdapter { private Context mContext; public ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 1,214
精华内容 485
关键字:

高德地图infowindow