将谷歌地图标记颜色更改为我选择的颜色

2024-04-21

无论如何,是否可以从默认的红色标记颜色更改为我选择的十六进制颜色?我一直在寻找堆栈溢出,但似乎没有找到答案。这是我到目前为止所拥有的。

var marker = new google.maps.Marker({
            position: myLatLng,
            label: '23',
            map: map
        });

一种选择是为标记图标定义 SVG 符号。 SVG 图标颜色可以在其构造函数中设置。

function pinSymbol(color) {
    return {
        path: 'M 0,0 C -2,-20 -10,-22 -10,-30 A 10,10 0 1,1 10,-30 C 10,-22 2,-20 0,0 z',
        fillColor: color,
        fillOpacity: 1,
        strokeColor: '#000',
        strokeWeight: 2,
        scale: 1
    };
}

然后像这样使用它:

var marker1 = new google.maps.Marker({
  map: map,
  position: new google.maps.LatLng(47.5, -122.0),
  icon: pinSymbol('green')
});

概念证明小提琴 http://jsfiddle.net/s3db77ff/3/

代码片段:

function initialize() {
  var latlng = new google.maps.LatLng(47.605, -122.2);
  var myOptions = {
    zoom: 10,
    center: latlng,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };
  var map = new google.maps.Map(document.getElementById("map_canvas"),
    myOptions);
  var marker = new google.maps.Marker({
    map: map,
    position: latlng,
    icon: pinSymbol('red')
  });

  var marker1 = new google.maps.Marker({
    map: map,
    position: new google.maps.LatLng(47.5, -122.0),
    icon: pinSymbol('#7CFC00')
  });
  var marker2 = new google.maps.Marker({
    map: map,
    position: new google.maps.LatLng(47.6, -122.3),
    icon: pinSymbol('orange')
  });
  var marker3 = new google.maps.Marker({
    map: map,
    position: new google.maps.LatLng(47.7, -122.1),
    icon: pinSymbol('yellow')
  });
}

function pinSymbol(color) {
  return {
    path: 'M 0,0 C -2,-20 -10,-22 -10,-30 A 10,10 0 1,1 10,-30 C 10,-22 2,-20 0,0 z',
    fillColor: color,
    fillOpacity: 1,
    strokeColor: '#000',
    strokeWeight: 2,
    scale: 1
  };
}

google.maps.event.addDomListener(window, 'load', initialize);
html,
body,
#map_canvas {
  height: 500px;
  width: 500px;
  margin: 0px;
  padding: 0px
}
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
<div id="map_canvas" style="width:750px; height:450px; border: 2px solid #3872ac;"></div>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

