Google Maps API v3 处理大量数据

Google Maps API v3 处理大量数据鼠标，显示标记或画多边形。
几千上万条坐标数据，怎么优化。网上处理大量数据的是v2的。Google Maps性能优化

解决方案 »

免费领取超大流量手机卡，每月29元包185G流量+100分钟通话, 中国电信官方发货

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html>
<head>
<title>MyHtml.html</title> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8"> 
<script
src="http://extjs.cachefly.net/ext-4.0.7-commercial/ext-all.js">
</script>
<link rel="stylesheet"
href="http://extjs.cachefly.net/ext-4.0.7-commercial/resources/css/ext-all.css">
<script type="text/javascript" src="boot.js">
</script>

<link rel="stylesheet" type="text/css" href="example.css" />
<link rel="stylesheet" type="text/css" href="animated-dataview.css" /> <script type="text/javascript"
src="http://maps.google.com/maps/api/js?sensor=false">
</script>
<script type="text/javascript">
var s="";
var map;
var list=new Array();
function find(){
Ext.Ajax.request({
     url:'http://win-l294hjgbl7h:8080/FangWuExt/map/select!select',
     method:'post',
     params:{
     id:123,
     time:(new Date()).getTime()
     },
     success: function(req){
var jso = Ext.JSON.decode(req.responseText);
for(var i=0;i<jso.length;i++){
if(jso[i].commborder==null||jso[i].commborder=="") continue;
list=analyzeXY(jso[i].commborder);
//Mymaker(map,analyzeXY(jso[i].commborder));
Mypolyline('',map,list);
if(jso[i].commtype=='1'){
Mypolygon('', '#CC0099', list, map);
}else if(jso[i].commtype=='2'){

Mypolygon('', '#FF3300', list, map);
}else{
Mypolygon('', '#FFB200', list, map);
}

}

    },
     headers: {
       'my-header': 'foo'
     }
});
}function analyzeXY(s) {
var arr = new Array();
var ars = s.split(';');
for ( var i = 0; i < ars.length; i++) {
if (ars[i] == null || ars[i] == "")
continue;
var temp =ars[i].indexOf(',');
var lat = ars[i].substring(0, temp);
var lng = ars[i].substring(temp + 1);
arr.push(new google.maps.LatLng(lng, lat));
}
return arr;
}
Ext.onReady(function() {
init();});
function init(){
//地图
var er;
var poly;
var arr = new Array(); var mapwin = Ext.create('Ext.Window', {
id : 'win',
layout : 'fit',
title : 'GMap Window',
closeAction : 'hide',
width : 450,
height : 450,
x : 40,
y : 60 });
mapwin.show();
/* 加载地图 */
var latlng = new google.maps.LatLng();
latlng.jb = 39.9228027345;
latlng.kb = 116.509099275;
var myOptions = {
zoom : 14, //缩放级别
center : latlng, //坐标
mapTypeId : google.maps.MapTypeId.ROADMAP
//类型:默认的普通二维图块
};
map = new google.maps.Map(document.getElementById("win-body"),
myOptions);
}/*
* 创建折线
* */
function Mypolyline(strokeColor, map, data) {
// 线条设置
var polyOptions = {
strokeColor : '#FFE500', // 颜色
strokeOpacity : 1.0, // 透明度
strokeWeight : 1
// 宽度
}
poly = new google.maps.Polyline(polyOptions);
poly.setPath(data);
poly.setMap(map);} var infowindow = new google.maps.InfoWindow();
/**
* 创建标记
* */
function Mymaker(map, data) {
for ( var i = 0; i < data.length; i++) {

   var er = new google.maps.Marker( {
position : data[i],
map : map,
icon : "images/rss.gif"
});
google.maps.event.addListener(er, 'click',
function(event) {
/*
* 浮动窗口
* */
var temer=new google.maps.Marker( {
position : event.latLng
});
var contentString = '<div id="content">'+
    '<div id="siteNotice">'+
    '</div>'+
    '<h1 id="firstHeading" class="firstHeading">Uluru</h1>'+
    '<div id="bodyContent">'+
    '坐标：'+event.latLng+
    '</div>'+
    '</div>';
  infowindow.setContent(contentString);
  infowindow.open(map,temer);
//alert(event.latLng.lat() + ":" + event.latLng.lng());
}
)
}
}
/*http://labs.google.com/ridefinder/images/mm_20_green.png
* 创建多边
* */
function Mypolygon(strokeColor, fillColor, data, map) { /* 设置多边形 */
var polygon = {
strokeColor : "#FFFFFF",
strokeOpacity : 0.8,
strokeWeight : 3,
fillColor : fillColor,
fillOpacity : 1
} bermudaTriangle = new google.maps.Polygon(polygon);
var path = bermudaTriangle.setPath(data); //添加坐标
bermudaTriangle.setMap(map);
google.maps.event.addListener(bermudaTriangle, 'click',
function(event) {
alert(event.latLng.lat() + ":" + event.latLng.lng());
}
)

};
</script>
<script type="text/javascript">
</script> </head>
<body id="docbody"> <div id="map">
<input type="button" value="dianji" onclick="find()"/>
</div>
</body>
</html>这是我的代码。数据量这还很少才490条。jso[i].commborder 是区域坐标没个里面都有好几百个坐标
[116.552559271,39.9397727475;116.554259569,39.9399570630;116.554257072,39.9412712475;116.554257072,39.9412712475;116.555039289,39.9412422765;....]我都是循环里套循环，生成多边形的。怎么优化啊。效果出来后javascript 卡的要死。。
求大神优化！！！