빙 맵에서 어떻게 infobox를 중앙으로 표시하고 표시합니까?

StackOverflow https://stackoverflow.com/questions/1749050

  •  20-09-2019
  •  | 
  •  

문제

내 코드는 .pantolatlong과 a .showinfobox를 사용합니다

Pantolatlong을 제거하지 않는 한 정보 상자가 나타나지 않습니다. 나는 그것이 그것을 멈추고 있다고 생각합니다. 엔드 팬 이벤트에 추가하려고 시도했지만 작동하지 않았습니다.

푸시 핀에 팬을 팬하고 infobox를 표시하는 가장 간단한 방법은 무엇입니까?

SetCenter를 사용하고 있었지만 때때로 SetCenter 팬을 발견했는데, 이로 인해 깨집니다.

도움이 되었습니까?

해결책

약간의 인터넷 검색 후에, 나는 해결책을 생각해 냈고, 다른 사람들이 내가 겪은 슬픔을 가질 수 없도록 여기서 공유 할 것입니다.

순수한 JavaScript, SDK 또는 Iframe 솔루션을 사용하여 빙 맵을 만들고 전원을 켜고 전원을 켜십시오. 내 코드에서는 맵에 원하는 핀을 모두 추가하기 위해 JavaScript를 생성하고 ASP.NET 레이블을 사용하여 주입합니다.

빙 맵에서 setCenter () 메소드를 호출하는 경우, 지정된 좌표에 맵을 즉시 놀라운 맵을 설정해야합니다. 그리고 그것은 ... 대부분의 시간입니다. 그러나 때때로 포인트 사이에 팬을 결정합니다. SetCenter를 수행하고 ShowInfobox를 수행하면 PAN을 결정하지 않는 한 훌륭하게 작동합니다.

해결책? 우리는 훌륭한 프로그래머이기 때문에 우리는 SDK에 뛰어 들었고,이를 다루기 위해 우리가 연결할 수있는 이벤트가 있음을 보여줍니다. Onendpan 이벤트가 있으며 팬이 완료된 후에 트리거됩니다. onchangeview 이벤트도 있습니다. 이벤트는지도가 점프 할 때 트리거됩니다.

그래서 우리는이 사건들에 연결되어 푸시 핀 모양에 대한 인포볼을 표시하려고 노력하지만 아무 일도 일어나지 않습니다. 왜 안 돼?

이벤트가 호출 될 때 알려지지 않은 이유로 숨을 쉴 수 있도록 몇 밀리 초를 주어야합니다. 10 밀리 초로 설정 타임 아웃을 사용하는 것은 괜찮은 것 같습니다. 이 후에 상자가 잘 보일 것입니다.

다음 문제는 푸시 핀 사이를 튕기는 데 사용한 것을 통해 팬을 펼칠 때만 나타나기를 원한다는 것입니다 (내 경우에는 클릭 메소드가있는 테이블). 이벤트 핸들러를 즉석에서 생성/파괴하지만, 사용자가 패닝 중인지 또는 클릭에 응답하여 시스템이 패닝 중인지 추적하기 위해 글로벌 변수를 사용하는 것과 같은 다른 옵션이 있습니다.

마지막으로, 당신은 이것에서 오는 버그가 있습니다. 목록에서 장소를 클릭하면 해당 위치로 점프/팬이 있으면 InfoBox가 잘 표시됩니다. 사용자가 해고되면 목록 항목을 다시 클릭하면 맵이 이동하지 않으므로 이벤트가 트리거되지 않습니다.

이것에 대한 나의 해결책은 맵이 길/위도를 기록하고 다른 settimeout 방법을 사용하여 나중에 100ms를 변경했는지 감지하여 맵이 이동했는지 여부를 감지하는 것입니다. 그렇지 않은 경우 infobox를 표시하십시오.

이벤트 핸들러에 매개 변수를 전달할 수있는 방법이 없으므로이를 위해 글로벌 JavaScript 변수를 사용하는 방법이 없기 때문에 추적해야 할 다른 것들이 있습니다. 어떤 푸시 핀 모양을 표시하고 있는지, 또한 추적해야합니다. 이전 MapCoordinates는 변경되었는지 확인하기 전에.

이 모든 것을 함께 조각하는 데 시간이 걸렸지 만 효과가있는 것 같습니다. 다음은 내 코드입니다. 일부 섹션이 제거됩니다.

// An array of our pins to allow panning to them
var myPushPins = [];

// Used by the eventhandler
var eventPinIndex;
var oldMapCenter;

// Zoom in and center on a pin, then show its information box
function ShowPushPin(pinIndex) {
    eventPinIndex = pinIndex;
    oldMapCenter = map.GetCenter();
    map.AttachEvent("onendpan", EndPanHandler);
    map.AttachEvent("onchangeview", ChangeViewHandler);
    setTimeout("DetectNoMapChange();", 200);

    map.SetZoomLevel(9);
    map.SetCenter(myPushPins[pinIndex].GetPoints()[0]);

}


function EndPanHandler(e) {
    map.DetachEvent("onendpan", EndPanHandler);

    setTimeout("map.ShowInfoBox(myPushPins[eventPinIndex]);", 10);

}

function ChangeViewHandler(e) {
    map.DetachEvent("onchangeview", ChangeViewHandler);

    setTimeout("map.ShowInfoBox(myPushPins[eventPinIndex]);", 10);

}

function DetectNoMapChange(centerofmap) {

    if (map.GetCenter().Latitude == oldMapCenter.Latitude && map.GetCenter().Longitude == oldMapCenter.Longitude) {
        map.ShowInfoBox(myPushPins[eventPinIndex]);
    }
}

다른 팁

다른 방법은 다음과 같습니다.

    function addPushpin(lat,lon,pinNumber) {
    var pinLocation = new Microsoft.Maps.Location(lat, lon);

    var pin = new Microsoft.Maps.Pushpin(map.getCenter(), { text: pinNumber.toString() });

    pinInfobox = new Microsoft.Maps.Infobox(pinLocation,
            { title: 'Details',
                description: 'Latitude: ' + lat.toString() + ' Longitude: ' + lon.toString(),
                offset: new Microsoft.Maps.Point(0, 15)
            });


    map.entities.push(pinInfobox);
    map.entities.push(pin);

    pin.setLocation(pinLocation);
    map.setView({ center: pinLocation});
}
라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top