问题对人有帮助，内容完整，我也想知道答案
问题没有实际价值，缺少关键内容，没有改进余地
我在用echarts做一个地图，地图的颜色有好多种，他有个默认的颜色，我想用红色的，怎么设置。而且我不要显示其他的工具，只显示一个地图而且是红色的，插件属性太多，第一次用，没有找到怎么弄，第二章图是我要的颜色，他是通过主题选择按钮选择的，我想直接设定它是红色。
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
参考areaStyle api,
另外两个重复的已关闭
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
不知道有没有理解对你的意思，想要改变地图的颜色可以这样做， 在 series 里面配置
itemStyle: {
areaStyle: {color:'red'}
同步到新浪微博
分享到微博？
Hi，欢迎来到 SegmentFault 技术社区！⊙▽⊙ 在这里，你可以提出编程相关的疑惑，关注感兴趣的问题，对认可的回答投赞同票；大家会帮你解决编程的问题，和你探讨技术更新，为你的回答投上赞同票。
明天提醒我
关闭理由：
删除理由：
忽略理由：
推广（招聘、广告、SEO 等）方面的内容
与已有问题重复（请编辑该提问指向已有相同问题）
答非所问，不符合答题要求
宜作评论而非答案
带有人身攻击、辱骂、仇恨等违反条款的内容
无法获得确切结果的问题
非开发直接相关的问题
非技术提问的讨论型问题
其他原因（请补充说明）
我要该，理由是：工作中遇到的有关echarts地图和百度地图的问题
*** 前言：在做项目中需要制作一个场景是左边是柱状图，右边是地图，地图上悬浮一个按钮可以切换echarts地图和百度地图。***
在点击左边柱状图其中的一条的时候再右边地图显示一些标记的点
echarts地图在鼠标悬停的时候回显示这个点上的公司信息，点击这个点的时候跳转到公司详情（都是自己做的页面）
百度地图在点击这个点的时候回弹出一个覆盖物，上面有公司名称和简介，点击公司名称的时候跳转到公司详情页
遇到的问题：
在点击不同的柱状图的条时，两个地图都是在原有的基础上增加点或者不变，而不是点击不同的条出现根据条给定的信息进行显示点（经检查发现数据是没问题的，每次点击传入的数据都是给定的条数）
如何给百度地图上的悬浮物上的label里的文字添加点击事件
解决方法：
echarts图表和百度地图如何制作请自行百度
echarts地图上改变点的位置，我每次都是更改数据之后使用echarts的setOption方法重新生成一下地图，发现确实是重新生成了，但是是在原来的基础上合并，并不是完全按照我给定的数据生成的地图上的坐标点（坐标点请查找API中的markPoint），原来还可以这样写setOption（option，notMerge），notMerge是一个布尔值，默认为false，也就是合并每次的option，只要改为true，选择被合并就OK了。
百度地图上的覆盖物也同样是出现，新的点出现，旧的点不走的情况，解决的方法就是在每次重新生成新的覆盖物之前添加一句map.clearOverlays();清除地图上的覆盖物就可以了。
给覆盖物上的文字添加事件我暂时没找到很好的方法，只有一个笨方法就是在地图上的点（marker）的点击事件里面，选择到那个文本标签元素添加‘click’事件，需要的一些数据提前通过自定义属性添加到这个文本标签上才可以实现这个点击事件，（我试过的方法有好多，就不一一列举了，我对百度地图的API确实不是很熟悉，如果有知道更简单的方法的小伙伴请教我一下）。
___ 我写的东西比较少，可能不能很好的描述清楚问题和解决方法，如果有不清楚的小伙伴欢迎留言联系我，看到后会尽快的回复你，我会尽量的帮助你 ___
阅读(...) 评论()4992人阅读
首先看下效果图实现各个城市的新用户数据量
下面赋上代码：$.ajax({
type : 'post',
url : &/datacenterframe/datacenter/report/getChinaMap&,
dataType : 'json',
success : function(result) {
if (result) {
var mapChart = &&;
var mapOption = &&;
// 路径配置 &
require.config({
echarts : '/build/dist'
[ 'echarts', 'echarts/chart/bar', // 使用柱状图就加载bar模块，按需加载 &
'echarts/chart/line', 'echarts/chart/map',
'echarts/chart/scatter',
'echarts/chart/k', 'echarts/chart/pie',
'echarts/chart/radar',
'echarts/chart/chord',
'echarts/chart/force', ],
function(ec) {
// 基于准备好的dom，初始化echarts图表 &
mapChart = ec.init(document
.getElementById('main')); & 在页面定义一个id为main的层
mapOption = {
// title : {
// text : '城市新用户',
// //subtext: 'data from PM25.in',
// //sublink: 'http://www.pm25.in',
// x : 'center'
tooltip : {
trigger : 'item'
legend : {
orient : 'vertical',
x : 'center',
data : [ '城市新用户' ]
dataRange : {
max : result.max, & 所有后台数据返回值中的最大值
calculable : true,
x: 'left',
color : [ 'maroon', 'purple',
'red', 'orange', 'yellow',
'lightgreen' ] &定义数据量从大到小的颜色深浅
toolbox : {
show : true,
orient : 'vertical',
x : 'right',
y : 'center',
feature : {
// mark : {show: true},
//dataView : {show: true, readOnly: false},
//restore : {show: true},
saveAsImage : {
show : true
series : [
name : '城市新用户',
type : 'map',
mapType : 'china',
hoverable : false,
roam : true,
itemStyle : {
normal : {
show : true
borderColor : '#5182ab',
areaStyle : {
color : '#b7a3df' & 定义地图的背景颜色
emphasis : {
show : true
borderColor : '#5182ab'
data : [],
markPoint : {
symbolSize : 5, // 标注大小，半宽（半径）参数，当图形为方向或菱形则总宽度为symbolSize * 2
itemStyle : {
normal : {
borderColor : '#87cefa',
borderWidth : 1, // 标注边线线宽，单位px，默认为1
show : false
emphasis : {
borderColor : '#1e90ff',
borderWidth : 5,
show : false
data : result.markPoints &后台返回所有城市的值
json格式：&markPoints&:[{&name&:&南京&,&value&:3094090},{&name&:&杭州&,&value&:654455},{&name&:&合肥&,&value&:531632},{&name&:&苏州&,&value&:443809},{&name&:&芜湖&,&value&:166802},{&name&:&重庆&,&value&:163609},{&name&:&常州&,&value&:163476},{&name&:&无锡&,&value&:159453},{&name&:&西安&,&value&:145025},{&name&:&昆山&,&value&:131996}]
geoCoord :
eval('('+result.geoCoord+')')
//JSON.parse(result.geoCoord)
所有需要展示城市的坐标值，等会下面我会把java代码赋上
& & & &格式如下：
// '南京' : [ 118.778074,
// 32.057236 ],
// '合肥' : [ 117.282699,
// 31.866942 ],
// '芜湖' : [ 118.384108,
// 31.36602 ],
// '杭州' : [ 120.219375,
// 30.259244 ],
// '常州' : [ 119.981861,
// 31.771397 ],
// '苏州' : [ 120.619907,
// 31.317987 ],
// '无锡' : [ 120.305456,
// 31.570037 ],
// '重庆' : [ 106.530635,
// 29.544606 ],
// //'西安' : [ 125.150149,
// // 42.986365 ],
// '西安' : [ 108.953098,
// & & & & 34.2778 ],
// '沈阳' : [ 123.432791,
// 41.808645 ],
// '昆山' : [ 120.965808,
// 31.328937 ],
// '上海' : [ 121.487899,
// 31.249162 ],
// '南通' : [ 120.873801,
// 32.014665 ],
// '盐城' : [ 120.148872,
// 33.379862 ],
// '镇江' : [ 119.455835,
// 32.204409 ],
// '扬州' : [ 119.427778,
// 32.408505 ],
// '徐州' : [ 117.188107,
// 34.271553 ],
// '泰州' : [ 119.919606,
// 32.476053 ],
// '淮安' : [ 119.030186,
// 33.606513 ],
// '成都' : [ 104.067923,
// 30.679943 ],
// '连云港' : [ 119.173872,
// 34.601549 ],
// '蚌埠' : [ 117.35708,
// 32.929499 ],
// '天津' : [ 117.210813,
// 39.14393 ],
// '安庆' : [ 117.058739,
// 30.537898 ],
// '马鞍山' : [ 118.515882,
// 31.688528 ],
// '宿迁' : [ 118.296893,
// 33.95205 ],
// '滁州' : [ 118.32457,
// 32.317351 ],
// '淮北' : [ 116.791447,
// 33.960023 ],
// '淮南' : [ 117.018639,
// 32.642812 ],
// '江阴' : [ 120.310679,
// 31.837425 ],
// '黄山' : [ 118.077546,
// 30.277746 ],
// '嘉兴' : [ 120.760428,
// 30.773992 ],
// '宜兴' : [ 119.790265,
// 31.362245 ],
// '长春' : [ 125.313642,
// 43.898338 ],
// '宿州' : [ 116.988692,
// 33.636772 ],
// '哈尔滨' : [ 126.657717,
// 45.773225 ]
name : 'Top5',
type : 'map',
mapType : 'china',
data : [],
markPoint : {
symbol : 'emptyCircle',
symbolSize : function(v) {
return 10 + v / 100000 这边有个特别注意的点，这里100000要自己设置，根据你最大数据量级设定比如我最大城市数据量是3094090所以我设置了除以100000，假如你设置小的话，top5的覆盖圈会变的异常大，大家可以手动设置下玩玩，当然我上面的图没有展示top5的效果，因为我下面注释掉了
effect : {
show : true,
shadowBlur : 0
itemStyle : {
normal : {
show : false
//result.topMarkPoints & 展示top5，把前5名的城市值传递到前台
// 为echarts对象加载数据 &&
mapChart.setOption(mapOption);
error : function(errMsg) {
console.error(&加载数据失败&);
好，下面赋上查询城市经纬度的方法
定义经纬度实体类
public class Coordinate {
public Object getLatitude() {
public void setLatitude(Object latitude) {
this.latitude =
public Object getLongitude() {
public void setLongitude(Object longitude) {
this.longitude =
public static Coordinate getCity(String address, String city)
& & & & & & & & & & &建议传入地址address，city可以传空，实际测试效果，如果你是城市名称南京也可以把它作为地址传入
throws IOException {
Coordinate coordinate = new Coordinate();
URL url = new URL(&http://api./geocoder?& + ak + &=您的密钥&
+ &&callback=renderOption&address=& + address + &&city& + city
+ &&output=json&);
ak是密钥可到百度地图官方网站获取
URLConnection connection = url.openConnection();
* 然后把连接设为输出模式。URLConnection通常作为输入来使用，比如下载一个Web页。
* 通过把URLConnection设为输出，你可以把数据向你个Web页传送。下面是如何做：
connection.setDoOutput(true);
OutputStreamWriter out = new OutputStreamWriter(
connection.getOutputStream(), &utf-8&);
// remember to clean up
out.flush();
out.close();
// 一旦发送成功，用以下方法就可以得到服务器的回应：
InputStream l_urlS
l_urlStream = connection.getInputStream();
BufferedReader in = new BufferedReader(new InputStreamReader(
l_urlStream, &UTF-8&));
StringBuilder sb = new StringBuilder(&&);
while ((res = in.readLine()) != null) {
sb.append(res.trim());
String str = sb.toString();
// 用经度分割返回的网页代码
String s = &,& + &\&& + &lat& + &\&& + &:&;
String strs[] = str.split(s, 2);
String s1 = &\&& + &lng& + &\&& + &:&;
String a[] = strs[0].split(s1, 2);
//System.out.println(&lat& + a[1]);
s1 = &}& + &,& + &\&&;
//System.out.println(&hhhhhhhhhhhhhhhhhh& + address);
String a1[] = &
//System.out.println(&lng& + a1[0]);
a1 = strs[1].split(s1, 2);
} catch (ArrayIndexOutOfBoundsException e) {
// TODO: handle exception
//未知错误数据.直接返回
coordinate.setLatitude(a[1]);
coordinate.setLongitude(a1[0]);
大家觉得有啥问题，可以提出来，我们可以一起学习一起探讨。
&&相关文章推荐
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：8497次
排名：千里之外
原创：14篇
(1)(1)(3)(8)(1)}