登录
当前位置： 首页 > 知识库问答 >
问题：

谷歌地图标记图标笔划权重动态增加以显示警报

上官自明
2023-03-14

我正在尝试创建一个Google地图标记图标，该图标显示为特定标记的警报。该计划是在地图加载后动态增加图标的strokeWeight。

我对警报的想法是：将外部“红色”的strokewweight从1增加到30，然后从1重新启动到30，这样看起来就像是对红色图标发出警报。

参考：谷歌地图标记图标填充在图标填充颜色和strokeColor之间

我的标记代码：

// Loop through our array of markers & place each one on the map  
for (i = 0; i < markers.length; i++) {
    if (i % 2) {
        color = "red";
    } else {
        color = "green";
    }
    var position = new google.maps.LatLng(markers[i][1], markers[i][2]);
    bounds.extend(position);

    var fillColor = "#4A86FE";
    var stripeColor = "white";
    var outsideColor = color;
    var title = "My Title";
    var id = i;
    var label = {
        text: '' + i + '',
        color: "white",
        fontWeight: 'bold',
        fontSize: '16px',
    };
    var marker = new google.maps.Marker({
        zIndex: 10, // bottom
        id: id,
        position: position,
        map: map,
        title: title,
        icon: {
            path: google.maps.SymbolPath.CIRCLE,
            scale: 15,
            fillColor: fillColor,
            fillOpacity: 1.0,
            strokeWeight: 6,
            strokeOpacity: 0.8,
            strokeColor: outsideColor,
            rotation: 30
        },
    });

    var marker = new google.maps.Marker({
        zIndex: 15, // top
        id: id,
        position: position,
        label: label,
        map: map,
        title: title,
        icon: {
            path: google.maps.SymbolPath.CIRCLE,
            scale: 15,
            fillColor: fillColor,
            fillOpacity: 1.0,
            strokeWeight: 2,
            strokeOpacity: 0.8,
            strokeColor: stripeColor,
            rotation: 30
        },
    });


    // To Bounce the selected Marker
    //if(color == "red"){
    //  marker.setAnimation(google.maps.Animation.BOUNCE);
    //}
    // Marker Zoom on Click

    // Automatically center the map fitting all markers on the screen
    map.fitBounds(bounds);
}

google.maps.event.addDomListener(window, 'load', initialize);

尝试1：触发器确实有效：（

      (function (i,marker){
            google.maps.event.addListener(marker, 'click' , function() {
                var icon = this.getIcon();
              icon.strokeWeight = i;
              this.setIcon(icon);
            });
        });(i, marker);
      document.getElementById(marker).click();

尝试2：这对循环中的最后一个标记有效

// To Bounce the selected Marker
                if(color == "red"){
                  setInterval(function() {
                     if(on) {
                       marker.setMap(null);
                     } else {
                       var icon = marker.getIcon();
                       icon.strokeWeight = 10;
                       marker.setIcon(icon);
                       marker.setMap(map);
                     }
                    on = !on;
                  }, intervalSeconds * 1000);
                  //marker.setAnimation(google.maps.Animation.BOUNCE);
                }

