2013-07-16 3 views
3

여기 상황이 있으니 친절하게 도와주세요.
여러 마커가있는지도에서 위도와 경도에 대해 두 개의 변수를 사용하고 있습니다. 지도. 내가여러 마커 맵에서 특정 마커를 강조 표시하는 방법

  1. 이 위도/경도 다른 사람과 다를 수이 중심 마커의 아이콘을 반송 또는
    애니메이션
  2. 변화에 중심에 사용
  3. 추가로 추가의 마커를 사용할 수있는 방법

    정보 상자에 정보. 도움

    ----- 여기에 미리

덕분에 코드를 작동 alkis

<!DOCTYPE html> 
<html> 
<head> 
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" /> 
    <title>Google Maps Multiple Markers</title> 
    <script src="http://maps.google.com/maps/api/js?sensor=false" 
      type="text/javascript"></script> 
</head> 
<body> 
    <div id="map" style="width: 500px; height: 400px;"></div> 

    <script type="text/javascript"> 
    var locations = [ 
     ['Bondi Beach', -33.890542, 151.274856, 4], 
     ['Coogee Beach', -33.923036, 151.259052, 5], 
     ['Cronulla Beach', -34.028249, 151.157507, 3], 
     ['Manly Beach', -33.80010128657071, 151.28747820854187, 2], 
     ['Maroubra Beach', -33.950198, 151.259302, 1] 
    ]; 

var lat1 = '-33.92' 
var long1 = '151.25' 

    var map = new google.maps.Map(document.getElementById('map'), { 
     zoom: 10, 
     center: new google.maps.LatLng(lat1, long1), 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
    }); 

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

    var marker, i; 

    for (i = 0; i < locations.length; i++) { 
     marker = new google.maps.Marker({ 
     position: new google.maps.LatLng(locations[i][1], locations[i][2]), 
     map: map 
     }); 


     google.maps.event.addListener(marker, 'click', (function(marker, i) { 
     return function() { 
      infowindow.setContent(locations[i][0]); 
      infowindow.open(map, marker); 
     } 
     })(marker, i)); 


    } 
    </script> 
</body> 
</html> 

답변

5
<!DOCTYPE html> 
<html> 
<head> 
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" /> 
    <title>Google Maps Multiple Markers</title> 
    <script src="http://maps.google.com/maps/api/js?sensor=false" 
      type="text/javascript"></script> 
</head> 
<body> 
    <div id="map" style="width: 500px; height: 400px;"></div> 

    <script type="text/javascript"> 
    var locations = [ 
     ['Coogee Beach', -33.923036, 151.259052, 5], 
     ['Bondi Beach', -33.890542, 151.274856, 4], 
     ['Cronulla Beach', -34.028249, 151.157507, 3], 
     ['Manly Beach', -33.80010128657071, 151.28747820854187, 2], 
     ['Maroubra Beach', -33.950198, 151.259302, 1] 
    ]; 

    var lat_center = -33.923036, 
     long_center = 151.259052; 

    var map = new google.maps.Map(document.getElementById('map'), { 
     zoom: 10, 
     center: new google.maps.LatLng(lat_center, long_center), 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
    }); 

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

    var marker, i, text; 

    for (i = 0; i < locations.length; i++) { 

     marker = new google.maps.Marker({ 
      position: new google.maps.LatLng(locations[i][1], locations[i][2]), 
      map: map 
     }); 

     text = locations[i][0]; 

     if(locations[i][1] === lat_center && locations[i][2] === long_center) { 

      marker.setAnimation(google.maps.Animation.DROP); 
       marker.setIcon('http://maps.google.com/intl/en_us/mapfiles/ms/micons/purple.png'); 
     text += '<br>' + 'Additionl text for centered marker'; 
     } 

     google.maps.event.addListener(marker, 'click', (function(marker, text) { 
     return function() { 
      infowindow.setContent(text); 
      infowindow.open(map, marker); 
     } 
     })(marker, text)); 
    } 

    </script> 
</body> 
</html> 

List of markers available by google

More about markers

+0

많은 감사 입니다 완전한 하나의 작은 결함으로 코드의 위치이 블록을 고려하시기 바랍니다 것은 정적 지금 쿠지 비치 에 중복 마커 여섯 개 마커는 우리가 어떻게/업데이트가 제거 할 수있는 것입니다 결과 쿠지 비치 을 포함, 5 개 개의 항목을 항상있을 것이다 coogee 해변 마커 그래서지도에만 5 마커가 있고 업데이트 된 것은 새로운 것입니다 –

+0

코드를 업데이트했습니다. 이 질문에 대한 답변을 주신다면 대답을 표시하고 어쩌면 upvote : P로 표시하는 것을 잊지 마십시오. – alkis

+0

alkis, 당신은 스타입니다 ... 그것은 매력처럼 작동 ... 나는 대답에 upvote 할 수 있으면 좋겠지 만 충분한 평판 카운트가 없다면 좋겠어 –

관련 문제