douju2012 2013-09-21 12:23
浏览 70
已采纳

Google地图 - 按城市名称插入标记

I found this code for Google map, and that suits me.

Is it possible that instead of the coordinates include the name of the city?

I have over 400 markers that I want to display on the map. In some cities have more than one. Therefore I like this code because it prints how many markers in some city.

Or if there is some other code that could help me?

<!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>
  • 写回答

1条回答 默认 最新

  • doulongdan2264 2013-09-21 15:56
    关注

    If you are wanting the code to work with source data from cities, rather than co-ords (sorry the question isn't very clear, maybe rephrase the question). This is possible with a reverse geocode lookup. There's a jsfiddle here http://jsfiddle.net/sbnXE/ The key changed code that can be added in below...

    Note: multiple geocoding per page display is likely a bad idea and could cause problems as in the code below. I think the best method would probabably be to cache up previous geocoding server side, and then use that data to display placemarks. 

    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]));
}

 })
} ;
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论

报告相同问题？

悬赏问题

  • ¥60 版本过低apk如何修改可以兼容新的安卓系统
  • ¥25 由IPR导致的DRIVER_POWER_STATE_FAILURE蓝屏
  • ¥50 有数据，怎么建立模型求影响全要素生产率的因素
  • ¥50 有数据，怎么用matlab求全要素生产率
  • ¥15 TI的insta-spin例程
  • ¥15 完成下列问题完成下列问题
  • ¥15 C#算法问题, 不知道怎么处理这个数据的转换
  • ¥15 YoloV5 第三方库的版本对照问题
  • ¥15 请完成下列相关问题！
  • ¥15 drone 推送镜像时候 purge: true 推送完毕后没有删除对应的镜像,手动拷贝到服务器执行结果正确在样才能让指令自动执行成功删除对应镜像，如何解决？