当前位置：文江博客话题详情

JavaScript google-maps geomap

如何设置谷歌地理地图上的区域颜色？

发布于 2024-08-30 02:45:36 字数 66 浏览 9 评论 0原文

可以为地理地图设置颜色吗？

我还想听取社区关于地理编码解决方案替代方案的意见。

谢谢。

收藏 0

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

评论（4）

万劫不复 2024-09-06 02:45:36

可以设置地理地图中使用的区域的颜色。此 API 页面解释了所有内容：

http://code.google.com/ apis/visualization/documentation/gallery/geomap.html

回复收藏 0 原文

鱼窥荷 2024-09-06 02:45:36

使用版本 3 的地理地图（截至 2014 年 1 月 8 日）- 颜色从红色渐变为蓝色。

您可以在此处测试以下代码：

function drawVisualization() {
  var data = google.visualization.arrayToDataTable([
     ['Country', 'Borat Sightings'],
     ['United States', 3],
     ['United Kingdom', 4],
     ['Kazakhstan', 7]
  ]);
  var options = {
        colors: [0xff0000, 0x0000ff]
      };

  var geomap = new google.visualization.GeoMap(
      document.getElementById('visualization'));
  geomap.draw(data, options);
}

另外， MapBox 是 googlemaps / geomap 的替代品。

With version3 of geomap (as of 8Jan2014) - color fade from red to blue.

You can test the following code here:

function drawVisualization() {
  var data = google.visualization.arrayToDataTable([
     ['Country', 'Borat Sightings'],
     ['United States', 3],
     ['United Kingdom', 4],
     ['Kazakhstan', 7]
  ]);
  var options = {
        colors: [0xff0000, 0x0000ff]
      };

  var geomap = new google.visualization.GeoMap(
      document.getElementById('visualization'));
  geomap.draw(data, options);
}

Also, MapBox is an alternative to googlemaps / geomap.

回复收藏 0 原文

定格我的天空 2024-09-06 02:45:36

作为选项对象的一部分，传递您想要的颜色的十六进制。例如
options['colors']=[0XEBEBEB,0XA3D5F8];
将为您提供这两种颜色作为基础。

回复收藏 0 原文

树深时见影 2024-09-06 02:45:36

您可以自定义国家、世界地图、甚至背景的颜色。还
查看：

 private void functionMap() {

                    "<html xmlns=\"http://www.w3.org/1999/xhtml\"><head><meta http-equiv=\"Content-Type\" content=\"text/html,width=device-width,user-scalable=yes; charset=windows-1252\">\n" +
                    "    <script type=\"text/javascript\" src=\"https://www.google.com/jsapi\"></script>\n" +
                    "    <script type=\"text/javascript\">\n" +
                    "     google.load('visualization', '1', {'packages': ['geochart']});\n" +
                    "     google.setOnLoadCallback(drawRegionsMap);\n" +
                    "\n" +
                    "      function drawRegionsMap() {\n" +
                    "        var data = google.visualization.arrayToDataTable([\n" +
                    "          ['Country', ''],\n"




                    "        ]);\n" +
                    "\n" +
                    "        var options = {};\n" +
                    "\t\toptions = { \n" +
                    "                    datalessRegionColor: '#29ABE2',\n" +
                    "\t\t\t\t    backgroundColor: '#F3F3F3',\n" +
                    "\t\t\t\t\tcolorAxis: {colors: ['#0071BC']},\n" +
                    "                    keepAspectRatio: false,                    \n" +
                    "                    legend: false,\n" +
                    "                    tooltip: { textStyle: { color: '#0099CB', fontName: 'Arial', fontSize: '10'} }\n" +
                    "                };\n" +
                    "\t\t\n" +
                    "        var chart = new google.visualization.GeoChart(document.getElementById('chart_div'));\n" +
                    "        chart.draw(data, options);\n" +
                    "    };\n" +
                    "    </script>\n" +
                    "  </head>\n" +
                    "  <body>\n" +
                    "  <div id=\"chart_div\" style=\"width: 100%; height: 100%;\"><div style=\"position: relative;\"><div dir=\"ltr\" style=\"position: relative; width: 100%; height: 100%;\"><div style=\"position: absolute; left: 0px; top: 0px; width: 100%; height: 100%;\"></div></div></div></div>\n" +
                    "  \n" +
                    "</body></html>";

}

You can customize the colors of country, world map, even background. Also
check:

 private void functionMap() {

                    "<html xmlns=\"http://www.w3.org/1999/xhtml\"><head><meta http-equiv=\"Content-Type\" content=\"text/html,width=device-width,user-scalable=yes; charset=windows-1252\">\n" +
                    "    <script type=\"text/javascript\" src=\"https://www.google.com/jsapi\"></script>\n" +
                    "    <script type=\"text/javascript\">\n" +
                    "     google.load('visualization', '1', {'packages': ['geochart']});\n" +
                    "     google.setOnLoadCallback(drawRegionsMap);\n" +
                    "\n" +
                    "      function drawRegionsMap() {\n" +
                    "        var data = google.visualization.arrayToDataTable([\n" +
                    "          ['Country', ''],\n"




                    "        ]);\n" +
                    "\n" +
                    "        var options = {};\n" +
                    "\t\toptions = { \n" +
                    "                    datalessRegionColor: '#29ABE2',\n" +
                    "\t\t\t\t    backgroundColor: '#F3F3F3',\n" +
                    "\t\t\t\t\tcolorAxis: {colors: ['#0071BC']},\n" +
                    "                    keepAspectRatio: false,                    \n" +
                    "                    legend: false,\n" +
                    "                    tooltip: { textStyle: { color: '#0099CB', fontName: 'Arial', fontSize: '10'} }\n" +
                    "                };\n" +
                    "\t\t\n" +
                    "        var chart = new google.visualization.GeoChart(document.getElementById('chart_div'));\n" +
                    "        chart.draw(data, options);\n" +
                    "    };\n" +
                    "    </script>\n" +
                    "  </head>\n" +
                    "  <body>\n" +
                    "  <div id=\"chart_div\" style=\"width: 100%; height: 100%;\"><div style=\"position: relative;\"><div dir=\"ltr\" style=\"position: relative; width: 100%; height: 100%;\"><div style=\"position: absolute; left: 0px; top: 0px; width: 100%; height: 100%;\"></div></div></div></div>\n" +
                    "  \n" +
                    "</body></html>";

}

回复收藏 0 原文

~没有更多了~

关于作者

暂无简介

0 文章

0 评论

24 人气

关注发私信

相关话题

热门标签

操作系统程序设计 IT运维 Linux系统管理 JavaScript 服务器应用 solaris C/C++ PHP Shell BSD Vue.js aix Oracle Python HTML 系统管理 HTML5 CSS 前端

推荐作者

尘世孤行

文章 0 评论 0

烟─花易冷

文章 0 评论 0

你是年少的欢喜

文章 0 评论 0

倒带

文章 0 评论 0

忱杏

文章 0 评论 0

送君千里

文章 0 评论 0

友情链接

我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的隐私政策了解更多相关信息。单击 接受 或继续使用网站，即表示您同意使用 Cookies 和您的相关数据。

原文