简单描述下运用echarts地图时遇到的几个问题

首先看下效果图实现各个城市的新用户数据量

下面赋上代码：$.ajax({
type : 'post',
url : "/datacenterframe/datacenter/report/getChinaMap",
dataType : 'json',
data : {


},
success : function(result) {
if (result) {


var mapChart = "";
var mapOption = "";
// 路径配置  
require.config({
paths : {
echarts : 'http://echarts.baidu.com/build/dist'
}
});


//使用  
require(
[ '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 : {
min : 0,
max : result.max,   所有后台数据返回值中的最大值
calculable : true,
x: 'left',
y: 'top',
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 : {
label : {
show : true
},
borderColor : '#5182ab',
areaStyle : {
color : '#b7a3df'   定义地图的背景颜色
}
},
emphasis : {
label : {
show : true
},
borderColor : '#5182ab'
}
},
data : [],
markPoint : {
symbolSize : 5, // 标注大小，半宽（半径）参数，当图形为方向或菱形则总宽度为symbolSize * 2
itemStyle : {
normal : {
borderColor : '#87cefa',
borderWidth : 1, // 标注边线线宽，单位px，默认为1
label : {
show : false
}
},
emphasis : {
borderColor : '#1e90ff',
borderWidth : 5,
label : {
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 : {
label : {
show : false
}
}
},
data : 
[]
//result.topMarkPoints   展示top5，把前5名的城市值传递到前台
}
} ]
};


// 为echarts对象加载数据   
mapChart.setOption(mapOption);


});


}
},
error : function(errMsg) {
console.error("加载数据失败");
}
});

好，下面赋上查询城市经纬度的方法

定义经纬度实体类

public class Coordinate {
private Object latitude;

private Object longitude;


public Object getLatitude() {
return latitude;
}


public void setLatitude(Object latitude) {
this.latitude = latitude;
}


public Object getLongitude() {
return longitude;
}


public void setLongitude(Object longitude) {
this.longitude = longitude;
}


}

public static Coordinate getCity(String address, String city)

                     建议传入地址address，city可以传空，实际测试效果，如果你是城市名称南京也可以把它作为地址传入
throws IOException {
Coordinate coordinate = new Coordinate();

URL url = new URL("http://api.map.baidu.com/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();
// 一旦发送成功，用以下方法就可以得到服务器的回应：
String res;
InputStream l_urlStream;
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[] =  null;
//System.out.println("lng" + a1[0]);
try {
a1 = strs[1].split(s1, 2);
} catch (ArrayIndexOutOfBoundsException e) {
// TODO: handle exception
//未知错误数据.直接返回
return coordinate;
}



coordinate.setLatitude(a[1]);
coordinate.setLongitude(a1[0]);
return coordinate;


}

大家觉得有啥问题，可以提出来，我们可以一起学习一起探讨。