高德地图 jsapi 标记多个(marker)点,添加自定义属性,获取自定义属性

标签: vue  javascript  html5  vue.js

高德地图 jsapi 标记多个(marker)点,添加自定义属性,获取自定义属性

var map = new AMap.Map("container", {
        zoom: 5, //级别
        pitch: 65,
        rotation: 45,
        center: [116.397428, 39.90923], //中心点坐标
        // layers: [new AMap.TileLayer.Satellite()],
        viewMode: "3D", //使用3D视图
        mapStyle: "amap://styles/grey"
      });
      map.setCity("北京");
      var startIcon = new AMap.Icon({
        // 图标尺寸
        size: new AMap.Size(25, 34),
        // 图标的取图地址
        image: "//a.amap.com/jsapi_demos/static/demo-center/icons/dir-via-marker.png",
        // 图标所用图片大小
        imageSize: new AMap.Size(48, 48),
        // 图标取图偏移量
        imageOffset: new AMap.Pixel(-9, -3)
      });
      var markers = [
        {
          icon: startIcon,
          // "//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-1.png",
          position: [116.205467, 39.907761],
          content:
            "" +
            '<div class="custom-content-marker">' +
            '   <img src="//a.amap.com/jsapi_demos/static/demo-center/icons/dir-via-marker.png">' +
            '   <div class="close-btn" οnclick="clearMarker()">X</div>' +
            "</div>",
            extData:{
               id:"阿撒旦法师打发是打发阿斯顿发生"
            }
           
        },
        {
          icon: startIcon,
          // "//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-2.png",
          position: [116.368904, 39.913423],
          content:
            "" +
            '<div class="custom-content-marker">' +
            '   <img src="//a.amap.com/jsapi_demos/static/demo-center/icons/dir-via-marker.png">' +
            '   <div class="close-btn" οnclick="clearMarker()">X</div>' +
            "</div>",
            extData:{
               id:"阿撒旦法师打发是打发阿斯顿发生"
            }
        },
        {
          icon: startIcon,
          // "//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-3.png",
          position: [116.305467, 39.807761],
          content:
            "" +
            '<div class="custom-content-marker">' +
            '   <img src="//a.amap.com/jsapi_demos/static/demo-center/icons/dir-via-marker.png">' +
            '   <div class="close-btn" οnclick="clearMarker()">X</div>' +
            "</div>",
            extData:{
               id:"阿撒旦法师打发是打发阿斯顿发生"
            },
            
        }
      ];
      // 添加一些分布不均的点到地图上,地图上添加三个点标记,作为参照
      markers.forEach(function(marker1) {
        var marker =new AMap.Marker({
          map: map,
          icon: marker1.icon,
          position: [marker1.position[0], marker1.position[1]],
          offset: new AMap.Pixel(-13, -30),
          label: { content: "<div class='infos'>张三</div>",
          direction: 'top' //文本标注方位 可选值:'top'|'right'|'bottom'|'left'|'center',默认值: 'right' 
          }

          // content:marker.content
        });
        marker.on('click', showInfoM);//添加点击事件
        marker.setExtData(marker1.extData)//添加marker 的自定义属性
      });
      
      function showInfoM(e){
        console.log(e.target.getExtData())//获取marker的自定义属性
        var text = '您在 [ '+e.lnglat.getLng()+','+e.lnglat.getLat()+' ] 的位置点击了marker!'
        console.log(text)
    }
      var mybounds = new AMap.Bounds(
        [114.522638, 36.661981],
        [114.473692, 36.622514]
      );
      map.setBounds(mybounds);
      var center = map.getCenter();

在这里插入图片描述

版权声明:本文为qq_40079749原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/qq_40079749/article/details/105884384

智能推荐

Android VIEW简单绘图

