1

我找到了谷歌地图的代码，这很适合我。

是否有可能代替坐标包括城市名称？

我有 400 多个要在地图上显示的标记。在一些城市有不止一个。因此我喜欢这段代码，因为它打印了某个城市的多少个标记。

或者是否有其他代码可以帮助我？

<!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 image = new google.maps.MarkerImage("marker-images/image.png",new google.maps.Size(40,35),new google.maps.Point(0,0),new google.maps.Point(20,35));

                      var shadow = new google.maps.MarkerImage(
                        'marker-images/shadow.png',
                        new google.maps.Size(40,35),
                        new google.maps.Point(0,0),
                        new google.maps.Point(20,35)
                      );

                      var shape = {
                        coord: [27,0,30,1,32,2,34,3,35,4,36,5,38,6,39,7,39,8,39,9,39,10,38,11,37,12,33,13,34,14,34,15,33,16,32,17,31,18,27,19,28,20,28,21,27,22,26,23,22,25,23,26,24,27,24,28,24,29,24,30,24,31,24,32,23,33,22,34,17,34,16,33,15,32,15,31,14,30,14,29,15,28,15,27,16,26,17,25,13,23,12,22,11,21,11,20,12,19,8,18,7,17,6,16,5,15,5,14,6,13,2,12,1,11,0,10,0,9,0,8,0,7,1,6,3,5,4,4,5,3,7,2,9,1,12,0,27,0],
        type: 'poly'
      };



          // this variable will collect the html which will eventually be placed in the side_bar 
          var side_bar_html = ""; 

          // arrays to hold copies of the markers and html used by the side_bar 
          // because the function closure trick doesnt work there 
          var gmarkers = []; 

         // global "map" variable
          var map = null;
          var circle = null;

            //marker clusterer
            var mc;

                            var mcOptions = {gridSize: 20, maxZoom: 28};

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

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

                            var address = new Array(
                    "44.820325,20.463989",
                    "44.820325,20.463989",
                    "44.820325,20.463989",
                    "44.820325,20.463989",
                    "44.820325,20.463989",
                    "44.820325,20.463989",
                    "44.820325,20.463989",
                    "44.820325,20.463989",
                    "44.820325,20.463989",
                    "44.820325,20.463989",
                    "44.820325,20.463989",
                    "44.820325,20.463989",
                    "44.820325,20.463989",
                    "44.820325,20.463989",
                    "45.263772,19.851211",
                    "45.263772,19.851211",
                    "45.263772,19.851211",
                    "45.263772,19.851211",
                    "45.263772,19.851211",
                    "45.263772,19.851211",
                    "45.263772,19.851211",
                    "45.263772,19.851211",
                    "45.263772,19.851211",
                    "45.263772,19.851211",
                    "45.263772,19.851211",
                    "45.263772,19.851211",
                    "45.263772,19.851211",
                    "45.263772,19.851211",
                    "45.263772,19.851211",
                    "45.263772,19.851211",
                    "45.263772,19.851211",
                    "45.263772,19.851211",
                    "42.092745,19.090607",
                    "42.092745,19.090607",
                    "42.092745,19.090607",
                    "42.092745,19.090607",
                    "42.092745,19.090607",
                    "42.092745,19.090607",
                    "42.092745,19.090607",
                    "44.775011,17.195556",
                    "44.775011,17.195556",
                    "44.775011,17.195556",
                    "44.775011,17.195556",
                    "44.775011,17.195556",
                    "44.775011,17.195556",
                    "44.775011,17.195556",
                    "44.775011,17.195556",
                    "44.775011,17.195556",
                    "44.775011,17.195556",
                    "44.775011,17.195556",
                    "44.775011,17.195556",
                    "44.775011,17.195556",
                    "44.775011,17.195556",
                    "44.775011,17.195556",
                    "44.775011,17.195556",
                    "44.775011,17.195556",
                    "44.775011,17.195556",
                    "44.775011,17.195556",
                    "44.775011,17.195556",
                    "44.775011,17.195556",
                    "44.775011,17.195556",
                    "44.775011,17.195556",
                    "44.775011,17.195556",
                    "44.775011,17.195556",
                    "43.85644,18.412372",
                    "43.85644,18.412372",
                    "43.85644,18.412372",
                    "43.85644,18.412372",
                    "43.85644,18.412372",
                    "44.81107,18.062682",
                    "44.81107,18.062682",
                    "44.81107,18.062682",
                    "44.81107,18.062682",
                    "44.81107,18.062682",
                    "44.81107,18.062682",
                    "44.81107,18.062682",
                    "44.81107,18.062682",
                    "44.755998,19.212314",
                    "44.755998,19.212314",
                    "44.755998,19.212314",
                    "44.755998,19.212314",
                    "44.755998,19.212314",
                    "44.755998,19.212314",
                    "44.755998,19.212314",
                    "44.755998,19.212314",
                    "44.755998,19.212314",
                    "44.755998,19.212314",
                    "44.755998,19.212314",
                    "44.755998,19.212314",
                    "44.755998,19.212314",
                    "44.755998,19.212314",
                    "44.755998,19.212314",
                    "44.755998,19.212314",
                    "44.755998,19.212314",
                    "44.755998,19.212314",
                    "44.725028,17.323452",
                    "44.725028,17.323452",
                    "44.725028,17.323452",
                    "44.81789,15.879166",
                    "44.81789,15.879166",
                    "44.81789,15.879166",
                    "44.81789,15.879166",
                    "44.416801,17.082954",
                    "44.416801,17.082954",
                    "43.940583,18.078254",
                    "43.821276,17.608889",
                    "44.533778,18.531783",
                    "44.533778,18.531783",
                    "44.533778,18.531783",
                    "44.533778,18.531783",
                    "42.430616,18.700176",
                    "42.430616,18.700176",
                    "44.538795,18.673311",
                    "44.538795,18.673311",
                    "44.538795,18.673311",
                    "44.538795,18.673311",
                    "44.538795,18.673311",
                    "44.538795,18.673311",
                    "44.538795,18.673311",
                    "44.538795,18.673311",
                    "44.538795,18.673311",
                    "44.538795,18.673311",
                    "44.538795,18.673311",
                    "44.538795,18.673311",
                    "47.803931,16.232589",
                    "45.330185,14.442848",
                    "43.813906,18.569077",
                    "43.813906,18.569077",
                    "44.200913,17.915928",
                    "43.344281,17.812601",
                    "43.344281,17.812601",
                    "43.344281,17.812601",
                    "43.344281,17.812601",
                    "45.06079,18.468869",
                    "46.308521,16.338333",
                    "44.957206,18.302093",
                    "44.957206,18.302093",
                    "42.711453,18.343807",
                    "42.42493,18.771125",
                    "42.42493,18.771125",
                    "42.42493,18.771125",
                    "41.998284,21.428093",
                    "41.998284,21.428093",
                    "47.071057,15.437797",
                    "45.183791,16.805464",
                    "45.183791,16.805464",
                    "44.968806,15.94338",
                    "44.968806,15.94338",

                    "34.106,-83.589");
                            var content = new Array("Unit No# 0206",
                    "Unit No# #2003",
                    "Unit No# 0176",
                    "Unit No# #2001",
                    "Unit No# 0124",
                    "Unit No# 0157",
                    "Unit No# #0162",
                    "Unit No# 0104",
                    "Unit No# 0118",
                    "Unit No# #2007",
                    "Unit No# 0112",
                    "Unit No# 0139",
                    "Unit No# 0205",
                    "Unit No# 0127",
                    "Unit No# 0187",
                    "Unit No# 0105",
                    "Unit No# 0214",
                    "Unit No# 0186",
                    "Unit No# 0173",
                    "Unit No# 0134",
                    "Unit No# 0128",
                    "Unit No# 0125",
                    "Unit No# 0158",
                    "Unit No# 0193",
                    "Unit No# 0201");

        //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({
