Google지도 : 메뉴를 사용하여 새 중심점 설정

저는 Google지도를 처음 사용합니다. 내가하려는 것은 HTML 메뉴를 클릭 할 때 지점을 중심으로지도를 설정하는 것입니다.Google지도 : 메뉴를 사용하여 새 중심점 설정

컨트롤이지도 외부에 있으면 이벤트 리스너가 필요 없다고 말하는 것이 맞습니까?

이것은 머리 부분의 코드입니다 :` function init() { var myLatlng = new google.maps.LatLng (53.53562, -1.05642); var에중인 MyOptions = { 줌 : 8, 센터 : myLatlng, 관련 mapTypeId : google.maps.MapTypeId.ROADMAP} // 그릴지도 VAR지도 = 새로운 google.maps.Map (document.getElementById를 ("지도 "), myOptions);

<body onLoad="init()"> 
<div id="selecter"> 
    <select> 
     <option onClick="resetMap(53.39433,-1.25754);">Thurcroft</option> 
     <option onClick="resetMap(53.41615,-1.27833);">Wickersley</option> 
     <option onClick="resetMap(53.47929,-1.14828);">M18/A1</option> 
     <option onClick="resetMap(53.47802,-1.06633);">Rossington</option> 
     <option onClick="resetMap(53.53562,-1.05642);">Armthorpe</option> 
     <option onClick="resetMap(53.5914,-0.98797);">J5 M180</option> 
     <option onClick="resetMap(53.61159,-0.96308);">Thorne</option> 
     <option onClick="resetMap(53.62769,-0.95181);">Moorends</option> 
    </select> 
</div> 
<div id="map"> 
</div> 
</body>

을 ...하지만 메뉴에 액세스 할 때 아무 반응이 없습니다 :

 //set up the marker 
     var marker = new google.maps.Marker({ 
      position: myLatlng, 
      map: map, 
     }); 
    } 

    function resetMap(lat,long) { 
      var latlong = lat+","+long; 
      var newPos = new google.maps.LatLng(latlong)({ 
      setCenter: latlong, 
      map: map, 
      zoom:15, 
     }) 

     //add a marker 
     var marker = new google.maps.Marker({ 
      position: myLatlng, 
      map: map, 
      title:"New marker", 
     }) 
    } 
</script>`

는과 HTML은과 같이 간다. 누구든지 올바른 방향으로 나를 가리킬 수 있습니까?

출처

2012-06-18 AliH

당신은이 같은 선택 태그에 onchange 기능을 넣어하는 옵션에 onclick 기능을, 당신은 넣어 수 없습니다,

<select onchange="resetMap('53.39433', '-1.25754');"> 
    <option>Thurcroft</option> 
    <option>Wickersley</option> 
</select>

당신은 또한 당신이에지도 URL을 포함하는지 확인했다 파일 I

여러 변경을

출처

2012-06-18 00:50:45 thegrede

고마워요 Thegrede, 그에 따라 변경되었지만 ... 문제가되지는 않겠지 만 : ( – AliH

) onchange 호출의 숫자에 인용 부호를 넣으십시오 (편집 참조). – thegrede

이전 답변에서 URL의 의미를 자세히 설명 할 수 있습니까? 따옴표 및 변경 사항을 추가했습니다. 감사합니다. – AliH

(1)가 map (기능 밖에 레벨에 위치)를 글로벌 변수가되도록 그 init 01,230,929 및 변형 될 수있다 96,

(2) 옵션 값은 좌표 문자열을 보유하지만, google.maps.LatLng는 두 개의 매개 변수를 기대하고, 그래서 문자열을 쉼표로 분리됩니다

(3) setOptions 가운데로 및 확대하기 위해 호출됩니다, 당신은 또한 수 ... 각각의 기능 setZoom 및 setCenter

Demo and updated code

function resetMap() { 
    // retrieve new selection 
    var latlongChoice = document.getElementById("placeSelect").value; 

    // separate into lat and long 
    var latlongParts = latlongChoice.split(","); 
    var newPos = new google.maps.LatLng(latlongParts[0], latlongParts[1]); 

    map.setOptions({ 
     center: newPos, 
     zoom: 15 
    }); 

    //add a marker 
    var marker = new google.maps.Marker({ 
     position: newPos, 
     map: map, 
     title: "New marker" 
    }) 
}

전화

<select id="placeSelect" onchange="resetMap()"> 
     <option value="53.39433,-1.25754">Thurcroft</option> 
     <option value="53.41615,-1.27833">Wickersley</option> 
     ...

출처

2012-06-18 23:47:46

안녕하세요 MaryAnne, 귀하의 코드를 구현하려는 지연에 사과드립니다. – AliH

시간을내어 진행 상황을 알려주세요! –

격려에 감사드립니다. 그래서 값을 하드 코딩하여 다음과 같이 바르게 잘라 버리기로했습니다.'function resetMap() { \t \t \t \t alert ("reset fired"); \t \t \t \t var lat = 53.62769; \t \t \t \t var lng = -0.95181; \t \t \t \t var newlatlng = new google.maps.LatLng (lat, lng); \t \t \t \t 경고 (newlatlng); \t \t \t \t // var splitlatlng = latlng.split (","); \t \t \t \t // alert (splitlatlng); \t \t \t \t // var newlatlng = new google.maps.LatLng (splitlatlng [0], splitlatlng [1]); \t \t \t \t // alert (newlatlng); \t \t \t \t map.setCenter (newlatlng); \t \t \t}'.처음에는 LNG 값을 약간 변경 한 것 같지만 여전히 setCenter를 구성하지 않습니다! Help ... – AliH

Google지도 : 메뉴를 사용하여 새 중심점 설정

답변

관련 문제