高德地图标注点点击事件 自定义参数

2023-05-16

 init() {
                var provinces = this.provinces;
                if (!provinces || provinces.length == 0) {
                    return false;
                }
                var hmap = {
                    resizeEnable: true,
                    center: ["106.687915", "26.499209"],
                    zoom: 10
                };
                var map = new AMap.Map("container", hmap);
                var markers = []; //province见Demo引用的JS文件
                //var longitudeArr=[];//经度
                //var latitudeArr=[];//纬度
                for (var i = 0; i < provinces.length; i += 1) {
                    var marker;
                    var nposition = provinces[i].center.split(",");
                    //console.log("nposition》》》》",nposition);
                    if (nposition[0] == "26.571257") {
                        return false;
                    }
                    if (nposition.length == 2) {
                        //longitudeArr.push(nposition[0]);
                        //latitudeArr.push(nposition[1]);
                        if (provinces[i].type == 0) {
                            var icon = new AMap.Icon({
                                image: "https://vdata.amap.com/icons/b18/1/2.png",
                                size: new AMap.Size(24, 24)
                            });
                            marker = new AMap.Marker({
                                icon: icon,
                                position: nposition,
                                offset: new AMap.Pixel(-12, -12),
                                zIndex: 101,
                                title: provinces[i].name,
                                map: map
                            });
                        } else {
                            var redicon = new AMap.Icon({
                                image: require("../assets/red.png"),
                                size: new AMap.Size(24, 24)
                            });
                            var blueicon = new AMap.Icon({
                                image: require("../assets/blue.png"),
                                size: new AMap.Size(24, 24)
                            });
                            //判断显示那个图标
                            if (provinces[i].workStatus == 0) {
                                marker = new AMap.Marker({
                                    position: nposition,
                                    title: provinces[i].name,
                                    map: map,
                                    icon: redicon,
                                });
                            } else {
                                marker = new AMap.Marker({
                                    position: nposition,
                                    title: provinces[i].name,
                                    map: map,
                                    icon: blueicon,
                                    clickable: true,
                                });
                            }
                            //添加参数
                            marker.projectId=provinces[i].projectId;
                            if (provinces[i].type === 2) {
                                var content = "<div class = 'taiwan'>宝岛台湾</div>";
                                baodao = new AMap.Marker({
                                    content: content,
                                    position: nposition,
                                    title: provinces[i].name,
                                    offset: new AMap.Pixel(0, 0),
                                    map: map
                                });
                            }
                        }
                        //点标注的点击事件
                        marker.on('click', function(e) {
                            console.log(e.target.projectId);
                        });
                        markers.push(marker);
                    }
                }
                //在视野中显示所有的点
                map.setFitView();
            },

 

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

