マーカドラッグで地図を動かす

実行結果

次の例では、マーカをドラッグして移動できます。地図赤枠外にマーカがある場合、マーカと逆の方向へ地図が動きます。
ソースコードと解説

マーカをドラッグして地図を動かすには、ZDC.addListener()を利用します。地図赤枠は動作を見やすくするためのものですので実際に使用する際は消してください。
<!DOCTYPE HTML>
<html>
<head>
<script src="//test.api.its-mo.com/v3/loader?key=JSZddc5111626c8|Zo4wz&api=zdcmap.js,userwidget.js,shape.js,geo.js&enc=UTF8" type="text/javascript"></script>
<script type="text/javascript">
    var map, llbox,
        lat = 35.6778614, lon = 139.7703167, direction;
    var mrk, mkrLatLon, dragging, difLat, difLon, pl, latlons, timer=null;
    var amount=20;

    function loadMap() {
        map = new ZDC.Map(
            document.getElementById('ZMap'),
            {
                mapType: ZDC.MAPTYPE_HIGHRES_LV18,
                zoom:10
            }
        );

        onChangeMap();


        /* マーカを作成 */
        mkrLatLon = map.getLatLon();
        mrk = new ZDC.Marker(mkrLatLon);

        /* マーカを追加 */
        map.addWidget(mrk);

        /* 地図にイベントを追加 */
        ZDC.addListener(map, ZDC.MAP_CHG_LATLON, onChangeMap);
        ZDC.addListener(map, ZDC.MAP_CHG_ZOOM, onChangeMap);
        ZDC.addListener(map, ZDC.MAP_MOUSEMOVE, onMouseMove);
        ZDC.addListener(map, ZDC.MAP_MOUSEUP, onMouseUp);

        /* マーカにイベントを追加 */
        ZDC.addListener(mrk, ZDC.MARKER_MOUSEMOVE, onMouseMove);
        ZDC.addListener(mrk, ZDC.MARKER_MOUSEDOWN, onMouseDown);
        ZDC.addListener(mrk, ZDC.MARKER_MOUSEUP, onMouseUp);

        /* documentにイベントを追加 */
        ZDC.addDomListener(document, 'mouseup', onMouseUp);
    };

    /* マウスダウンイベント処理 */
    function onMouseDown() {
        /* マウスダウン位置の緯度経度とマーカの緯度経度の差分を保持 */
        var cLatLon = map.getPointerPosition();
        difLat = cLatLon.lat - mkrLatLon.lat;
        difLon = cLatLon.lon - mkrLatLon.lon;
        dragging = true;
    }

    /* マウスムーブイベント処理 */
    function onMouseMove() {
        /* ドラッグ中のみ処理させる */
        if(dragging) {

            var latlon = map.getPointerPosition();

            /* マーカ表示緯度経度を取得 */
            var mkLat = latlon.lat - difLat;
            var mkLon = latlon.lon - difLon;
            mkrLatLon = new ZDC.LatLon(mkLat, mkLon);
            mrk.moveLatLon(mkrLatLon);

            if(pointerOut()){
              if(timer==null){
                timer = setInterval(movemap, 50);
              }
            }
        }
    }

    /* マウスアップイベント処理 */
    function onMouseUp() {

        if(dragging) {
            dragging = false;
            clearTimer();
        }
    }

    /* 地図移動時の処理 */
    function onChangeMap() {
      //地図表示領域より20pxくらい小さいBOXを持っておく
      var tl = map.tlToLatLon(ZDC.TL(20 , 20));
      var tr = map.tlToLatLon(ZDC.TL(20 , 730));
      var br = map.tlToLatLon(ZDC.TL(480 , 730));
      var bl = map.tlToLatLon(ZDC.TL(480 , 20));
      llbox = new ZDC.LatLonBox(bl , tr);

      drawPolyline();

    }

    function drawPolyline(){
      if(pl){map.removeWidget(pl);}
      /* 線の頂点を作成 */
        latlons = [];

        latlons.push(llbox.getMin());
        latlons.push(new ZDC.LatLon(llbox.getMax().lat, llbox.getMin().lon));
        latlons.push(llbox.getMax());
        latlons.push(new ZDC.LatLon(llbox.getMin().lat, llbox.getMax().lon));

        /* 線を作成 */

        pl = new ZDC.Polyline( latlons,
        {
            strokeWeight: 2,
            strokeColor: '#FF0000' ,
            closePath: true
        });

        /* 線を地図に追加 */
       map.addWidget(pl);

    };

    /* 内枠の内外判定 */
    function pointerOut() {

      //var point = mrk.getLatLon();//mrkの位置だとイベントの位置が取りにくい
      var point = map.getPointerPosition();

      if(ZDC.isPolygonContainLatLon(point, latlons)){
          clearTimer();
          return false;
      }else{
        if(llbox.getMin().lat > point.lat){
          //下にはみ出た
          direction = 'down';
        }else if(llbox.getMax().lat < point.lat){
          //上にはみ出た
          direction = 'up';
        }else if(llbox.getMin().lon > point.lon){
          //左にはみ出た
          direction = 'left';
        }else if(llbox.getMax().lon < point.lon){
          //右にはみ出た
          direction = 'right';
        }
        return true;
      }


    };
    function movemap(){
      if(direction == 'down'){
        map.movePx(0,amount);
      }else if(direction == 'up'){
        map.movePx(0,amount*-1);
      }else if(direction == 'left'){
        map.movePx(amount*-1,0 ,0);
      }else if(direction == 'right'){
        map.movePx(amount, 0);
      }
    };

    function clearTimer(){
      if(timer!=null){
        clearInterval(timer);
        timer=null;
      }
    };
</script>

</head>

<body onload="loadMap();">
    <div id="ZMap" style="border:1px solid #777777; width:750px; height:500px; top:0px; left:20px; position:absolute;"></div>
</body>
</html>