Google Maps API v3多个可点击标记

我试图在Google地图上放置多个标记，但是使它们每个指向一个URL。我把所有的标记放在一个循环中，但只有最后一个被执行。我希望他们都能工作。这是我的代码：Google Maps API v3多个可点击标记

<script type="text/javascript"> 
      function initialize() { 

       var json = [ 
        { 
        "title": "title1", 
        "lat": 46.077428, 
        "lng": 18.229837 

        }, 
        { 
        "title": "title2", 
        "lat": 46.042229, 
        "lng": 18.227134 

        }, 
        { 
        "title": "title3", 
        "lat": 46.082831, 
        "lng": 18.225911 

        }, 
        { 
        "title": "title4", 
        "lat": 46.092058, 
        "lng": 18.185645 

        }, 
        { 
        "title": "title5", 
        "lat": 46.075493, 
        "lng": 18.22885, 
        "description": "some description to the 5th element", 
        "url": "http://www.pannon-home.hu/" 
        }, 
        { 
        "title": "title6", 
        "lat": 46.075344, 
        "lng": 18.227713, 
        "description": "some description to the 6th element", 
        "url": "http://www.pannon-home.hu/" 
        } 
       ] 

       var latlng = new google.maps.LatLng(46.071325, 18.233185); 
       var myOptions = { 
        zoom: 12, 
        center: latlng, 
        mapTypeId: google.maps.MapTypeId.ROADMAP     
       }; 
       var firstmap = new google.maps.Map(document.getElementById("allmap"),myOptions); 
       for (var i = 0, length = json.length; i < length; i++) { 
        var data = json[i], 
         latLng = new google.maps.LatLng(data.lat, data.lng); 
        // Creating a marker and putting it on the map 
        var marker = new google.maps.Marker({ 
        position: latLng, 
        map: firstmap, 
        title: data.title, 
        url: data.url, 
        icon: 'home.png' 
        }); 
       } 
       var infoWindow = new google.maps.InfoWindow(); 
       google.maps.event.addListener(marker, "mouseover", function(e) { 
        infoWindow.setContent(data.description); 
        infoWindow.open(firstmap, marker); 
       }); 
       google.maps.event.addListener(marker, "mouseout", function() { 
        infoWindow.setContent(""); 
        infoWindow.close(); 
       }); 
       google.maps.event.addListener(marker, "click", function() { 
        location.assign(marker.url); 
       }); 
      } 

</script>

来源

2012-09-01 David

创建一个新的标记对象

和marker.setMap（地图）;

来源

2012-09-01 13:03:18

你的逻辑太多在你的for循环之外，导致你的大部分逻辑只应用到最后的标记。试试这个调整：

<script type="text/javascript"> 
     function initialize() { 

      var json = [ 
       { 
        "title":"title1", 
        "lat":46.077428, 
        "lng":18.229837 

       }, 
       { 
        "title":"title2", 
        "lat":46.042229, 
        "lng":18.227134 

       }, 
       { 
        "title":"title3", 
        "lat":46.082831, 
        "lng":18.225911 

       }, 
       { 
        "title":"title4", 
        "lat":46.092058, 
        "lng":18.185645 

       }, 
       { 
        "title":"title5", 
        "lat":46.075493, 
        "lng":18.22885, 
        "description":"some description to the 5th element", 
        "url":"http://www.pannon-home.hu/" 
       }, 
       { 
        "title":"title6", 
        "lat":46.075344, 
        "lng":18.227713, 
        "description":"some description to the 6th element", 
        "url":"http://www.pannon-home.hu/" 
       } 
      ] 

      var latlng = new google.maps.LatLng(46.071325, 18.233185); 
      var myOptions = { 
       zoom:12, 
       center:latlng, 
       mapTypeId:google.maps.MapTypeId.ROADMAP 
      }; 
      var firstmap = new google.maps.Map(document.getElementById("allmap"), myOptions); 
      for (var i = 0, length = json.length; i < length; i++) { 
       var data = json[i], 
         latLng = new google.maps.LatLng(data.lat, data.lng); 
       // Creating a marker and putting it on the map 
       var marker = new google.maps.Marker({ 
        position:latLng, 
        map:firstmap, 
        title:data.title, 
        url:data.url, 
        icon:'home.png' 
       }); 

       var infoWindow = new google.maps.InfoWindow(); 
       google.maps.event.addListener(marker, "mouseover", function (e) { 
        infoWindow.setContent(data.description); 
        infoWindow.open(firstmap, marker); 
       }); 
       google.maps.event.addListener(marker, "mouseout", function() { 
        infoWindow.setContent(""); 
        infoWindow.close(); 
       }); 
       google.maps.event.addListener(marker, "click", function() { 
        location.assign(marker.url); 
       }); 
      } 
     } 

    </script>

来源

2012-10-01 06:08:47

Google Maps API v3多个可点击标记

回答

相关问题