2013-07-16 3 views
2

У меня есть координаты (Long & Lat), что у меня есть PHP, вставлять все из них, но я не знаю, как изменить javascript для исправления ошибки ограничения запроса ,Google Maps Over Query Limit, но есть Long и Lat

вот код:

<!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 (); и маркеры здесь: var content = new Array (); – 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 одинаковы, всплывающая подсказка показывает только одну. Я задал новый вопрос здесь: http://stackoverflow.com/questions/17685144/google-maps-multiple-markers-for-same-location-showing-only-one-tooltip-message. Я также пытаюсь понять, может изменить длинный/лат бит, чтобы компенсировать маркер (ы) и сделать его кликабельным. – msvuze

+1

Другой вариант - обнаружить их либо в вашей процедуре ввода при добавлении, либо в клиенте при добавлении маркера и использовать вкладку infoBubble для отображения данных для всех пользователей в этом месте на одном маркере. – geocodezip

Смежные вопросы