将谷歌地图标记颜色更改为我选择的颜色 的相关文章

  • 如何从 JavaScript 中的字符串中删除空白字符?

    如何从 JavaScript 中的字符串中删除空白字符 修剪很容易 但我不知道如何将它们从inside字符串 例如 222 334 gt 222334 您可以使用正则表达式 如下所示来替换所有空格 var oldString 222 334
  • 带有航点的 Google 路线服务无法正常工作

    这是我的代码 用于显示带有谷歌方向的航路点 Show Route if e keyCode 109 booking docket dialog isOpen var pickup txt pickup lat long val var pi
  • 我可以动态创建/销毁 Vue 组件吗?

    因此 我正在创建一个相当复杂的 Vue 应用程序 它从后端 API 获取数据并将其显示在前端 具体取决于用户选择的过滤器 它的默认设置是立即显示所有内容 然后一旦用户选择过滤器 它就会拉出不具有这些属性的 卡片 组件 直到今天 一切都很顺利
  • 如何将 Django 中的数组传递给模板并在 JavaScript 中使用它

    我想将数组传递给模板 然后通过 JavaScript 使用它 In my views py I have arry1 Str 500 20 return render to response test html array1 arry1 在
  • 如何在bootstrap中默认隐藏侧边栏?

    我在这里有一个很好的参考 作为 Bootstrap 在设计 Web 表单应用程序时的侧边栏 http startbootstrap com template overviews simple sidebar http startbootst
  • 避免在 ES6 的函数内定位 this 的对象作用域

    例如 我正在使用 D3 js 运行一个项目 导入特定模块并调用它们的函数 Setup TypeScript ES6 导入特定的 D3 组件 角6 我有一个对象 在本例中是一个角度指令 并在 SVG 画布上绘制一些圆圈 并希望它们在拖动事件上
  • “|”是什么意思(单管道)在 JavaScript 中做什么?

    console log 0 5 0 0 console log 1 0 1 console log 1 0 1 为什么0 5 0返回零 但任何整数 包括负数 都返回输入整数 单管道 有什么作用 这是一个按位或 https developer
  • ReactCSSTransitionGroup 组件WillLeave 未调用

    我尝试使用 ReactCssTransition 但不知何故该事件没有被调用 componentWillLeave 这是我的组件 import React Component from react import TransitionGrou
  • 如何知道浏览器空闲时间?

    如何跟踪浏览器空闲时间 我用的是IE8 我没有使用任何会话管理 也不想在服务器端处理它 这是纯 JavaScript 方法来跟踪空闲时间 并在达到一定限制时执行一些操作 var IDLE TIMEOUT 60 seconds var idl
  • 将 window.location 传递给 Flask url_for

    我正在使用 python 在我的页面上 当匿名用户转到登录页面时 我想将一个变量传递到后端 以便它指示用户来自哪里 发送 URL 因此 当用户单击此锚链接时 a href Sign in a 我想发送用户当前所在页面的当前 URL
  • 有没有办法伪造同步 XHR 请求?

    我正在使用 Emscripten 系统将一堆 C 代码移植到 Javascript C 代码有很多调用fopen这是一个同步 IO 调用 在 Emscripten 中 我们使用对本地资源的 XHR 请求来模拟这一点however 在 Fir
  • JavaScript Promise 不执行 .then()

    我在 JavaScript 中的 Promise 方面遇到了一些问题 我想做的是获得一个地址列表 然后对于每个地址 我需要调用地理编码 API 来获取 lat lng 然后我将继续将标记与热图一起绘制 这是我的代码 let promiseK
  • 如何使用 JavaScript 获取元素的填充值?

    我有一个textarea在我的 HTML 中 我需要获取整数或浮点形式的填充数值 以像素为单位 我如何使用 JavaScript 获取它 我没有使用 jQuery 所以我正在寻找纯 JavaScript 解决方案 这将返回padding l
  • 根据特定字符获取整个字符串或子字符串

    我有一个包含 MIME 类型的字符串 例如application json 现在我想将其与实际的 HTTP 标头进行比较 在本例中content type 如果标头包含 MIME 类型 那么就很简单 if mimeType contentT
  • Aurelia - 仅 HTML 自定义元素的内联定义

    我的 Aurelia 视图模型中有一个递归对象 如下所示 Class BottomlessPit Name string MorePits BottomlessPit null 因此 我想在 Aurelia 视图中使用递归模板 它只会在一个
  • Android 如何聚焦当前位置

    您好 我有一个 Android 应用程序 可以在谷歌地图上找到您的位置 但是当我启动该应用程序时 它从非洲开始 而不是在我当前的城市 国家 位置等 我已经在developer android com上检查了信息与位置问题有关 但问题仍然存在
  • Javascript onload 不起作用[关闭]

    这个问题不太可能对任何未来的访客有帮助 它只与一个较小的地理区域 一个特定的时间点或一个非常狭窄的情况相关 通常不适用于全世界的互联网受众 为了帮助使这个问题更广泛地适用 访问帮助中心 help reopen questions 我正在使用
  • Django 将 JSON 数据传递给静态 getJSON/Javascript

    我正在尝试从 models py 中获取数据并将其序列化为views py 中的 JSON 对象 模型 py class Platform models Model platformtype models CharField max len
  • 检测浏览器选项卡是否具有焦点

    是否有可靠的跨浏览器方法来检测选项卡是否具有焦点 场景是 我们有一个定期轮询股票价格的应用程序 如果页面没有焦点 我们可以停止轮询并为每个人节省流量噪音 特别是当人们喜欢打开具有不同投资组合的多个选项卡时 Is window onblur
  • JQuery 删除和内存泄漏

    我正在开发一个游戏 我看到了很多内存消耗 我使用jquery animate 动画完成后 我 remove 元素 我的问题是 从 dom 树中删除一个元素后 对象还存在记忆中吗 Javascript 是一种垃圾收集语言 这意味着当没有代码保

