var mapData = [
{'latitude':30.67, 'longitude':104.07},
{'latitude':34.76, 'longitude':113.65},
{'latitude':29.65, 'longitude':91.13},
{'latitude':43.82, 'longitude':87.62}
]
 
series: [
//根据经纬度在地图上描点
{
type: 'effectScatter',
coordinateSystem: 'geo',
// animation: true,
rippleEffect: {
brushType: 'stroke'
},
symbolSize: function (val,params) {
return 30;
},
data: dmtData.map(function (itemOpt) {
return {
// name: itemOpt.name,
value: [
itemOpt.longitude,
itemOpt.latitude,
// itemOpt.value //数量
],
label: {
emphasis: {
position: 'right',
show: false
}
},
itemStyle: {
normal: {
// color: itemOpt.color //色值
color: RandomItemStylecolor()
}
}
};
}),
symbolSize: function (val) {
return 5;//描点的大小
},
}
]
 
-----------------------------------------------------------------------------------------------------
 

javaScript向对象数组赋值 存储以下格式的数据:

var mapData = [
{'latitude':30.67, 'longitude':104.07 , 'name':'四川', 'value':1, 'color':'#0394d9'},
{'latitude':34.76, 'longitude':113.65 , 'name':'河南', 'value':3, 'color':'#d94d02'},
{'latitude':29.65, 'longitude':91.13 , 'name':'西藏', 'value':4, 'color':'#b42fd5'},
{'latitude':43.82, 'longitude':87.62 , 'name':'新疆', 'value':5, 'color':'#0394d9'},
]

//改变成动态数据

$.ajax({
url: "xxxx.do",
type: "POST",
dataType: "json",
data: {
  treeId:86
},
success: function (data) {

var dmtData = [];

for (var i = 0; i < data.length; i++) {

latitude= data[i].latitude;
longitude= data[i].longitude;
dmtData.push({latitude:latitude,longitude:longitude});
}

}

})

echarts 根据经纬度坐标在地图上描点的更多相关文章

  1. ArcGIS API for JavaScript根据两个点坐标在地图上画线

    ArcGIS API for JavaScript根据两个点坐标在地图上画线比如说a(xxxx,xxxxx),b(xxxx,xxxxx).利用这两个点画一条线 var polyline = new e ...

  2. 根据HTML5 获取当前位置的经纬度【百度地图】【高德地图】

    是想让地图的定位用户位置更准确一些. 查看了介绍: http://www.w3school.com.cn/html5/html_5_geolocation.asp 看介绍中拿数据挺简单. <!D ...

  3. 百度地图 echarts tooltip属性 经纬度坐标不显示

    中国地图.散点图结合点击后显示当前城市数量 不显示经纬度坐标 echarts.appMap = function (id, opt) { // 实例 var chart = this.init(doc ...

  4. 插件~使用ECharts动态在地图上标识点

    ECharts可以很方便的在网页上绘制地图,图表,并且可以提供下载图像,放大,缩小,拖动等功能,今天主要说一下它的地图类型(type:'map')是如何实现的. 首先在ECharts地图的坐标需要我们 ...

  5. 根据地图上的两个点各自的x,y坐标,计算出2点之间的直线距离。显示为公里、米

    /** * calc_map_distance() , 根据地图上的两个点各自的x,y坐标,计算出2点之间的直线距离 * @param array $point_1 第1个点的x,y坐标 array( ...

  6. 【百度地图API】如何在地图上添加标注?——另有:坐标拾取工具+打车费用接口介绍

    原文:[百度地图API]如何在地图上添加标注?--另有:坐标拾取工具+打车费用接口介绍 摘要: 在这篇文章中,你将学会,如何利用百度地图API进行标注.如何使用API新增的打车费用接口. ------ ...

  7. 在echarts里在geojson绘制的地图上展示散点图(气泡)、线集。

    先来要实现的效果图: 下方图1是官网的案例:http://www.echartsjs.com/gallery/editor.html?c=scatter-map 下图2是展示气泡类型为pin的效果: ...

  8. C# 计算地图上某个坐标点的到多边形各边的距离

    在判断了某个坐标点是否在多边形内后,还有另一个需求就是当我这个坐标点在多边形外部时,我需要计算这个坐标点到多边形的距离是否在一个允许的误差范围内 通过两个位置的经纬度坐标计算距离(C#版本) 转自:h ...

  9. ol3对地图上某些特定的经纬度进行标注

    最终效果需要类似于这种 1.首先我们需要一个最基本的地图,这一步骤可以浏览该分类下的上一篇随笔. 2.ol3支持的文件格式有.geojson,我们需要将坐标制作成符合这种格式的样子才能被ol3识别并显 ...

随机推荐

  1. 图论——最短路:Floyd,Dijkstra,Bellman-Ford,SPFA算法及最小环问题

    一.Floyd算法 用于计算任意两个节点之间的最短路径. 参考了five20的博客 Floyd算法的基本思想如下:从任意节点A到任意节点B的最短路径不外乎2种可能,1是直接从A到B,2是从A经过若干个 ...

  2. awk、grep、sed

    awk.grep.sed是linux操作文本的三大利器,也是必须掌握的linux命令之一.三者的功能都是处理文本,但侧重点各不相同,其中属awk功能最强大,但也最复杂.grep更适合单纯的查找或匹配文 ...

  3. pwn学习日记Day18 《程序员的自我修养》读书笔记

    知识杂项 obj文件:当前源代码编译成二进制目标文件 exe文件:将.obj文件与库文件.lib等文件链接生成的可执行文件 一个现代编译器的主要工作流程如下: 源程序(source code)→ 预处 ...

  4. [GIT]比较不同分支的差异

        比如我们有 2 个分支:master, dev,现在想查看这两个 branch 的区别,有以下几种方式: undefined 1.查看 dev 有,而 master 中没有的: 1.查看 de ...

  5. Flutter移动电商实战 --(14)首页_拨打电话操作

    拨打电话的功能在app里也很常见,比如一般的外卖app都会有这个才做.其实Flutter本身是没给我们提供拨打电话的能力的,那我们如何来拨打电话那? 1.编写店长电话模块 这个小伙伴们一定轻车熟路了, ...

  6. mac下更新node版本

    node有一个专门管理node.js版本的包叫作:n: 查看当前 node版本:node -v 安装n工具包:sudo npm i -g n 安装最新版node.js:sudo n stable 安装 ...

  7. Swift 常量

    常量一旦设定,在程序运行时就无法改变其值. 常量可以是任何的数据类型如:整型常量,浮点型常量,字符常量或字符串常量.同样也有枚举类型的常量: 常量类似于变量,区别在于常量的值一旦设定就不能改变,而变量 ...

  8. Build Telemetry for Distributed Services之Elastic APM

    官网地址:https://www.elastic.co/guide/en/apm/get-started/current/index.html Overview Elastic APM is an a ...

  9. Ideal 报错之 Class ** is never used 解决办法

    错误信息: 解决办法: file  ------setting ---------inspections----------Groovy--------------Unuse Declaration  ...

  10. 用Keras搭建神经网络 简单模版(五)——RNN LSTM Regressor 循环神经网络

    # -*- coding: utf-8 -*- import numpy as np np.random.seed(1337) import matplotlib.pyplot as plt from ...