精华内容
下载资源
问答
  • 高德地图自定义label
    千次阅读
    2019-12-10 11:29:48
    marker.setLabel({
      offset: new AMap.Pixel(-5, -2),
      content: `<div class="info" οnclick="func1('${this.infos[i].infoName}')">${this.Infos[i].infoName}</div>`,
      direction: 'right'
    });
    

    注意事项
    1.func1这个方法需要自建一个js文件,在index.html中通过script标签引入,文件建立的地方建议在static的js下,方便打包
    例如
    func1.js中
    function func1(res){
    window.parent.postMessage(‘func1:’ + res, window.location.href)
    }
    组件中获取postMessage需要在mounted()中添加监听
    window.addEventListener(‘message’, (e)=>{
    let originUrl = window.location.host
    let receiveUrl = e.origin.split(‘http://’)[1]
    if(originUrl == receiveUrl){
    if(e.data.split(’:’)[0] == ‘func1’){
    this.$emit(‘getDetail’,e.data.split(’:’)[1])
    }
    }
    })
    2.获取到想要的参数之后需要在vue组件中使用,并不能在js文件中直接用(直接用也行,那样的话相当于在js文件中写了异步ajax,而且使用的不是vue,分分钟low到爆),获取方式可以采用postmessage的方法,
    func1.js负责发送指令,vue组件接收message指令并执行后续方法。
    题外话
    一方面找遍了高德地图api的示例,没找到对label点击操作的api,另一方面,在无奈之下选择了原始的click执行方法,但是操作过程还是有些繁琐复杂,喷子嘴下留情

    更多相关内容
  • 高德地图自定义Marker显示文字

    千次阅读 2020-09-06 16:49:10
    方法一: 调用: Marker localMarker=mAMap.addMarker(new MarkerOptions() .position(localLatLng) //.icon(BitmapDescriptorFactory.fromBitmap(BitmapFactory.decodeResource(getResources(), R.drawable.map_...

    方法一:

    调用:

    Marker localMarker=mAMap.addMarker(new MarkerOptions()
    .position(localLatLng)
    //.icon(BitmapDescriptorFactory.fromBitmap(BitmapFactory.decodeResource(getResources(), R.drawable.map_location_icon))));
    /*.icon(BitmapDescriptorFactory.
    fromView(getMyView(pm.getPm()+""))));*/
    .icon(BitmapDescriptorFactory.fromBitmap(getMyBitmap(pm.getPm()+""))));
    localMarker.setObject(pm);

    getMyBitmap方法:

    protected Bitmap getMyBitmap(String pm_val) {
    Bitmap bitmap = BitmapDescriptorFactory.fromResource(
    R.drawable.map_location_icon).getBitmap();
    bitmap = Bitmap.createBitmap(bitmap, 0 ,0, bitmap.getWidth(),
    bitmap.getHeight());
    Canvas canvas = new Canvas(bitmap);
    TextPaint textPaint = new TextPaint();
    textPaint.setAntiAlias(true);
    textPaint.setTextSize(22f);
    textPaint.setColor(getResources().getColor(R.color.blue));
    canvas.drawText(pm_val, 17, 35 ,textPaint);// 设置bitmap上面的文字位置
    return bitmap;
    }

     

    方法二:

    布局文件:

    mymarker.xml

    <?xml version="1.0" encoding="utf-8"?>
    <FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical" 
        >


        <ImageView
            android:id="@+id/imageView1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/map_location_icon" 
            android:scaleType="centerCrop"/>


        <TextView
            android:id="@+id/marker_tv_val"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginLeft="10px" 
            android:layout_marginTop="7px"
            android:textColor="@android:color/black"
            />
        
    </FrameLayout>

     

    2调用:

    Marker localMarker=mAMap.addMarker(new MarkerOptions()
    .position(localLatLng)
    //.icon(BitmapDescriptorFactory.fromBitmap(BitmapFactory.decodeResource(getResources(), R.drawable.map_location_icon))));
    /*.icon(BitmapDescriptorFactory.
    fromView(getMyView(pm.getPm()+""))));*/
    .icon(BitmapDescriptorFactory.fromBitmap(getMyBitmap(pm.getPm()+""))));
    localMarker.setObject(pm);

    3:getMyView方法

    protected View getMyView(String pm_val) {
    View view=getLayoutInflater().inflate(R.layout.mymarker, null);
    TextView tv_val=(TextView) view.findViewById(R.id.marker_tv_val);
    tv_val.setText(pm_val);
    return view;
    }

     

    第一种方法比较简洁一点

    展开全文
  • // 创建一个marker 在地图上显示 var markerMC = new AMap.Marker({ icon: '',//图标 title:'',//标题 position: ['经度','纬度'], map: map }); markerMC.content = `自定义marker内..
    
    // 创建一个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();
    }

    展开全文
  • 高德地图自定义绘制园区区域 边界描边 并添加指定点位maker 自定义maker内容

    绘制自定义区域

    绘制自定义区域第一步需要获取指定区域的边界坐标点list,可以在高德地图官网的工具中获取 高德选点工具,拿到区域边界点list后就是绘制,区域绘制有几种方式,具体可查看高德的API,大体可用Wall和Prism两种方式,区别是wall没有区域填充颜色,Prism可以填充,所以我选择使用Prism进行绘制区域。Prism需要Object3DLayer承载,所以先添加个Object3DLayer,然后将绘制的Prism增加到Object3DLayer中,高德API中也有详细介绍。

    // path数据结构为 [{longitude:11.11,latitude:22.22}]
    path = path.map((el)=>{
                return new AMap.LngLat(el.longitude,el.latitude)
              })
    let object3Dlayer = new AMap.Object3DLayer();
              this.map.add(object3Dlayer);
              let height = -3000; // 区域高度 设置为负有种区域凸起的3D感
              let color = 'rgba(16,73,175,0.35)'; // rgba
              let prism = new AMap.Object3D.Prism({
                path: path, // 这里就是对应的点位数组 注意需要对数字经纬度循环生成 AMap.LngLat
                height: height,
                color: color
              });
              prism.transparent = true;
              object3Dlayer.add(prism)
    

    这样区域就绘制出来了

    绘制边界

    下一步给区域增加描边,这样区域的边界感更加明显,效果更好,描边选择Polyline 绘制,注意绘制线需要首尾闭合,所以点位list的最后需要增加一个点位的开始position

    path.push(new AMap.LngLat(data[0].longitude,data[0].latitude))
    //添加区域描边
              new AMap.Polyline({
                path: path,
                strokeColor: "#178DFF",
                strokeWeight: 4,
                map: this.map,
                lineJoin: 'round',
                lineCap: 'round',
              });
    

    这样基本的区域填充和边界描边就好了,基本效果实现,下面就是在区域中增加maker,如站点,设备标注等。

    添加自定义maker

    高德的maker需要传入img地址,label等参数,有时候限制较多,我们可以设置自定义内容,传入自定义Dom节点,作为maker的内容,这样就没有maker展示内容的限制了,
    首先要确定需要增加maker的点位坐标,同样可在高德地图选点工具中获取,确定所标注的站点、设备等坐标点

    // 通过隐藏这些maker 使之不展示dom,但是Dom节点会渲染,将节点传入高德的maker这样就会作为maker的内容展示了,maker内容可随意展示 Maker为自定义的Vue组件
    <div v-show="false">
          <Maker ref="maker" v-for="(item,index) in makers" :value="item" :key="index"></Maker>
        </div>
        //sites 为需要标注的点位坐标
        sites.forEach((el,index)=>{
                let maker= new AMap.Marker({
                  position: new AMap.LngLat(el.longitude,el.latitude),
                  content: this.$refs.maker[index].$el, // 这里传入dom
                  offset: new AMap.Pixel(0, -34)  //这里注意偏移量,默认左上角定位在坐标点,如需dom中心对准坐标点 则需要 向左向右偏移 宽高的一半 为负数,
                });
                this.map.add(maker)
              })
              
    

    这样区域填充,描边,点位标注就都加好了,具体展示效果如下,仅供参考

    仅供参考

    展开全文
  • 高德地图自定义弹窗内容

    千次阅读 2020-05-17 21:41:50
    使用vue2.x来实现高德地图自定义弹窗内容,可以通过一个按钮来切换不同的样式风格,即改变弹窗内容样式。 分析 高德地图官网为开发者提供了自定义弹窗内容的例子,见这里 。官方提供的方式是Dom操作,即createElement...
  • // 将 markers 添加到地图 me.map.add( marker); }, 背景图或者图片一定要是网络图片,本地图片转换网络图片可以看网上的教程。 <style lang="less" > .custom-content-marker { position: relative; width: 80px; ...
  • 项目中设置高德地图 安装成功后在main.js设置以下内容 import VueAMap from 'vue-amap' Vue.use(VueAMap) VueAMap.initAMapApiLoader({ key: '你的key', plugin: ['AMap.MouseTool', 'AMap.PolyEditor', 'AMap....
  • vue中使用高德地图自定义开发

    千次阅读 2020-05-25 09:59:01
    vue中使用高德地图自定义开发 用一个在地图上挖宝的小例子,来总结下自己使用高德地图的心得。 起步-加载高德地图 // 进入 cd utils // 创建AMap.js文件 vim AMap.js AMap.js export default function MapLoader()...
  • 本例使用content实现在高德地图自定义覆盖物,即自定义marker。先看如下效果: 标题 在地图上显示三种颜色的marker:绿色,紫色,橙色。当点击其中的一个marker时,该Marker颜色变为蓝色,size变大,并旋转45度...
  • Marker指地图上的标记点,可以添加标题和内容。绘制多个Marker似乎较为困难,需要批量读入解析数据,这里用最最简单和静态的方法来显示多个标记点。并自定义Marker格式
  • 此文讲的是使用高德地图自定义气泡,并且点击自定义气泡后对应的 MAMapView 地图对象能够接收到点击的通知事件 didAnnotationViewCalloutTapped,气泡也在点击后被移除。 效果: 添加自定义气泡 定义弹出的气泡...
  • 高德地图点击标记点出现自定义信息窗体 效果图: 场景: 例如点击地图中的某台共享单车,显示他的电量,状态等。 页面自定义窗体html结构,然后通过点击标记点,得到坐标,将其定位上去。(高德内置方法) html:...
  • 高德地图 添加自定义图标

    千次阅读 2018-11-08 01:36:22
    高德地图 添加自定义图标
  • 截图效果: 布局文件: android:layout_width="fill_parent" android:layout_height="wrap_content" android:layout_...launcher" android:label="@string/app_name" android:theme="@style/test"> android:name=...
  • 高德地图修改label的样式

    千次阅读 2018-08-30 15:38:36
    高德默认的是蓝色的标签,我们自己自己改一下样式。加上一下样式就能更改标签的颜色 &lt;style&gt; .amap-marker-label{ position: absolute; z-index: 2; border: 1px solid #ccc; background-color: ...
  • Android 在高德地图里面自定义多个Marker,Marker设置缩放动画 一、使用步骤 1.引入库 在app的build.gradle里面添加 implementation files(‘libs/Android_Map3D_SDK_V7.4.0_20200416.jar’) implementation files...
  • 本篇文章主要介绍了Android中高德地图实现定位的相关知识。具有很好的参考价值。下面跟着小编一起来看下吧
  • 高德地图点聚合,聚合点点击事件,一切效果都需要您自己的key值,单点点击事件,点聚合点击事件后信息窗体每个点添加点击事件。
  • 高德标签label样式

    千次阅读 2019-04-01 18:59:30
    高德默认的是蓝色的标签,我们自己自己改...//修改高德地图的标签样式 .amap-marker-label{ position: absolute; z-index: 2; border: 1px solid #ccc; background-color: white; white-space: nowrap;...
  • 高德地图 jsapi 标记多个(marker)点,添加自定义属性,获取自定义属性 var map = new AMap.Map("container", { zoom: 5, //级别 pitch: 65, rotation: 45, center: [116.397428, 39.90923], //中心点坐标 //....
  • // 初始化map this.map = new AMap.Map(name, { resizeEnable: true, mapStyle: MAP_STYLE, zoom: 11, // 初始化地图层级 // center: source && source.length ? source : [116.397428, 39....// 自定义ma.
  • CSS修改高德地图MarkerLable的样式

    千次阅读 2020-11-23 20:24:28
    JS API高德地图Marker节点添加MarkerLable高德默认的是蓝色的标签,通过F12,查看样式 我们自己自己改一下样式。加上一下样式就能更改标签的颜色 <style> .amap-marker-label{ position: absolute; z...
  • React AMap — 基于 React 的高德地图组件 目录 搜索区域代码 地图区域代码 自定义菜单样式 复杂而且不好口述,直接上代码,后面出视频 搜索区域代码 // ------------------外部资源 import React, { ...
  • 实现思路1、添加高德地图- (void)creatMapView {_mapView = [[MAMapView alloc]initWithFrame:self.view.bounds];_mapView.delegate = self;_mapView.showsCompass = NO;_mapView.showsUserLocation = YES;_mapView....
  • 在使用地图模块中很多时候我们都需要在地图中使用自定义的Marker,并且自定义点击弹出框事件,下面我将带大家一起来看如何在地图中进行Marker的添加和使用。
  • 2.自定义地图样式 3.点聚合功能 一,参照https://blog.csdn.net/liujucai/article/details/100070540#commentsedit,实现只显示长治部分的地图, 二,参照...
  • 在全局css中设置,此设置也解决了marker文本过长时设置anchor效果偏差过大的问题 .amap-marker-content{ white-space: nowrap; }

空空如也

空空如也

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

高德地图自定义label