随机推荐

  • 导航栏中的复选框小部件闪亮

    是否可以在导航栏行中创建复选框小部件 这是一example http www bootply com 103995 我的想法 下面创建一个checkboxInput 但交互性似乎无法正常工作 library shiny ui lt navb
  • 类中的int是存储在栈上还是堆上? [复制]

    这个问题在这里已经有答案了 可能的重复 栈和堆理解问题 https stackoverflow com questions 2559271 stack heap understanding question 有人告诉我使用 var 真的很慢
  • 如何将可观察的响应投射到本地对象

    在当前的 Angular 6 应用程序中 有一个订阅 observable 来自 RESTful 服务的响应 this activatedRoute data subscribe bag gt console log bag this ba
  • Android发送大量短信

    我有一个应用程序 它会向中央服务器发送大量短信 每个用户每天可能会发送约 300 个文本 SMS 消息被用作网络层 因为 SMS 几乎无处不在 而移动互联网却不然 该应用程序旨在供许多移动互联网尚未普及的第三世界国家使用 当我达到 100
  • 最大限度地降低重新分配人员的成本

    我有属于不同类别的个人 他们位于不同的地方 区 这些人口预计将从population值低于 到demand value population and demand by category and zone lt tibble tribble
  • jQuery 选择更改显示/隐藏 div 事件

    我正在尝试创建一个表单 当选择选择元素 parcel 时 它将显示一个 div 但当未选择它时 我想隐藏该 div 这是我目前的标记 到目前为止 这是我的 HTML div class row Type div
  • 从 AOSP 编译电子邮件应用程序

    我想向 AOSP 电子邮件应用程序添加一些不再受支持的功能 所以我克隆了存储库here https github com android platform packages apps email 这是一个 Eclipse 项目 并将其迁移到
  • C++:防止多个函数同时执行

    我问这个问题是因为mutex我发现文档处理单个函数 我认为我的情况很常见 我的问题是以下代码是否不仅会阻止func1 OR func2 并行执行多次 但它是否也会阻止func1 AND func2 同时执行 include
  • 在 UITableView 标头中包含的 UIImageView 上设置accessibilityLabel

    我有一个UITableView我内置的loadView 我在做的事情之一loadView是创建一个UIView充当表头并填充UIImageView进去 图像视图包含作为风格化标题的图像 因此我想为 VoiceOver 用户添加辅助功能标签
  • 不要让 IE 选择并复制使用 jQuery .hide() 隐藏的表行

    我在数据表顶部有一个 jQuery 即时搜索栏 所有符合搜索条件的记录都将可见 row show 其余的都是隐藏的 row hide Problem 搜索后 我使用鼠标从搜索结果中选择 复制行列表并将其粘贴到 Excel 中 隐藏 记录也会
  • 使用 CSS 分布内联元素

    有没有一种简单的方法可以使用 CSS 在父块容器中分发内联元素 将边距设置为自动不起作用 因为内联元素之间的边距设置为 0 而且我不想弄乱百分比 因为内容是动态的 特别是 我在段落 p 中有几个锚元素 a 跨越其容器的 80 我正在寻找一种
  • 如何获取TextView的行距?

    有没有办法获得行间距TextView in Android 我尝试寻找fontMetrics of the Paint of the TextView并这样做 tv1 getPaint getFontMetrics pfm float fo
  • 如何在Android中加载大图像并避免内存不足错误?

    我正在开发一个使用大图像的应用程序 1390 870 150kb 50kb 我在点击触发器 ImageView 时添加图像 在某个时刻我遇到内存不足错误 java lang OutOfMemoryError E AndroidRuntime
  • 何时应该处理 ManualResetEvent?

    我正在使用一个使用 ManualResetEvent 同步线程的应用程序 FxCop 让我处理掉这些物品 我发现以下讨论告诉我同样的事情 我需要 Dispose 或 Close EventWaitHandle 吗 https stackov
  • 在指令链接功能中动态添加 ng-click

    我正在尝试创建一个指令 允许将元素定义为可点击或不可点击 并且定义如下
  • 我无法使用 C# 代码连接到 SQL Server 数据库 [关闭]

    Closed 这个问题需要调试细节 help minimal reproducible example 目前不接受答案 我试图创建注册表单 但是当我运行我的项目时收到此错误消息 抛出异常 System Data dll 中的 System
  • 启动时在 iOS 中启动位置感知后台服务

    应用程序可以注册重大位置变化 推荐 重大变化的定位服务提供了 低功耗方式接收位置数据 强烈推荐用于 不需要高精度位置数据的应用 有了这个 服务 仅当用户位置时才会生成位置更新 发生显着变化 因此 它非常适合社交应用或 为用户提供非关键的 位
  • 关于面向块的步骤与现实的 Spring Batch 文档?

    On the 文档 http docs spring io spring batch reference html configureStep htmlSpring Batch 的配置步骤清晰地描述了读取过程和写入是如何执行的 read p
  • GWT:在另一个模块内调用RPC服务

    我有一个模块B 它继承了模块A 当我从A内部调用RPC服务时 它们工作正常 但是当我在B中调用A的服务时 RPC调用总是失败 我错过了什么吗 预先感谢您的任何帮助 我在这里找到了我的问题的答案 http blog cloudglow com
  • 将谷歌地图标记颜色更改为我选择的颜色

    无论如何 是否可以从默认的红色标记颜色更改为我选择的十六进制颜色 我一直在寻找堆栈溢出 但似乎没有找到答案 这是我到目前为止所拥有的 var marker new google maps Marker position myLatLng l