尝试3：这是一个糟糕的尝试：(

marker.addListener('click', function() {
            var icon = this.getIcon();
            var self = this;
            j = 0;
            console.log('im clicked');
            for (i = 1; i < 20; i++) {
                icon.strokeWeight = i;
                window.setTimeout(function() {
                    self.setIcon(icon);
                }, 3000);

                console.log(i);
                if (i == 19) {
                    i = 0;
                    j++
                }
                if (j == 10) {
                    break;
                }
            }

试图实现以下内容：

共有1个答案

商正诚
2023-03-14

我建议创建第三个具有“警报”功能的标记，将其置于其他两个标记的下方，并更改其笔划重量以提供“脉动”：

function alertMarker(map, latLng, color) {
  var intervalSeconds = 0.025;
  var direction = 1;
  var strokeWeight = 10;
  var maxStrokeWeight = 30;
  var alertMark = new google.maps.Marker({
    position: latLng,
    map: map,
    zIndex: 5, // very bottom
    icon: {
      path: google.maps.SymbolPath.CIRCLE,
      scale: 15,
      fillColor: color,
      fillOpacity: 1.0,
      strokeWeight: 6,
      strokeOpacity: 0.8,
      strokeColor: color,
      rotation: 30
    },
  })
  setInterval(function() {
      if (((direction>0) && strokeWeight <maxStrokeWeight)||((direction<0) && strokeWeight>10)) {
        strokeWeight+=direction;
      } else if (strokeWeight==10) {
        direction=1;
      } else if (strokeWeight==maxStrokeWeight) {
        direction=-1;
      }
      var icon = alertMark.getIcon();
      icon.strokeWeight = strokeWeight;
      icon.strokeOpacity = 0.6
      alertMark.setIcon(icon);
    }, intervalSeconds * 1000);
    return alertMark;
}

概念验证小提琴

注意：这只是一个概念证明，如果您希望这是一个长期的功能，您将希望保留计时器函数的句柄并取消它们，而不是让它们都在隐藏标记的后台运行

代码段：

function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 4,
    center: {
      lat: -25.363882,
      lng: 131.044922
    }
  });

  var position = map.getCenter(),
    i = 10;
  var mark1 = makeComplexIcon(map, position, "#4A86FE", "white", "red", "My Title", i, {
    text: 'id',
    color: "white",
    fontWeight: 'bold',
    fontSize: '16px',
  });
  var aM = alertMarker(map, mark1.getPosition(), "red");
  var mark2 = makeComplexIcon(map, {
    lat: -27.6728168,
    lng: 121.6283098
  }, "green", "yellow", "orange", "W. Australia", 12, {
    text: 'id1',
    color: "blue",
    fontWeight: 'bold',
    fontSize: '16px',
  })
  var mark3 = makeComplexIcon(map, {
    lat: -30.0,
    lng: 136.2
  }, "black", "white", "black", "S. Australia", 14, {
    text: 'id2',
    color: "red",
    fontWeight: 'bold',
    fontSize: '16px',
  });
  setTimeout(function() {
    aM.setMap(null);
    aM = alertMarker(map, mark2.getPosition(), "orange")
  }, 5000)
  setTimeout(function() {
    aM.setMap(null);
    aM = alertMarker(map, mark3.getPosition(), "black")
  }, 10000)
  setTimeout(function() {
    aM.setMap(null);
    alertMarker(map, mark1.getPosition(), "red")
  }, 15000)
}

function makeComplexIcon(map, latLng, fillColor, stripeColor, outsideColor, title, id, label) {
  var bottom = new google.maps.Marker({
    zIndex: 10, // bottom
    id: id,
    position: latLng,
    map: map,
    title: title,
    icon: {
      path: google.maps.SymbolPath.CIRCLE,
      scale: 15,
      fillColor: fillColor,
      fillOpacity: 1.0,
      strokeWeight: 6,
      strokeOpacity: 0.8,
      strokeColor: outsideColor,
      rotation: 30
    },
  });
  var top = new google.maps.Marker({
    zIndex: 15, // top
    id: id,
    position: latLng,
    label: label,
    map: map,
    title: title,
    icon: {
      path: google.maps.SymbolPath.CIRCLE,
      scale: 15,
      fillColor: fillColor,
      fillOpacity: 1.0,
      strokeWeight: 2,
      strokeOpacity: 0.8,
      strokeColor: stripeColor,
      rotation: 30
    },
  });
  return bottom;
}

