2013-07-16 36 views
2

我有座標(長&拉特),我有PHP插入所有這些,但我不知道如何更改JavaScript以糾正超限查詢限制錯誤。谷歌地圖超過查詢限制,但有長和緯

這裏是代碼:

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8"/> 
<title></title> 
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> 
<script type="text/javascript" src="markerclusterer.js"></script> 

<script type="text/javascript"> 
     var map; 

     //marker clusterer 
     var mc; 
     var mcOptions = {gridSize: 20, maxZoom: 17}; 

     //global infowindow 
     var infowindow = new google.maps.InfoWindow(); 

     //geocoder 
     var geocoder = new google.maps.Geocoder(); 

     var address = new Array(<?php echo(substr($point_str, 0, -2));?>); 

     var content = new Array(<?php echo(substr($marker_str, 0, -2));?>); 

     //min and max limits for multiplier, for random numbers 
     //keep the range pretty small, so markers are kept close by 
     var min = .999999; 
     var max = 1.000001; 

     function createMarker(latlng,text) { 

      ///get array of markers currently in cluster 
      var allMarkers = mc.getMarkers(); 

      //final position for marker, could be updated if another marker already exists in same position 
      var finalLatLng = latlng; 

      //check to see if any of the existing markers match the latlng of the new marker 
      if (allMarkers.length != 0) { 

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

        var existingMarker = allMarkers[i]; 
        var pos = existingMarker.getPosition(); 

        //if a marker already exists in the same position as this marker 
        if (latlng.equals(pos)) { 

         //update the position of the coincident marker by applying a small multipler to its coordinates 
         var newLat = latlng.lat() * (Math.random() * (max - min) + min); 
         var newLng = latlng.lng() * (Math.random() * (max - min) + min); 

         finalLatLng = new google.maps.LatLng(newLat,newLng); 

        }     
       } 
      } 

      var marker = new google.maps.Marker({ 
       position: finalLatLng 
      });  

      google.maps.event.addListener(marker, 'click', function() { 
       infowindow.close(); 
       infowindow.setContent(text); 
       infowindow.open(map,marker); 
      }); 

      return marker; 
     } 

function geocodeAddress(address,i) { 

geocoder.geocode({'address': address}, function(results, status) { 

if (status == google.maps.GeocoderStatus.OK) 

{ 
var marker = createMarker(results[0].geometry.location,content[i]); mc.addMarker(marker); 
} 

else 

{ 
alert("Geocode was not successful for the following reason: " + status); 
} 
}); 
} 

function initialize(){ 
var options = { 
zoom: 4, 
center: new google.maps.LatLng(39.8282,-98.5795), 
mapTypeId: google.maps.MapTypeId.ROADMAP 
}; 
map = new google.maps.Map(document.getElementById('map'), options); 

//marker cluster 
mc = new MarkerClusterer(map, [], mcOptions); 

for (i=0; i<address.length; i++) { 
geocodeAddress(address[i],i); 
} 
} 
</script> 
<style> 
html, body, #map { 
height: 100%; 
width: 100%; 
margin: 0; 
padding: 0; 
} 
</style> 
</head> 
<body onload='initialize()'> 
<div id="map"></div> 
</body> 
</html> 

這是HTML輸出:

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8"/> 
<title></title> 
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> 
<script type="text/javascript" src="markerclusterer.js"></script> 