draggable: false,
raiseOnDrag: false,
icon: image,
shadow: shadow,
shape: shape,
position: latlng,
map: map
  });

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

  //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 (latlng.equals(pos)) {
        text = text + " & " + content[i];
      }                   
    }
  }

  google.maps.event.addListener(marker, 'click', function() {
    infowindow.close();
    infowindow.setContent(text);
    infowindow.open(map,marker);
  });
  mc.addMarker(marker);
  return marker;
}
function initialize(){
var options = { 
zoom: 6, 
center: new google.maps.LatLng(44.276671,18.71727), 
mapTypeId: google.maps.MapTypeId.ROADMAP 
};
map = new google.maps.Map(document.getElementById('map'), options); 

//marker cluster

var gmarkers = [];
mc = new MarkerClusterer(map, [], mcOptions);
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]));
}

}




      function codeAddress() {
        var address = document.getElementById('address').value;
        var radius = parseInt(document.getElementById('radius').value, 10) * 1609.34;
        geocoder.geocode( { 'address': address}, function(results, status) {
          if (status == google.maps.GeocoderStatus.OK) {
            map.setCenter(results[0].geometry.location);
            var marker = new google.maps.Marker({
        //        map: map,  <-- uncomment to show red marker
                position: results[0].geometry.location
            });
            if (circle) circle.setMap(null);
            circle = new google.maps.Circle({center:marker.getPosition(),
                                             radius: radius,
                                             fillOpacity: 0.35,
                                             fillColor: "#FF0000",
                                             map: map});
            var bounds = new google.maps.LatLngBounds();
        var foundMarkers = 0;
            for (var i=0; i<gmarkers.length;i++) {
              if (google.maps.geometry.spherical.computeDistanceBetween(gmarkers[i].getPosition(),marker.getPosition()) < radius) {
                bounds.extend(gmarkers[i].getPosition())
                gmarkers[i].setMap(map);
        foundMarkers++;
              } else {
                gmarkers[i].setMap(null);
              }
            }
            if (foundMarkers > 0) {
              map.fitBounds(bounds);
        } else {
              map.fitBounds(circle.getBounds());
            }


          } else {
            alert(status);
          }
        });
      }

