87,989
社区成员
发帖
与我相关
我的任务
分享google maps api诡异事件
请问高手，我在用google apiv2做一个电子地图，每次运行的时候，地图读取都非常缓慢，而且只显示上半部1/3，把图往上拖拽能显示下面的2/3，往下一拖拽又没了。。请问这是啥情况。。。求条思路。。
...全文
请发表友善的回复…
发表回复
bane_chen 2012-04-13
- 打赏
- 举报
搜索引擎：
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=GB2312" />
<link rel="stylesheet" type="text/css" href="style.css"></link>
<script
src="http://ditu.google.com/maps?file=api&v=2&key=ABQIAAAAzr2EBOXUKnm_jVnk0OJI7xSosDVG8KKPE1-m51RBrvYughuyMxQ-i1QfUnH94QxWIa6N4U6MouMmBA&hl=zh-CN"
type="text/javascript"></script>
<style type="text/css">
@import url("http://www.google.com/uds/css/gsearch.css");
@import url("http://www.google.com/uds/solutions/localsearch/gmlocalsearch.css");
#top ul li{
float:left;
padding:3px 8px;
}
#top {
width:100%;
border-bottom:1px #666 solid;
clear:both;
height:20px;
}
#addHotelMap {
border : 1px solid #979797;
width :79%;
height : 500px;
float:left;
}
#searchResult {
border : 1px solid #979797;
width : 45%;
height : 570px;
float:left;
overflow-y:scroll;
padding:5px;
}
#searchResult div{
padding:5px 0;
color:#333;
}
ul,li{
margin:0;
padding:0;
list-style:none;
}
body{
color:#999;
font-size:12px;
height:98%;
}
h1{
color:#666;
padding:0;
margin:0;
font-size:14px;
line-height:22px;
height:22px;
}
#schollContainer div.list{
background:url("scholl.png") no-repeat left;
padding-left:20px;
}
</style>
<script type="text/javascript">
var cenx = 23.139531;
var ceny = 113.331259;
var stzoom = 13;
var map;
var curr = 2;
var markers = [];
function Getgeo(current_page){
//var url = "maps.kml";
//GDownloadUrl(url, onTypeData);
if(current_page < 0)
curr = curr + current_page+1;
else if(current_page > 0)
curr = curr + current_page;
//alert(curr);
var search_value = document.getElementById('search_address').value;
var search_center = document.getElementById('search_center').value;
var request = GXmlHttp.create();
if(current_page == 0)
request.open("GET", "http://ditu.google.cn/maps?output=kml&hl=zh-CN&q=" + search_value + "&near="+search_center+"&start=0", true);
else
request.open("GET", "http://ditu.google.cn/maps?output=kml&hl=zh-CN&q=" + search_value + "&near="+search_center+"&start="+((curr)*10), true);
//request.open("GET", "http://ditu.google.cn/maps?f=q&source=s_q&hl=zh-CN&geocode=&q=%E5%B0%8F%E5%AD%A6&sll=23.129075,113.264423&sspn=1.270442,2.463684&g=%E5%B9%BF%E4%B8%9C%E7%9C%81%E5%B9%BF%E5%B7%9E%E5%B8%82&ie=UTF8&z=9&brcurrent=3,0x3402f895a35c2bc7:0xe59e075adeae415%3B5,0", true);
request.onreadystatechange = function() {
if (request.readyState == 4) {
onTypeData(request.responseText);
}
}
request.send(null);
}
window.selectMarker = function(i){
GEvent.trigger(markers[i], 'click');
}
window.onTypeData = function(data){
var xml = GXml.parse(data);
var result="";
var placemarks = xml.documentElement.getElementsByTagName("Placemark");
markers= [];
map.clearOverlays();
for (var i = 0; i < placemarks.length; i++) {
//debugger;
var placemark_objs = placemarks[i].childNodes;
var placemark_styles = placemark_objs[3].childNodes;
var text = placemark_styles[1].childNodes[1];
var point = new GLatLng(placemark_objs[4].nodeTypedValue.split(",")[1], placemark_objs[4].nodeTypedValue.split(",")[0]);
var icon = new GIcon();
icon.iconSize = new GSize(36, 51);
icon.image = "images/schools.png";
icon.iconAnchor = new GPoint(18, 51);
icon.infoWindowAnchor = new GPoint(10, 6);
var marker = new GMarker(point, {
icon: icon,
title: placemark_objs[0].nodeTypedValue
});
marker.point = point;
marker.text = text;
map.addOverlay(marker);
markers.push(marker);
GEvent.addListener(marker, "click", GEvent.callbackArgs(this, openInfoWindow, marker));
result = result +"<br> " +
"<a href=\"javascript:selectMarker("+i+")\">" +
"名称:"+ placemark_objs[0].nodeTypedValue +
"; 地址:"+ placemark_objs[2].nodeTypedValue +
"; 坐标:"+ placemark_objs[4].nodeTypedValue + "</a>"+
"<br>";
}
result = result + "<a href=\"javascript:Getgeo(-2)\">" + (curr-1) + "</a> , " +
"<a href=\"javascript:Getgeo(-1)\">" + curr + "</a> , " +
"<a href=\"javascript:Getgeo(1)\">" + (curr+1) + "</a> , " +
"<a href=\"javascript:Getgeo(2)\">" + (curr+2) + "</a>";
document.getElementById('schollContainer').innerHTML = result;
}
function openInfoWindow(marker){
var tabs = [];
var imgHtml = "<div style='width:400px;font-size:13px;'>"+marker.text.nodeTypedValue+"</div>";
var infoHtml = "<div style='width:400px;font-size:13px;'>"+marker.ia.title+"</div>";
tabs.push(new GInfoWindowTab("信息", infoHtml));
tabs.push(new GInfoWindowTab("图片", imgHtml));
marker.openInfoWindowTabsHtml(tabs);
}
function init(){
//检查浏览器的兼容性.
if (GBrowserIsCompatible()){
debugger;
map=new GMap2(document.getElementById("map_canvas"));
//设置地图的中心坐标.
var loc = new GLatLng(cenx,ceny);
map.setCenter(loc,stzoom);
//创建带有可在四个方向平移、放大、缩小的按钮，以及缩放滑块的控件。
map.addControl(new GLargeMapControl());
//创建带有切换地图类型的按钮的控件。
map.addControl(new GMapTypeControl());
}
}
//初始化地图
window.onload=init;
//卸载地图
window.onunload=GUnload;
</script>
</head>
<body>
<!-- 地图画板 -->
搜索内容： <input type="text" name="search_address" id="search_address" />
搜索中心： <input type="text" name="search_center" id="search_center" />
<input type="button" value="搜索" onclick="Getgeo(0)" />
<div id="searchResult">
搜索结果：<div id="schollContainer"></div>
</div>
<div id="map_canvas" style="width:640px; height:480px ;float:left;"></div>
</body>
</html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=GB2312" />
<link rel="stylesheet" type="text/css" href="style.css"></link>
<script
src="http://ditu.google.com/maps?file=api&v=2&key=ABQIAAAAzr2EBOXUKnm_jVnk0OJI7xSosDVG8KKPE1-m51RBrvYughuyMxQ-i1QfUnH94QxWIa6N4U6MouMmBA&hl=zh-CN"
type="text/javascript"></script>
<style type="text/css">
@import url("http://www.google.com/uds/css/gsearch.css");
@import url("http://www.google.com/uds/solutions/localsearch/gmlocalsearch.css");
#top ul li{
float:left;
padding:3px 8px;
}
#top {
width:100%;
border-bottom:1px #666 solid;
clear:both;
height:20px;
}
#addHotelMap {
border : 1px solid #979797;
width :79%;
height : 500px;
float:left;
}
#searchResult {
border : 1px solid #979797;
width : 45%;
height : 570px;
float:left;
overflow-y:scroll;
padding:5px;
}
#searchResult div{
padding:5px 0;
color:#333;
}
ul,li{
margin:0;
padding:0;
list-style:none;
}
body{
color:#999;
font-size:12px;
height:98%;
}
h1{
color:#666;
padding:0;
margin:0;
font-size:14px;
line-height:22px;
height:22px;
}
#schollContainer div.list{
background:url("scholl.png") no-repeat left;
padding-left:20px;
}
</style>
<script type="text/javascript">
var cenx = 23.139531;
var ceny = 113.331259;
var stzoom = 13;
var map;
var curr = 2;
var markers = [];
function Getgeo(current_page){
//var url = "maps.kml";
//GDownloadUrl(url, onTypeData);
if(current_page < 0)
curr = curr + current_page+1;
else if(current_page > 0)
curr = curr + current_page;
//alert(curr);
var search_value = document.getElementById('search_address').value;
var search_center = document.getElementById('search_center').value;
var request = GXmlHttp.create();
if(current_page == 0)
request.open("GET", "http://ditu.google.cn/maps?output=kml&hl=zh-CN&q=" + search_value + "&near="+search_center+"&start=0", true);
else
request.open("GET", "http://ditu.google.cn/maps?output=kml&hl=zh-CN&q=" + search_value + "&near="+search_center+"&start="+((curr)*10), true);
//request.open("GET", "http://ditu.google.cn/maps?f=q&source=s_q&hl=zh-CN&geocode=&q=%E5%B0%8F%E5%AD%A6&sll=23.129075,113.264423&sspn=1.270442,2.463684&g=%E5%B9%BF%E4%B8%9C%E7%9C%81%E5%B9%BF%E5%B7%9E%E5%B8%82&ie=UTF8&z=9&brcurrent=3,0x3402f895a35c2bc7:0xe59e075adeae415%3B5,0", true);
request.onreadystatechange = function() {
if (request.readyState == 4) {
onTypeData(request.responseText);
}
}
request.send(null);
}
window.selectMarker = function(i){
GEvent.trigger(markers[i], 'click');
}
window.onTypeData = function(data){
var xml = GXml.parse(data);
var result="";
var placemarks = xml.documentElement.getElementsByTagName("Placemark");
markers= [];
map.clearOverlays();
for (var i = 0; i < placemarks.length; i++) {
//debugger;
var placemark_objs = placemarks[i].childNodes;
var placemark_styles = placemark_objs[3].childNodes;
var text = placemark_styles[1].childNodes[1];
var point = new GLatLng(placemark_objs[4].nodeTypedValue.split(",")[1], placemark_objs[4].nodeTypedValue.split(",")[0]);
var icon = new GIcon();
icon.iconSize = new GSize(36, 51);
icon.image = "images/schools.png";
icon.iconAnchor = new GPoint(18, 51);
icon.infoWindowAnchor = new GPoint(10, 6);
var marker = new GMarker(point, {
icon: icon,
title: placemark_objs[0].nodeTypedValue
});
marker.point = point;
marker.text = text;
map.addOverlay(marker);
markers.push(marker);
GEvent.addListener(marker, "click", GEvent.callbackArgs(this, openInfoWindow, marker));
result = result +"<br> " +
"<a href=\"javascript:selectMarker("+i+")\">" +
"名称:"+ placemark_objs[0].nodeTypedValue +
"; 地址:"+ placemark_objs[2].nodeTypedValue +
"; 坐标:"+ placemark_objs[4].nodeTypedValue + "</a>"+
"<br>";
}
result = result + "<a href=\"javascript:Getgeo(-2)\">" + (curr-1) + "</a> , " +
"<a href=\"javascript:Getgeo(-1)\">" + curr + "</a> , " +
"<a href=\"javascript:Getgeo(1)\">" + (curr+1) + "</a> , " +
"<a href=\"javascript:Getgeo(2)\">" + (curr+2) + "</a>";
document.getElementById('schollContainer').innerHTML = result;
}
function openInfoWindow(marker){
var tabs = [];
var imgHtml = "<div style='width:400px;font-size:13px;'>"+marker.text.nodeTypedValue+"</div>";
var infoHtml = "<div style='width:400px;font-size:13px;'>"+marker.ia.title+"</div>";
tabs.push(new GInfoWindowTab("信息", infoHtml));
tabs.push(new GInfoWindowTab("图片", imgHtml));
marker.openInfoWindowTabsHtml(tabs);
}
function init(){
//检查浏览器的兼容性.
if (GBrowserIsCompatible()){
debugger;
map=new GMap2(document.getElementById("map_canvas"));
//设置地图的中心坐标.
var loc = new GLatLng(cenx,ceny);
map.setCenter(loc,stzoom);
//创建带有可在四个方向平移、放大、缩小的按钮，以及缩放滑块的控件。
map.addControl(new GLargeMapControl());
//创建带有切换地图类型的按钮的控件。
map.addControl(new GMapTypeControl());
}
}
//初始化地图
window.onload=init;
//卸载地图
window.onunload=GUnload;
</script>
</head>
<body>
<!-- 地图画板 -->
搜索内容： <input type="text" name="search_address" id="search_address" />
搜索中心： <input type="text" name="search_center" id="search_center" />
<input type="button" value="搜索" onclick="Getgeo(0)" />
<div id="searchResult">
搜索结果：<div id="schollContainer"></div>
</div>
<div id="map_canvas" style="width:640px; height:480px ;float:left;"></div>
</body>
</html>
bane_chen 2012-04-13
- 打赏
- 举报
css样式：
div, p, ul, li{
margin:0;
border:0;
padding:0;
}
#map{
float: right;
border:solid #999 1px;
}
#wrapper{
float: left;
font-size:13px;
width:250px;
}
.tab-head a {
display:block;
color:#fff;
}
.tab-head a:hover {
background:#FFF;
color:#000000;
}
.quick-search
{
margin:2px 10px 0 0;
border:solid #999999 1px;
color:#999999;
width: 14em;
line-height: 25px;
}
.city{
margin:3px;
cursor:pointer;
}
/*tab*/
.tab-head{
overflow:auto;
}
.tab-item{
text-align:center;
float:left;
padding:1px 3px;
cursor:pointer;
color:#0000FF;
border-right: solid #CCD9F2 1px;
}
.active-tab{
font-weight:bold;
text-decoration:none;
}
.tab-content{
display:none;
}
#tabHead a, #tabHead a:link, #tabHead a:visited, #tabHead a:active {
color: #fff;
}
#tabHead a {
line-height: 25px;
width: 34px;
text-decoration: none;
text-align: center;
display: -moz-inline-stack;
display: inline-block;
zoom: 1;
*display: inline;
}
#tabHead a:hover
{
color: #000;
}
#tabHead a.selected, #tabHead a.selected:link, #tabHead a.selected:visited, #tabHead a.selected:active
{
font-weight: bold;
color: #ff0;
}
#tabHead a.selected:hover
{
color: #000;
}
#map
{
width: 100%;
}
#listContainer
{
width: 100%;
overflow: auto;
}
#listContainer ul li
{
line-height:23px;
text-decoration:none;
color:#000;
display:block;
padding:0 0 0 25px;
background-image: url(img/tree.png);
background-repeat: no-repeat;
background-position: left;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #e9e9e9;
}
#listContainer ul li.over
{
font-weight: bold;
cursor: pointer;
background-color: #ffe9df;
background-image: url(img/tree0.png);
background-repeat: no-repeat;
background-position: left;
}
#cityList a
{
line-height: 20px;
padding: 0px 4px;
text-decoration: none;
display: -moz-inline-stack;
display: inline-block;
zoom: 1;
*display: inline;
}
#cityList a:hover
{
color: #ff3333;
}
#cityList a.selected
{
font-weight: bold;
background-color: #9900FF;
color: #fff;
}
.m3f,.m4f{font-size:1px;overflow:hidden;display:block;height:1px;}
.m4f {margin:0 1px; border-right: 1px solid #FA0903; border-left: 1px solid #FA0903; background-color: #FA0903;}
.m3f {background:#FA0903; margin:0 2px;}
.m2f {border-right: 1px solid #FA0903 ; border-left: 1px solid #FA0903 ; background-color: #FA0903;}
div, p, ul, li{
margin:0;
border:0;
padding:0;
}
#map{
float: right;
border:solid #999 1px;
}
#wrapper{
float: left;
font-size:13px;
width:250px;
}
.tab-head a {
display:block;
color:#fff;
}
.tab-head a:hover {
background:#FFF;
color:#000000;
}
.quick-search
{
margin:2px 10px 0 0;
border:solid #999999 1px;
color:#999999;
width: 14em;
line-height: 25px;
}
.city{
margin:3px;
cursor:pointer;
}
/*tab*/
.tab-head{
overflow:auto;
}
.tab-item{
text-align:center;
float:left;
padding:1px 3px;
cursor:pointer;
color:#0000FF;
border-right: solid #CCD9F2 1px;
}
.active-tab{
font-weight:bold;
text-decoration:none;
}
.tab-content{
display:none;
}
#tabHead a, #tabHead a:link, #tabHead a:visited, #tabHead a:active {
color: #fff;
}
#tabHead a {
line-height: 25px;
width: 34px;
text-decoration: none;
text-align: center;
display: -moz-inline-stack;
display: inline-block;
zoom: 1;
*display: inline;
}
#tabHead a:hover
{
color: #000;
}
#tabHead a.selected, #tabHead a.selected:link, #tabHead a.selected:visited, #tabHead a.selected:active
{
font-weight: bold;
color: #ff0;
}
#tabHead a.selected:hover
{
color: #000;
}
#map
{
width: 100%;
}
#listContainer
{
width: 100%;
overflow: auto;
}
#listContainer ul li
{
line-height:23px;
text-decoration:none;
color:#000;
display:block;
padding:0 0 0 25px;
background-image: url(img/tree.png);
background-repeat: no-repeat;
background-position: left;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #e9e9e9;
}
#listContainer ul li.over
{
font-weight: bold;
cursor: pointer;
background-color: #ffe9df;
background-image: url(img/tree0.png);
background-repeat: no-repeat;
background-position: left;
}
#cityList a
{
line-height: 20px;
padding: 0px 4px;
text-decoration: none;
display: -moz-inline-stack;
display: inline-block;
zoom: 1;
*display: inline;
}
#cityList a:hover
{
color: #ff3333;
}
#cityList a.selected
{
font-weight: bold;
background-color: #9900FF;
color: #fff;
}
.m3f,.m4f{font-size:1px;overflow:hidden;display:block;height:1px;}
.m4f {margin:0 1px; border-right: 1px solid #FA0903; border-left: 1px solid #FA0903; background-color: #FA0903;}
.m3f {background:#FA0903; margin:0 2px;}
.m2f {border-right: 1px solid #FA0903 ; border-left: 1px solid #FA0903 ; background-color: #FA0903;}
bane_chen 2012-04-13
- 打赏
- 举报
不是呀。。一开始我也这么认为，把缓存也清了，但是不管在哪都这毛病，附代码求救
index.html代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:v="urn:schemas-microsoft-com:vml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GB2312" />
<link rel="stylesheet" type="text/css" href="style.css" />
<title>map</title>
</head>
<body>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td valign="top" style="padding-right:10px">
<div id="wrapper">
<div class="panel-head">
<input type="text" value="请输入搜索的内容" id="quickSearch"
class="quick-search" />
<br />
</div>
<p id="cityList">
城市：
</p>
<b class="m3f"></b><b class="m4f"></b>
<div class="tab-head m2f" id="tabHead">
</div>
<b class="m4f"></b><b class="m3f"></b>
<div class="list-container" id="listContainer">
</div>
</div>
</td>
<td width="100%">
<div id="map"></div>
</td>
</tr>
</table>
</body>
<script
src="http://ditu.google.cn/maps?file=api&v=2&key=ABQIAAAAWiwS8Thr2h3A0aAWbsVr6RTqQ5WtUwE0C8FR1hRk-yj3qFOmhhSS6EEGlT9fwZ6efygHIbHMQmag0g"></script>
<script type="text/javascript" src="init.js"></script>
<script type="text/javascript" src="initcity.js"></script>
<script type="text/javascript" src="initdata.js"></script>
</html>
*********************************************************************************
index.html代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:v="urn:schemas-microsoft-com:vml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GB2312" />
<link rel="stylesheet" type="text/css" href="style.css" />
<title>map</title>
</head>
<body>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td valign="top" style="padding-right:10px">
<div id="wrapper">
<div class="panel-head">
<input type="text" value="请输入搜索的内容" id="quickSearch"
class="quick-search" />
<br />
</div>
<p id="cityList">
城市：
</p>
<b class="m3f"></b><b class="m4f"></b>
<div class="tab-head m2f" id="tabHead">
</div>
<b class="m4f"></b><b class="m3f"></b>
<div class="list-container" id="listContainer">
</div>
</div>
</td>
<td width="100%">
<div id="map"></div>
</td>
</tr>
</table>
</body>
<script
src="http://ditu.google.cn/maps?file=api&v=2&key=ABQIAAAAWiwS8Thr2h3A0aAWbsVr6RTqQ5WtUwE0C8FR1hRk-yj3qFOmhhSS6EEGlT9fwZ6efygHIbHMQmag0g"></script>
<script type="text/javascript" src="init.js"></script>
<script type="text/javascript" src="initcity.js"></script>
<script type="text/javascript" src="initdata.js"></script>
</html>
*********************************************************************************
Rommel_Gao 2012-04-13
- 打赏
- 举报
是不是因为网速太慢了