<script type="text/javascript"> 
     var map; 

     //marker clusterer 
     var mc; 
     var mcOptions = {gridSize: 20, maxZoom: 17}; 

     //global infowindow 
     var infowindow = new google.maps.InfoWindow(); 

     //geocoder 
     var geocoder = new google.maps.Geocoder(); 

     var address = new Array("42.0619,-72.2136", 
"28.06,-81.9561", 
"30.3375,-81.7686", 
"30.3375,-81.7686", 
"41.7684,-88.1366", 
"28.06,-81.9561", 
"40.086,-82.486", 
"40.6278,-79.0896", 
"39.0197,-84.5914", 
"41.8119,-87.6873", 
"28.06,-81.9561", 
"42.8698,-85.9697", 
"42.8358,-85.6644", 
"41.0309,-92.4098", 
"39.1024,-94.5986", 
"33.6115,-84.3745", 
"34.84,-115.967", 
"33.0807,-81.9868", 
"41.7369,-73.7411", 
"41.9214,-87.8924"); 

     var content = new Array("UnitNo1", 
"UnitNo2", 
"UnitNo3", 
"UnitNo4", 
"UnitNo5", 
"UnitNo6", 
"UnitNo7", 
"UnitNo8", 
"UnitNo9", 
"UnitNo10", 
"UnitNo11", 
"UnitNo12", 
"UnitNo13", 
"UnitNo14", 
"UnitNo15", 
"UnitNo16", 
"UnitNo17", 
"UnitNo18", 
"UnitNo19", 
"UnitNo20"); 

     //min and max limits for multiplier, for random numbers 
     //keep the range pretty small, so markers are kept close by 
     var min = .999999; 
     var max = 1.000001; 

     function createMarker(latlng,text) { 

      ///get array of markers currently in cluster 
      var allMarkers = mc.getMarkers(); 

      //final position for marker, could be updated if another marker already exists in same position 
      var finalLatLng = latlng; 

      //check to see if any of the existing markers match the latlng of the new marker 
      if (allMarkers.length != 0) { 

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

        var existingMarker = allMarkers[i]; 
        var pos = existingMarker.getPosition(); 

        //if a marker already exists in the same position as this marker 
        if (latlng.equals(pos)) { 

         //update the position of the coincident marker by applying a small multipler to its coordinates 
         var newLat = latlng.lat() * (Math.random() * (max - min) + min); 
         var newLng = latlng.lng() * (Math.random() * (max - min) + min); 

         finalLatLng = new google.maps.LatLng(newLat,newLng); 

        }     
       } 
      } 

      var marker = new google.maps.Marker({ 
       position: finalLatLng 
      });  

      google.maps.event.addListener(marker, 'click', function() { 
       infowindow.close(); 
       infowindow.setContent(text); 
       infowindow.open(map,marker); 
      }); 

      return marker; 
     } 

function geocodeAddress(address,i) { 

geocoder.geocode({'address': address}, function(results, status) { 

if (status == google.maps.GeocoderStatus.OK) 

{ 
var marker = createMarker(results[0].geometry.location,content[i]); mc.addMarker(marker); 
} 

else 

{ 
alert("Geocode was not successful for the following reason: " + status); 
} 
}); 
} 

function initialize(){ 
var options = { 
zoom: 4, 
center: new google.maps.LatLng(39.8282,-98.5795), 
mapTypeId: google.maps.MapTypeId.ROADMAP 
}; 
map = new google.maps.Map(document.getElementById('map'), options); 

//marker cluster 
mc = new MarkerClusterer(map, [], mcOptions); 

for (i=0; i<address.length; i++) { 
geocodeAddress(address[i],i); 
} 
} 
</script> 
<style> 
html, body, #map { 
height: 100%; 
width: 100%; 
margin: 0; 
padding: 0; 
} 
</style> 
</head> 
<body onload='initialize()'> 
<div id="map"></div> 
</body> 
</html> 

謝謝!

+0

它可能是答案已經在這裏:http://stackoverflow.com/questions/3529746/over-query-limit-while-using-google-maps – devbnz

+0

如果你有點的緯度和經度,不要使用地理編碼器。但是,我沒有看到代碼中包含座標的任何地方。 – geocodezip

+0

@geocodezip他們通過.PHP插入器var address = new Array(<?php echo(substr($ point_str,0,-2));?>); 和這裏的標記:var content = new Array(<?php echo(substr($ marker_str,0,-2));?>); – msvuze

