地图样式更改时 Google 地图会更改图标标记

2024-03-26

我正在做一个网络动态项目,在我的 html/jsp 页面主体中使用 Google 地图。

我创建了一个函数,通过(lat,lng,map)创建一个标记,并在标记的参数中使用特殊的 image.png 作为图标。

在我的地图中,我制作了两种不同的样式(地图的颜色...):“白天”和“夜晚”。

我想知道当用户单击“夜间”更改样式时如何更改标记的图标。确实,标记的颜色不适合这种风格的地图......

我尝试用相同的名称以不同的样式初始化 var image = /.../...png ,这样我就可以在地图代码中使用 var ,但它不起作用。我还尝试了 if like

if(map.mapTypeControlOptions.mapTypeIds.equals(Day)){
    var image=...png
} else {
    var image=...png
}...

customMapTypeIdJour<div id="map"></div>

<script>
function initMap() {
    var customMapTypeNuit = new google.maps.StyledMapType([
        {
            "featureType": "landscape.man_made", "elementType": "geometry.fill", "stylers": [ { "color": "#2b3f57" } ]
        },                                                    
        //  ... the style of map
        {  
            name: 'Nuit'
        }
    );

    var customMapTypeJour = new google.maps.StyledMapType([
        //  a style of map
        {  
            name: 'Jour'
        }
    );

    var customMapTypeIdJour = 'Jour';
    var customMapTypeIdNuit = 'Nuit';
    var map = new google.maps.Map(document.getElementById('map'), {
        center: {lat: 43.6666, lng: 1.43333},
        zoom: 17,
        streetViewControl: false,
        zoomControl: false,
        mapTypeControlOptions: {
            mapTypeIds: [customMapTypeIdJour, customMapTypeIdNuit]
        }
    });
    map.mapTypes.set(customMapTypeIdNuit, customMapTypeNuit);
    map.mapTypes.set(customMapTypeIdJour, customMapTypeJour);
    map.setMapTypeId(customMapTypeIdJour);
    var infoWindow = new google.maps.InfoWindow({map: map});

    // Try HTML5 geolocation.
    if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(function(position) {
            var pos = {
                lat: position.coords.latitude,
                lng: position.coords.longitude
            };

            infoWindow.setPosition(pos);
            infoWindow.setContent('Vous êtes ici.');

            createMarqueur(lat, lng, map);    // create a special marker with a special image as icon

            map.setCenter(pos);
        });
    } else {
        // Browser doesn't support Geolocation
        handleLocationError(false, infoWindow, map.getCenter());
    }
}

function handleLocationError(browserHasGeolocation, infoWindow, pos) {
    infoWindow.setPosition(pos);
    infoWindow.setContent(browserHasGeolocation ?
        'Error: The Geolocation service failed.' :
        'Error: Your browser doesn\'t support geolocation.');
}
</script>

我开始悬赏,但终于有了答案。基于谷歌的文档 https://developers.google.com/maps/documentation/javascript/reference/3/#MapOptions, 有getMapTypeId()返回一个MapTypeId https://developers.google.com/maps/documentation/javascript/reference/3/#MapTypeId字符串(如“Jour”或“Nuit”(致敬同胞!))。

所以,如果你持有markerList你可以这样做:

google.maps.event.addListener( map, 'maptypeid_changed', function() {
    if(map.getMapTypeId() == "Nuit"){
      for(var i=0;i<markerList.length;i++){
        markerList[i].setIcon("/resources/img/nuit.png");
      }
    }
    else{
      for(var i=0;i<markerList.length;i++){
        markerList[i].setIcon("/resources/img/jour.png");
      }
    }
} );

根据this https://stackoverflow.com/a/8878017/8658039回答,maptypeid_changed是一个信号发送时mapTypeId属性变化。

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

地图样式更改时 Google 地图会更改图标标记 的相关文章

随机推荐

  • 如何在sparkR中创建一个新的DataFrame

    在sparkR中我有data作为数据框 我可以附加一个条目data像这样 newdata lt filter data data column 1 我怎样才能附加多个 假设我想附加向量中的所有元素list lt c 1 6 10 11 14
  • 唯一的表单令牌禁用用户的多任务处理

    如果我想保护我的网站和用户免受跨站伪造 CSRF 攻击 我可以生成一个唯一的令牌 token md5 time rand on 每一页有一个形式 令牌在隐藏的输入字段中提交echo
  • 在Excel 2007中,为什么拖动手动水平分页会导致之前的自动分页变为手动分页?

    在过去的几天里 我一直在编写一些 Excel 2007 VBA 代码 用于管理复杂工作表中的分页符 经过多次挫折后 我刚刚解决了一个让我发疯的 跳页符 问题 并且我做出了以下发现 这让我想到了一个问题 为什么 在分页视图中 使用鼠标拖动ma
  • 如何使用 C# 执行 powershell 脚本并设置执行策略?

    我尝试结合 stackoverflow 中的两个答案 first https stackoverflow com questions 527513 execute powershell script from c sharp with co
  • HMLocation 事件示例

    我正在我的 HMHome 中实现 HMLotinEvent 我正在尝试下面的代码 但我没有得到的一件事是我不知道如何执行功能 例如如果我离开家必须关闭所有灯 我没有找到任何与操作集相关的方法 如果我错了 请纠正我 要求 我想关闭所有配件 以
  • iPad3 高分辨率视网膜显示问题

    我正在使用 Xcode 4 2 iOS SDK 5 0 为 iPad3 Retina Display 开发一个应用程序 我正在使用以下代码片段来检测视网膜 高分辨率 显示 if UIScreen mainScreen respondsToS
  • 没有函数体的函数是什么意思?

    我正在阅读打包的代码time 然后我想知道如何func After d Duration lt chan Time作品 我发现代码如下 func After d Duration lt chan Time return NewTimer d
  • SASS 如何帮助我开发响应式网页设计?

    我使用 CSS 进行设计已有多年 但我现在才刚刚学习如何使用 SASS 这是一个非常初学者的问题 所以请耐心等待 我开始研究 SASS 的原因是因为我想开发响应式网页设计 但希望有一种更好的方法来实现它 而不是为每个屏幕尺寸手动制作不同的样
  • 如何使用 Python 匹配相似的坐标?

    背景 我收到了四个数据目录 其中第一个目录 我们称之为 Cat1 给出了场 1 和 2 中无线电源的坐标 赤经和赤纬 RA 和 Dec 第二个目录 Cat2 给出了 RA和 Dec 适用于领域 1 中的无线电源和红外 IR 源 第三个目录
  • RewriteBase 的值可用作变量/引用吗?

    我正在编写一个 htaccess 文件 该文件将检查请求的页面是否存在于缓存中 为了执行检查 并节省输入 我使用缓存的位置设置一个 ENV 变量 all this works as I expect
  • C函数语法,参数类型在参数列表之后声明

    我对 C 比较陌生 我遇到了一种以前从未见过的函数语法形式 其中参数类型是在参数列表之后定义的 有人可以向我解释一下它与典型的 C 函数语法有何不同吗 例子 int main argc argv int argc char argv ret
  • 长 vs {0L}[0]

    在我们的一项旧服务中 我发现了这样一段代码 评论为原创 long tasksCounter 0 boxing for long counters long errorsCounter 0 boxing for long counters 此
  • R:传递函数参数以覆盖内部函数的默认值

    在 R 中 我想做这样的事情 我有一个函数 f1 它有一个带有默认值的参数 k 3 f1 function x k 3 u x 2 k u 然后我定义了第二个函数 f2 来调用 f1 f2 function z s s f1 z 允许 f2
  • jQuery ajax() 预加载多个内容

    我使用以下代码来预加载 mp3 ajax url boom mp3 success function done 我是否可以预加载多个元素 例如图像和 mp3 e g ajax url boom mp3 moo jpg success fun
  • 获取对象中调用者类的名称的最佳方法是什么?

    我可以使用这个来完成这个工作 scala gt object LOGGER def warning msg String implicit className String className defined object LOGGER s
  • 如何使用 ColdFusion 防止 SQL 注入

    ColdFusion 中如何防止 SQL 注入 我对这种语言 框架很陌生 这是我的示例查询
  • addCleanup与tearDown

    最近 内德 巴切尔德 Ned Batchelder 他在 PyCon 2016 上的演讲 http nedbatchelder com text machete html noted 如果您正在使用unittest编写你的测试 一定要使用a
  • Docker 镜像存储在主机的哪里?

    我设法在目录下找到容器 var lib docker containers 但我找不到图像 下有哪些目录和文件 var lib docker 的内容 var lib docker目录因情况而异Docker 用于存储的驱动程序 https g
  • 104、“连接由对等方重置”套接字错误,或关闭套接字何时会导致 RST 而不是 FIN?

    我们正在并行开发 Python Web 服务和客户端网站 当我们从客户端向服务发出 HTTP 请求时 一次调用会在 socket py 的 read 中持续引发一个 socket error 104 Connection reset by
  • 地图样式更改时 Google 地图会更改图标标记

    我正在做一个网络动态项目 在我的 html jsp 页面主体中使用 Google 地图 我创建了一个函数 通过 lat lng map 创建一个标记 并在标记的参数中使用特殊的 image png 作为图标 在我的地图中 我制作了两种不同的