高德地图标注点点击事件 自定义参数 的相关文章

  • 史上最全的mysql数据类型汇总(下)

    接着上文继续来梳理 xff0c 上文我们写到了日期与时间类型中的time类型 xff0c 然后我们接着来写日期与时间类型中的date类型 date类型 date类型用在仅需要日期值时 xff0c 没有时间部分 xff0c 在存储时需要3字节
  • mysql中的字段如何选择合适的数据类型呢?

    前面两篇我们介绍了很多种数据类型 xff0c 那么有没有看花眼呢 xff0c 我们在mysql中创建数据表的时候 xff0c 到底应该选择哪一种数据类型呢 xff1f 这次我们就来简单的梳理一下子把 准则 我们不论要如何创建数据表 xff0
  • mysql中的四大运算符种类汇总20多项,用了三天三夜来整理的,还不赶快收藏

    运算符连接表达式中的各个操作数 xff0c 他的作用是用来指明对数据表中的操作数所进行的运算 运用运算法有什么好处呢 xff1f 运用运算符可以更加灵活的使用表中的数据 xff0c 我们可以通过使用运算符来解决我们的很多问题 xff0c 大
  • mysql函数汇总之数学函数

    什么是mysql函数 xff1f 61 61 61 61 61 61 61 61 61 61 61 61 61 61 函数表示对输入参数值返回一个具有特定关系的值 xff0c mysql提供了大量丰富的函数 xff0c 在进行数据库管理以及
  • mysql函数汇总之字符串函数

    字符串函数主要用来处理数据库中的字符串数据 mysql中的字符串函数有计算字符串长度函数 字符串合并函数 字符串替换函数 字符串比较函数 查找指定字符串位置函数等 计算字符串字符数的函数 CHAR LENGTH str 函数计算字符串str
  • mysql函数汇总之日期和时间函数

    日期和时间函数主要用来处理日期和时间值 xff0c 一般的日期函数除了使用date类型的参数外 xff0c 也可以使用datetime或者timestamp类型的参数 xff0c 但会忽略这些值的时间部分 获取当前日期的函数 curdate
  • [ Ubuntu 使用技巧 ] 在当前工作目录打开 Terminal

    1 General Purposes Why I wrote this 在 Ubuntu 系统开发最舒服的一点就是可以开心地使用 Terminal 这是个好东西 xff0c 尤其当你熟悉大部分的常用命令之后 xff0c 对日常的代码工作还有
  • mysql函数汇总之条件判断函数

    条件判断函数也被称为控制流程函数 xff0c 根据满足的不同条件 xff0c 执行响应的流程 mysql中进行条件判断的函数有if ifunll和case等 IF expr v1 v2 函数 IF expr v1 v2 xff1a 如果表达
  • mysql函数汇总之系统信息函数

    mysql的系统信息有数据库的版本号 当前用户名和连接数 系统字符集 最后一个自动生成的ID值等 61 61 61 61 61 61 61 61 61 61 61 61 61 61 61 61 61 61 61 61 61 61 61 61
  • mysql数据库中的数据如何加密呢?mysql8.0自带新特性

    61 61 61 61 61 61 61 61 61 61 61 61 61 61 61 61 61 61 61 61 61 61 61 61 61 61 61 61 61 61 61 61 61 61 61 61 61 61 61 61
  • mysql还有哪些自带的函数呢?别到处找了,看这个就够了。

    格式化函数FPRMAT x n format x n 将数字x进行格式化 xff0c 并以四舍五入的方式保留小数点后n位 xff0c 结果以字符串的形式返回 如果n为0 xff0c 则返回结果函数不含小数部分 mysql gt select
  • mysql中还有窗口函数?这是什么东西?

    什么是窗口函数 xff1f 在mysql8 0的版本中 xff0c 新增了一个窗口函数 xff0c 用他可以实现很多新的查询方式 窗口函数类似于sun count 那样的集合函数 xff0c 但它并不会将多行查询结果合并为一行 xff0c
  • 记一次mysql查询慢的优化历程

    有一个项目 xff0c 代称cc xff0c 用了我们公司的产品 xff0c 单表数据量在200万左右 在做业务操作的时候 xff0c 点击一下按钮 xff0c 需要等待2 3分钟 及其难以忍受 xff0c 特此让我们修改 PS xff1a
  • configure: error: No curses library functions found

    centos上编译程序报错如下 xff1a configure error No curses library functions found 这个错误是因为缺少 curses 库导致的 在CentOS 7中 xff0c 可以通过以下命令安
  • STM32使用内部RC振荡器作为系统时钟开发项目--内晶振启动模板工程

    STM32使用内部RC振荡器时 xff0c OSC32 IN xff0c OSC32 OUT接法 xff1a 1 xff09 对于100脚或144脚的产品 xff0c OSC IN应接地 xff0c OSC OUT应悬空 2 xff09 对
  • 项目笔记(6):阿里云的Iot Studio和web可视化

    项目笔记 xff08 4 xff09 阿里云物联网的自定义主题和物联网模型
  • k-近邻算法实现手写数字识别系统

    k 近邻算法实现手写数字识别系统 一 实验介绍 1 1 实验内容 本实验将会从电影题材分类的例子入手 xff0c 详细讲述k 近邻算法的原理 在这之后 xff0c 我们将会使用该算法实现手写数字识别系统 1 2 课程来源 本课程源自 图灵教
  • sqlite 句柄-sqlite 基础教程(3)

    要操纵一个数据库你就得有一个这个数据库的句柄 又碰到这个难以理解的词了 xff0c 不过确实还没得一个更好的词来替代它 其实你跟本不需要去在乎这个词叫什么 xff0c 你只要搞清楚他是一个什么玩意儿 就如同鞋子为什么叫鞋子 xff0c 仔细

随机推荐