文档章节

highmaps绘制用户分布地图

mahengyang
 mahengyang
发布于 2016/11/01 15:07
字数 374
阅读 327
收藏 0

记录下使用highmaps绘制用户地图的过程 首先看效果 国内用户地图

官方文档写的不清楚,很多配置项没有标明,比如设置用户点的颜色以及透明度

marker: {
    fillColor: 'rgba(255,0,0,0.1)',
    radius: 9
},

rgba函数设定颜色,红、绿、蓝、透明度,最大255,透明度最大1 地图可以在 highmaps地图列表 找到,其中的中国地图里省市都是拼音,把它下载下来全部替换为中文即可

全部代码如下

<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
    <script src="https://code.highcharts.com/maps/highmaps.js"></script>
    <script src="https://code.highcharts.com/mapdata/countries/cn/custom/cn-all-sar-taiwan.js"></script>
    <script src="http://cdnjs.cloudflare.com/ajax/libs/proj4js/2.2.2/proj4.js"></script>
    <style type="text/css">
        #container {
            height: 1000px;
            min-width: 800px;
            max-width: 1000px;
            margin: 0 auto;
        }

        .loading {
            margin-top: 10em;
            text-align: center;
            color: gray;
        }
    </style>

    <script type="text/javascript">
        $(function () {
            $('#container').highcharts('Map', {
                credits: {enabled: false},
                title: {text: '全国用户分布地图'},
                tooltip: {pointFormat: '纬度:{point.lat}<br>' + '经度:{point.lon}<br>'},
                series: [{
                    // 图层1 地图
                    mapData: Highcharts.maps['countries/cn/custom/cn-all-sar-taiwan'],
                    name: 'Basemap',
                    borderColor: '#A0A0A0',
                    nullColor: 'rgba(200, 200, 200, 0.3)',
                    showInLegend: false,
                    joinBy: 'hc-key',
                    dataLabels: { // 显示各个省份的名字
                        enabled: true,
                        color: 'rgba(0,0,0,0.3)',
                        format: '{point.name}',
                        zIndex: -1
                    }
                }, {
                    // 图层2 用户描点
                    type: "mappoint",
                    name: "用户",
                    marker: {
                        fillColor: 'rgba(256,0,0,0.1)', // 设置点的颜色,透明度是0.1
                        radius: 9, // 设置点大小
                    },
                    showInLegend: false,
                    data: [{
                        lat: 39.5427,
                        lon: 116.2317
                    }, {
                        lat: 39.4427,
                        lon: 114.2317
                    }, {
                        lat: 39.3427,
                        lon: 116.5317
                    }, {
                        lat: 39.2427,
                        lon: 116.2317
                    }, {
                        lat: 39.1427,
                        lon: 115.2317
                    }]
                }]
            });
        });
    </script>
</head>
<body>
<div id="container"></div>
</body>
</html>

© 著作权归作者所有

mahengyang
粉丝 57
博文 46
码字总数 32090
作品 0
南京
程序员
私信 提问
Highmaps网页图表教程之Highmaps第一个实例与图表构成

Highmaps网页图表教程之Highmaps第一个实例与图表构成 Highmaps第一个实例 下面我们来实现本教程的第一个Highmaps实例。 【实例1-1:hellomap】下面来制作一个中国地图的图表。操作过程如下:...

大学霸
2015/08/13
2.5K
0
Highmaps网页图表教程之下载Highmaps与Highmaps的地图类型

Highmaps网页图表教程之下载Highmaps与Highmaps的地图类型 认识Highmaps Highmaps是Highcharts的姊妹框架,用来实现地图图表。它完全使用Javascript编写实现。其结构清晰,使用简单。开发人员...

大学霸
2015/08/13
889
0
Highmaps网页图表教程之图表配置项结构与商业授权

Highmaps网页图表教程之图表配置项结构与商业授权 Highmaps图表配置项结构 Highmaps最核心的部分就是图表配置项。用户通过图表配置项来对标题进行定制,从而实现自己所要的效果。所以,掌握图...

大学霸
2015/08/17
196
0
Highmaps网页图表教程之数据标签与标签文本

Highmaps网页图表教程之数据标签与标签文本 Highmaps数据标签 数据标签用于在地图图表上展现节点对应的数据。数据标签展现数据是静态的,只要节点一加载,数据标签就会出现在节点附近。在Hig...

大学霸
2015/08/17
313
0
关于highmaps标签显示的问题

@大学霸 你好,想跟你请教个问题: 我最近在使用highmaps制作网页版的中国地图,需要在地图上显示若干个城市点。这些城市点都是mappoint类型,现在我想让这些城市点的标签在我鼠标放在点上的...

haoyuanqiang
2016/08/07
186
0

没有更多内容

加载失败,请刷新页面

加载更多

rime设置为默认简体

转载 https://github.com/ModerRAS/ModerRAS.github.io/blob/master/_posts/2018-11-07-rime%E8%AE%BE%E7%BD%AE%E4%B8%BA%E9%BB%98%E8%AE%A4%E7%AE%80%E4%BD%93.md 写在开始 我的Arch Linux上......

zhenruyan
今天
5
0
简述TCP的流量控制与拥塞控制

1. TCP流量控制 流量控制就是让发送方的发送速率不要太快,要让接收方来的及接收。 原理是通过确认报文中窗口字段来控制发送方的发送速率,发送方的发送窗口大小不能超过接收方给出窗口大小。...

鏡花水月
今天
9
0
OSChina 周日乱弹 —— 别问,问就是没空

Osc乱弹歌单(2019)请戳(这里) 【今日歌曲】 @tom_tdhzz :#今日歌曲推荐# 分享容祖儿/彭羚的单曲《心淡》: 《心淡》- 容祖儿/彭羚 手机党少年们想听歌,请使劲儿戳(这里) @wqp0010 :周...

小小编辑
今天
959
11
golang微服务框架go-micro 入门笔记2.1 micro工具之micro api

micro api micro 功能非常强大,本文将详细阐述micro api 命令行的功能 重要的事情说3次 本文全部代码https://idea.techidea8.com/open/idea.shtml?id=6 本文全部代码https://idea.techidea8....

非正式解决方案
今天
5
0
Spring Context 你真的懂了吗

今天介绍一下大家常见的一个单词 context 应该怎么去理解,正确的理解它有助于我们学习 spring 以及计算机系统中的其他知识。 1. context 是什么 我们经常在编程中见到 context 这个单词,当...

Java知其所以然
昨天
7
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部