var infowindow = new google.maps.InfoWindow(
  { 
    size: new google.maps.Size(150,50)
  });


function handleKeyPress(e){
 var key=e.keyCode || e.which;
  if (key==13){
     codeAddress();
  }
}




function handleResetKeyPress(e){

if (map.getZoom() != 6) map.setZoom(6);
    map.setCenter(new google.maps.LatLng(44.276671,18.71727));
    document.getElementById("address").value = 'Unesite ime grada ili drzave';
    document.getElementById("radius").value = '50';
}



</script> 
<style>
html, body, #map {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
.auto-style1 {
    text-align: center;
}
  #footer {
    position : absolute;
    bottom : 0;
    height : 40px;
    margin-top : 40px;
 /* border: 1px solid blue; */
  }
</style>
</head>
<body onload='initialize()'>
<div id="map"></div>
<div id="footer" class="auto-style1" style="left: 0px; bottom: 0; width: 100%">
      <input type="text" id="address" value="Unesite ime grada ili drzave" onclick="if(this.value=='Unesite ime grada ili drzave'){this.value=''}" onblur="if(this.value==''){this.value='Unesite ime grada ili drzave'}" onkeypress="handleKeyPress(event);" style="width: 183px">
      <input type="button" value="Search" onclick="codeAddress();">
      <input type="button" value="Reset" onclick="handleResetKeyPress();">
      <input type="text" id="radius" value="50" style="width: 42px" onclick="if(this.value=='50'){this.value=''}" onblur="if(this.value==''){this.value='50'}" onkeypress="handleKeyPress(event);"> miles
</div>
</body>
4

1 回答 1

3

如果您希望代码使用来自城市的源数据，而不是坐标（对不起，问题不是很清楚，也许改写问题）。这可以通过反向地理编码查找来实现。这里有一个 jsfiddle http://jsfiddle.net/sbnXE/ 可以在下面添加的关键更改代码...

注意：每页显示多个地理编码可能不是一个好主意，并且可能会导致问题，如下面的代码所示。我认为最好的方法可能是缓存以前的地理编码服务器端，然后使用该数据显示地标。

var cities = new Array(
    'Dorćol, Belgrade, Serbia',
    'Dorćol, Belgrade, Serbia',
    'Dorćol, Belgrade, Serbia',
    'Rome, Italy',
    'Rome, Italy');

var gmarkers = [];
mc = new MarkerClusterer(map, [], mcOptions);

for (i=0; i<cities.length; i++) {
 var ptStr = cities[i];
  var newAddress;

//Key Part Here!!! These should be cached somewhere rather than querying every page refresh like here though.
geocoder.geocode( { 'address': cities[i] }, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
    newAddress = results[0].geometry.location;
    var latlng = new google.maps.LatLng(parseFloat(newAddress.lat()),parseFloat(newAddress.lng()));
    gmarkers.push(createMarker(latlng,content[i]));
}

 })
} ;
于 2013-09-21T15:56:08.133 回答