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

【问题标题】：Google Maps - Insert markers by city name谷歌地图 - 按城市名称插入标记
【发布时间】：2013-09-26 18:34:24
【问题描述】：

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

是否可以用城市名称代替坐标？

我想在地图上显示超过 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>

【问题讨论】：

  • 请不要发布这么大的数组，更不用说澄清你的观点了:)
  • 我找到了这样一个代码。我不知道我能从中得到什么。 :D
  • 删除了答案，因为我显然完全误解了。我以为您想摆脱重复的标记，因此希望通过“仅城市名称”添加标记。我猜你问的是完全不同的东西：如何使用地理编码（？？），就像你在你的代码/示例中一样，但从未使用过。尝试改写您的问题并仅显示相关代码。

标签： javascript php ajax google-maps google-maps-api-3


【解决方案1】：

如果您希望代码使用来自城市的源数据，而不是坐标（对不起，问题不是很清楚，也许改写问题）。这可以通过反向地理编码查找来实现。 这里有一个 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]));
}

 })
} ;

【讨论】：

  • 为什么不描述只列出一次的城市。仅显示被提及 2 次或以上的内容。
  • 我认为那是因为它引用了不是服务器本地的图像，因此在测试中不可用。这是一个更新的 jsfiddle，添加了伦敦和指向 Google 的完整 URL 的“图像”地标。这是我更改的位... var image = new google.maps.MarkerImage ("labs.google.com/ridefinder/images/mm_20_blue.png",new google.maps. Size(40,35),new google.maps.Point(0,0),new google.maps.Point(20,35)); 更新 jsfiddle jsfiddle.net/sbnXE/1
  • 我把所有城市都放了，但是显示不正确。对不起，打扰您了。在这里，我把所有城市的鳕鱼。 jsfiddle.net/sbnXE/21
  • 我怀疑对于更多城市，您可能只想为每个位置运行一次地理编码，并将这些查找存储在服务器端的某个位置作为缓存。每次刷新页面时，继续进行这些查找并不是很有效。因此，代码最终可能看起来实际上就像您粘贴的原始源代码，但您可以像上面那样从之前的地理编码创建那些纬度/经度。
  • 这对于处理这个问题也很有用stackoverflow.com/questions/2419219/…
猜你喜欢
  • 2016-11-21
  • 2013-12-08
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2012-12-27
  • 2014-11-08
  • 2023-03-20
  • 1970-01-01
相关资源
最近更新 更多
热门标签
Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode