google-maps - 谷歌地图超出查询限制但有经度和纬度

标签 google-maps google-maps-api-3 google-maps-markers

我有坐标(长和纬度)，我让 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>

谢谢!

最佳答案

如果您有这些点的纬度和经度，请勿使用地理编码器。

<!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

关于google-maps - 谷歌地图超出查询限制但有经度和纬度，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/17682181/

上一篇：模型上的 AngularJS 多个验证器

下一篇：java - Guava缓存的RemovalListener是否同步？

相关文章：

mysql - 找到一个点的 x 距离附近有多少(googlemap)多边形

java - 根据当前位置缩放标记位置android

angularjs - 如何使用 angularjs 在 ngMap 中使用硬编码值绘制多边形

google-maps - Google map V3 信息框始终位于中心

google-maps - 我可以更改 Google map 嵌入 map (iframe) 中的标记吗？

javascript - 从map.data类获取标记使用geojson谷歌地图

android - 使用集群管理器在 map 上添加新标记不会反射(reflect)更改，直到我放大和缩小 map

google-maps-api-3 - 显示多个 Google 路线的演示 (Google Maps API v3)

javascript - 计算地理位置距离返回 NaN

iphone - MKAnnotationView 的不同字体

©2024 IT工具网  联系我们