function alertMarker(map, latLng, color) {
  var intervalSeconds = 0.025;
  var direction = 1;
  var strokeWeight = 10;
  var maxStrokeWeight = 30;
  var alertMark = new google.maps.Marker({
    position: latLng,
    map: map,
    zIndex: 5, // very bottom
    icon: {
      path: google.maps.SymbolPath.CIRCLE,
      scale: 15,
      fillColor: color,
      fillOpacity: 1.0,
      strokeWeight: 6,
      strokeOpacity: 0.8,
      strokeColor: color,
      rotation: 30
    },
  })
  setInterval(function() {
    if (((direction > 0) && strokeWeight < maxStrokeWeight) || ((direction < 0) && strokeWeight > 10)) {
      strokeWeight += direction;
    } else if (strokeWeight == 10) {
      direction = 1;
    } else if (strokeWeight == maxStrokeWeight) {
      direction = -1;
    }
    var icon = alertMark.getIcon();
    icon.strokeWeight = strokeWeight;
    icon.strokeOpacity = 0.6
    alertMark.setIcon(icon);
  }, intervalSeconds * 1000);
  return alertMark;
}
html,
body,
#map {
  height: 100%;
  margin: 0;
  padding: 0;
}
<div id="map"></div>
<!-- Replace the value of the key parameter with your own API key. -->
<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap"></script>
 类似资料：
  • 移动标记时，谷歌地图会显示两个标记

    我使用Google Maps Android SDK在地图上添加标记，这些标记的位置存储在我的应用程序的所有用户都可以使用的Firebase数据库中。每个标记的数据存储在唯一的Firebase记录中，每个记录包含纬度 添加了一个新标记。 更改现有标记（移动到新位置和/或“验证”） 删除现有标记 我实现了一个哈希图，如如何使用Firebase Google Maps API Android中的数据更

  • Android谷歌地图版本-2显示方向和谷歌地图图标

    在我的Android应用程序中，当单击地图上的标记时，我的地图屏幕会显示方向和谷歌地图。我在应用程序中使用以下内容。 XML： 在代码中： 我已经用蓝色标记了方向和谷歌地图图标。请查看我的地图屏幕的图像。 如何从地图片段中隐藏方向和谷歌地图图标？

  • 如何更改谷歌地图标记图标？

    我想更改Google Maps上选定的标记图标，因此我有以下代码： 在这一行，我从下面得到错误： 例外情况如下：

  • Vuejs谷歌地图在中心圆内显示标记/坐标

    如何显示中心半径内的标记？我需要显示基于半径的位置，因为这将是我根据一个位置的km半径来查找此类位置的函数的基础。 正如你所看到的，我有许多记号笔。这是通过调用axios请求从我的数据库得到的。 这是我的代码片段

  • 更新谷歌地图标记，无需重建地图

    我使用的谷歌地图api如下： 这需要拉特和lng，地图画得很好，但是当新的拉特 我想在不重新绘制地图的情况下更新地图上的标记。

  • 如何在谷歌地图上显示多个标记

    问题内容： 我想在Google Maps android上显示带有多个标记的位置，问题是当我运行我的应用程序时，它只显示一个位置/标记，这是我的代码： 我不知道我的错在哪里，希望有人能帮助我解决我的问题，非常感谢你 问题答案： 用这个： 或者，您也可以使用以下命令： 其中 纬度 和 经度 是存储在数组列表中的具有不同名称的字符串.....

相关问答

更新谷歌地图标记，无需重建地图谷歌地图显示来自Firebase的多个标记谷歌地图：点击标记自动居中地图创建没有谷歌地图引用的标记（谷歌地图标记）对象谷歌地图API-删除标记

相关文章

jQuery Mobile：动态添加内容的标记增强用React实现谷歌地图谷歌地图静态地图折线穿过湖泊，河流，山脉显示加载图标，直到页面加载完毕？为什么地图标记会在地图周围掠过

相关阅读

歌尔精英计划 图像算法一面案例-Swing显示图片GWT Highcharts 动态图表OpenCV MREAD_XXX标记Pillow生成GIF动态图

相关工具

Google地图JSP标签库百度地图标注插件室内地图演示版v1.0lrc歌词同步显示三种方式显示GIF图片

相关文档

Google 地图入门地图慧 帮助文档地图者 帮助文档Debian 学习笔记ES6 学习笔记
快捷导航： 新手教程 算法原理 架构设计 Java进阶 数据库进阶 大厂专栏 面试经验 编程笔记 编程问答 所有专题 文档资料 工具软件 电子书籍 小牛导航
在线工具： 房贷计算器 个税计算器 Linux命令查询 Json格式化 正则表达式 颜色转换 AES加解密 SHA1加密 MD5加密 毒鸡汤 字数统计 随机密码生成 进制转换 Base64编解码 励志句子
Copyright © 2019-2024 小牛知识库@xnip.cn. All Rights Reserved.