画布canvas 提供两个构造函数: Canvas():创建一个空的Canvas对象 Canvas(Bitmap bitmap):创建一个以bitmap位图为背景的Canvas 常用的Canvas方法: void drawBitmap(Bitmap bitmap,float left,float top,Paint paint):在指定坐标绘制位图 void drawLine(float star...

数据去重的各种方法汇总(三)

Pandas去重DataFrame 接上篇,这篇就剩最后的用Pandas对DataFrame里面的数据去重,这里也有两种方法,可以直接看官方文档(但是掌柜觉得其实就是一种方法,因为第一种只是显示哪些重复。。。): 使用duplicated方法,它会返回一个布尔向量,其长度为行数,表示行是否重复,但是并不会删除重复数据。来看实例: 然后会得到这样一个表格: 现在使用duplicated方法: 会得到...

Linux环境下RabbitMQ消息队列的安装和配置

一、什么是RabbitMQ? RabbitMQ就是一个在AMQP基础上实现的企业级消息系统,简单的说,就是一个消息队列系统。具体的介绍,可以网上去搜!目前只介绍RabbitMQ在Linux系统的安装。 二、RabbitMQ的安装 1、 RabbitMQ是基于Erlang开发,所以使用之前必须安装Erlang语言开发包。 wget http://www.erlang.org/download/otp...

train_test_split切分数据集工具

顾名思义,这是一个切分训练集与测试集的工具   如果我们不使用,而是手动进行划分,要么进行简单的操作——划去前80%为训练集,后20%为测试集,这样会带来很多的问题,因为这样做,我们切出来的会让训练集和测试集的分布很不一致,我们可以看一下简单粗暴方法切出来的分布图: 红色的训练集,蓝色是测试集(点击图片放大可以看得很清楚,直接看博客好像图片模糊)   然...

shell编程第一节 和shell

shell编程看的博客感觉写的挺好的:http://www.cnblogs.com/dongying/p/6262935.html 以及  https://www.cnblogs.com/clsn/p/8028337.html#auto_id_0 简单总结:shell编程就是对一堆Linux命令的逻辑化处理。 chmod +x hello_world.sh ./hello_world.s...

猜你喜欢

微信开发:js sdk 分享(java)

今天记录一下微信jssdk 的分享给朋友的功能,获取config接口注入。 1.需要绑定域名(注意:设置js安全域名的时候,需要设置微信ip白名单,ip白名单新出来的,非白名单内的ip无法获取access_token 更无法获取jsapi) 在设置js 安全域名在 设置–>公众号设置–>功能设置里边 appid appSercret 在开发–>...

js--HTML美术馆

前言 因为之前库房合作的时候交给我一个任务,就是在点击某一项物品的时候显示出几张相印的小图片,然后点击小图片之后显示出一张大图片,因为当时还没有接触JavaScript,所以这方面的知识不是很了解,一直拖着,大概有两天吧,是在是解决不了,于是将这个任务交给了老付和建华,今天在学习JavaScript的时候突然之后就看到了有这么一项功能,于是就有感而发。 内容 首先向大家展示代码。 这部分是HTML...

Jenkins持续集成环境部署(入门篇)

为什么要持续集成 持续集成是一种软件开发实践,即团队开发成员经常集成它们的工作,通过每个成员每天至少集成一次,也就意味着每天可能会发生多次集成。每次集成都通过自动化的构建(包括编译,发布,自动化测试)来验证,从而尽早地发现集成错误。 价值: 1、减少风险 一天中进行多次的集成,并做了相应的测试,有利于检查缺陷,了解软件的健康状况,减少假定。 2、减少重复过程 节省时间、费用和工作量,通过自动化的持...

linux 下rabbitmq的安装以及设置远程用户访问

安装过程中会有提示,一路输入“y”即可。 完成后安装RabbitMQ: 3.自己建个文件夹 进行下载安装也可  直接执行也可 先下载rpm: 完成后启动服务: 可以查看服务状态: 这里可以看到log文件的位置,转到文件位置,打开文件: 这里显示的是没有找到配置文件,我们可以自己创建这个文件 编辑内容如下: 这里的意思是开放使用,rabbitmq默认创建的用户gue...

Java工程师成长修炼手册:01--Java基础特性和字符串

一.三大特性 1.封装 封装,把对象的属性封装起来(使用private修饰符),不被外部程序直接随意调用或修改成员变量。只能通过对象使用public修饰符的set 和 get 方法,来设置和获取成员变量的值。也可以把只在本类内部使用的方法使用 private。另外,还可以封装,隐藏一些方法,需要用的时候,就调用这些方法。这些就是封装。 封装的优点 良好的封装能够减少耦合,可以独立地开发、优化和修改...