2013-10-08 2 views
0

마커 문제 누구나 googlemap에서 폴리 라인을 그리기위한 자바 스크립트를 도와주세요 .... 마커와 Google지도에서 두 개의 폴리 라인을 그렸습니다,하지만 문제는 내가 마커를 클릭하면 세부 사항입니다 만에 하나 개의 마커를 인쇄 ...... 또한 세부 사항은 완전히구글 마커에서

내 코드가

$(function(){ 
var map = new google.maps.Map(document.getElementById("map"), { 
        center: new google.maps.LatLng(11.275387916698238, 75.8015380957031), 
        zoom: 12 
       }), 
    routes = [{origin:'p t usha road, kozhikode', 
       destination:'cooperative hospital, eranjipalam, kozhikode' 
       }, 
       {origin:'IIM, Kozhikode', 
       destination:'VELLIMADUKUNNU, KOZHIKODE' 
       } 
       ], 
    rendererOptions = { 
       preserveViewport: true, 
       map:map, 
       polylineOptions:{strokeColor:'#FF3300', 
           strokeWeight: 10},   
       suppressMarkers:true, 
       routeIndex:0 
       }, 
    directionsService = new google.maps.DirectionsService(); 

     $.each(routes, 
     function(i,obj){//<--anonymous function 

     var request = { 
       origin: obj.origin, 
       destination: obj.destination, 
       travelMode: google.maps.TravelMode.DRIVING 
       }, 

      directionsDisplay = new google.maps.DirectionsRenderer(rendererOptions); 
      directionsService.route(request, function(result, status) { 

       if (status == google.maps.DirectionsStatus.OK) { 

var lat = result.routes[0].legs[0].start_location.lat(); 
var lon = result.routes[0].legs[0].start_location.lng(); 

    var lat1 = result.routes[0].legs[0].end_location.lat(); 
var lon1 = result.routes[0].legs[0].end_location.lng();    



        try{ 

        marker = new google.maps.Marker({ 
    position: new google.maps.LatLng(lat, lon), 
     map: map 
     }); 

                var iws = new google.maps.InfoWindow({ 
     content: "Home For Sale" 
    }); 
    google.maps.event.addListener(marker, "click", function (e) { iws.open(map, marker); }); 

        }catch(e){alert(e)} 


         try{ 

        marker = new google.maps.Marker({ 
    position: new google.maps.LatLng(lat1, lon1), 
     map: map 
     }); 

          var iw = new google.maps.InfoWindow({ 
     content: "Home For Sale" 
    }); 
    google.maps.event.addListener(marker, "click", function (e) { iw.open(map, marker); }); 


        }catch(e){alert(e)} 

        directionsDisplay.setDirections(result); 
       } 
      }); 

     });}); 

답변

0

아래에 주어진대로 http://jsfiddle.net/wLeBh/16/

당신이이 정보 창 안쪽에 인쇄되지 않습니다 다른 정보 마커 클릭 리스너는 마커 변수에만 적용됩니다. 두 개의 고유 한 마커를 만들고 해당 InfoWindow를 여는 각각에 클릭 수신기를 적용하십시오.

try{ 
    var marker1 = new google.maps.Marker({ 
    position: new google.maps.LatLng(lat, lon), 
    map: map 
    }); 

    var iws = new google.maps.InfoWindow({ 
    content: "Home For Sale 1" 
    }); 
    google.maps.event.addListener(marker1, "click", function (e) { iws.open(map, marker1); }); 

}catch(e){alert(e)} 


try{ 

    var marker2 = new google.maps.Marker({ 
    position: new google.maps.LatLng(lat1, lon1), 
    map: map 
    }); 

    var iw = new google.maps.InfoWindow({ 
    content: "Home For Sale 2" 
    }); 
    google.maps.event.addListener(marker2, "click", function (e) { iw.open(map, marker2);}); 


}catch(e){alert(e)} 

updated fiddle

+0

선생님의 작업 !!!! 감사합니다! 다른 마커를 클릭하면 이전 정보창이 숨겨지지 않습니다. –

+0

코드는 각 마커에 대해 별도의 InfoWindow를 만듭니다. 하나만 만들려면 하나를 만들고 각 마커에서 업데이트 된 콘텐츠로 엽니 다. 이 질문과 같은 소리는 실제로 [Google Maps JS API v3 - 간단한 여러 마커 예]와 중복됩니다 (http://stackoverflow.com/questions/3059044/google-maps-js-api-v3-simple-multiple-marker- 예/3059129 # 3059129) – geocodezip

관련 문제