回答

2

如果您有經度和緯度的點,請不要使用地理編碼器。

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8"/> 
<title></title> 
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> 
<script type="text/javascript" src="http://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerclustererplus/src/markerclusterer.js"></script> 


<script type="text/javascript"> 
     var map; 

     //marker clusterer 
     var mc; 
     var mcOptions = {gridSize: 20, maxZoom: 17}; 

     //global infowindow 
     var infowindow = new google.maps.InfoWindow(); 

     //geocoder 
     var geocoder = new google.maps.Geocoder(); 

     var address = new Array("42.0619,-72.2136", 
"28.06,-81.9561", 
"30.3375,-81.7686", 
"30.3375,-81.7686", 
"41.7684,-88.1366", 
"28.06,-81.9561", 
"40.086,-82.486", 
"40.6278,-79.0896", 
"39.0197,-84.5914", 
"41.8119,-87.6873", 
"28.06,-81.9561", 
"42.8698,-85.9697", 
"42.8358,-85.6644", 
"41.0309,-92.4098", 
"39.1024,-94.5986", 
"33.6115,-84.3745", 
"34.84,-115.967", 
"33.0807,-81.9868", 
"41.7369,-73.7411", 
"41.9214,-87.8924"); 

     var content = new Array("UnitNo1", 
"UnitNo2", 
"UnitNo3", 
"UnitNo4", 
"UnitNo5", 
"UnitNo6", 
"UnitNo7", 
"UnitNo8", 
"UnitNo9", 
"UnitNo10", 
"UnitNo11", 
"UnitNo12", 
"UnitNo13", 
"UnitNo14", 
"UnitNo15", 
"UnitNo16", 
"UnitNo17", 
"UnitNo18", 
"UnitNo19", 
"UnitNo20"); 

     //min and max limits for multiplier, for random numbers 
     //keep the range pretty small, so markers are kept close by 
     var min = .999999; 
     var max = 1.000001; 

     function createMarker(latlng,text) { 

      var marker = new google.maps.Marker({ 
       position: latlng, 
      map: map 
      });  

      google.maps.event.addListener(marker, 'click', function() { 
       infowindow.close(); 
       infowindow.setContent(text); 
       infowindow.open(map,marker); 
      }); 

      return marker; 
     } 

function initialize(){ 
    var options = { 
    zoom: 4, 
    center: new google.maps.LatLng(39.8282,-98.5795), 
    mapTypeId: google.maps.MapTypeId.ROADMAP 
    }; 
    map = new google.maps.Map(document.getElementById('map'), options); 

    var gmarkers = []; 
    for (i=0; i<address.length; i++) { 
    var ptStr = address[i]; 
    var coords = ptStr.split(","); 
    var latlng = new google.maps.LatLng(parseFloat(coords[0]),parseFloat(coords[1]));    
    gmarkers.push(createMarker(latlng,content[i])); 
    } 

    //marker cluster 
    mc = new MarkerClusterer(map, gmarkers, mcOptions); 
} 
</script> 
<style> 
html, body, #map { 
    height: 100%; 
    width: 100%; 
    margin: 0; 
    padding: 0; 
    } 
</style> 
</head> 
<body onload='initialize()'> 
<div id="map"></div> 
</body> 
</html> 

working example

+0

太棒了! :)謝謝geocodezip! :) 謝謝! – msvuze

+0

我發現了一個小問題:如果long和lat是相同的,則tooltip只顯示一個。我在這裏問了一個新問題http://stackoverflow.com/questions/17685144/google-maps-multiple-markers-for-same-location-showing-only-one-tooltip-message我也想看看我是否可以改變長/拉一點點,以抵消標記並使其可點擊。 – msvuze

+1

另一種方法是在添加標記時在添加或添加到客戶端的輸入例程中檢測它們,並使用標籤的infoBubble在單個標記上顯示該位置的所有用戶的數據。 – geocodezip

相關問題