Question

是否可以使用自定义控制器更改Google地图上的位置，而不是在移动应用上滑动或拖动浏览器？我正在寻找与滑动/拖动相同的平滑变化位置，并且没有跳跃或移位。

Answer 1

一个选项，根据问题中的示例修改：Google Maps Javascript positioning control maps：

onTouch()

@Override
public boolean onTouch(View view, MotionEvent motionEvent) {
    // offset because the view is translated during swipe
    motionEvent.offsetLocation(mTranslationX, 0);

    if (mViewWidth < 2) {
        mViewWidth = mView.getWidth();
    }

    switch (motionEvent.getActionMasked()) {
        case MotionEvent.ACTION_DOWN: {
            // TODO: ensure this is a finger, and set a flag
            mDownX = motionEvent.getRawX();
            mDownY = motionEvent.getRawY();
            if (mCallbacks.canDismiss(mToken)) {
                mVelocityTracker = VelocityTracker.obtain();
                mVelocityTracker.addMovement(motionEvent);
            }
            break;
        }

        case MotionEvent.ACTION_UP: {
            if (mVelocityTracker == null) {
                break;
            }

            float deltaX = motionEvent.getRawX() - mDownX;
            mVelocityTracker.addMovement(motionEvent);
            mVelocityTracker.computeCurrentVelocity(1000);
            float velocityX = mVelocityTracker.getXVelocity();
            float absVelocityX = Math.abs(velocityX);
            float absVelocityY = Math.abs(mVelocityTracker.getYVelocity());
            boolean dismiss = false;
            boolean dismissRight = false;
            if (Math.abs(deltaX) > mViewWidth / 2 && mSwiping) {
                dismiss = true;
                dismissRight = deltaX > 0;
            } else if (mMinFlingVelocity <= absVelocityX && absVelocityX <= mMaxFlingVelocity
                    && absVelocityY < absVelocityX
                    && absVelocityY < absVelocityX && mSwiping) {
                // dismiss only if flinging in the same direction as dragging
                dismiss = (velocityX < 0) == (deltaX < 0);
                dismissRight = mVelocityTracker.getXVelocity() > 0;
            }
            if (dismiss) {
                // dismiss
                mView.animate()
                        .translationX(dismissRight ? mViewWidth : -mViewWidth)
                        .alpha(0)
                        .setDuration(mAnimationTime)
                        .setListener(new AnimatorListenerAdapter() {
                            @Override
                            public void onAnimationEnd(Animator animation) {
                                performDismiss();
                            }
                        });
                return true;
            } else if (mSwiping) {
                // cancel
                mView.animate()
                        .translationX(0)
                        .alpha(1)
                        .setDuration(mAnimationTime)
                        .setListener(null);
            }
            mVelocityTracker.recycle();
            mVelocityTracker = null;
            mTranslationX = 0;
            mDownX = 0;
            mDownY = 0;
            mSwiping = false;
            break;
        }

        case MotionEvent.ACTION_CANCEL: {
            if (mVelocityTracker == null) {
                break;
            }

            mView.animate()
                    .translationX(0)
                    .alpha(1)
                    .setDuration(mAnimationTime)
                    .setListener(null);
            mVelocityTracker.recycle();
            mVelocityTracker = null;
            mTranslationX = 0;
            mDownX = 0;
            mDownY = 0;
            mSwiping = false;
            break;
        }

        case MotionEvent.ACTION_MOVE: {
            if (mVelocityTracker == null) {
                break;
            }

            mVelocityTracker.addMovement(motionEvent);
            float deltaX = motionEvent.getRawX() - mDownX;
            float deltaY = motionEvent.getRawY() - mDownY;
            if (Math.abs(deltaX) > mSlop && Math.abs(deltaY) < Math.abs(deltaX) / 2) {
                mSwiping = true;
                mSwipingSlop = (deltaX > 0 ? mSlop : -mSlop);
                mView.getParent().requestDisallowInterceptTouchEvent(true);

                // Cancel listview's touch
                MotionEvent cancelEvent = MotionEvent.obtain(motionEvent);
                cancelEvent.setAction(MotionEvent.ACTION_CANCEL |
                        (motionEvent.getActionIndex() <<
                                MotionEvent.ACTION_POINTER_INDEX_SHIFT));
                mView.onTouchEvent(cancelEvent);
                cancelEvent.recycle();
            }

            if (mSwiping) {
                mTranslationX = deltaX;
                mView.setTranslationX(deltaX - mSwipingSlop);
                // TODO: use an ease-out interpolator or such
                mView.setAlpha(Math.max(0f, Math.min(1f,
                        1f - 2f * Math.abs(deltaX) / mViewWidth)));
                return true;
            }
            break;
        }
    }
    return false;
}

function initialize() {
  var mapDiv = document.getElementById('map_canvas');
  var map = new google.maps.Map(mapDiv, {
    center: new google.maps.LatLng(39.300299, 34.471664),
    zoom: 6,
    disableDefaultUI: true,
  });
  var PanControl = new geocodezip.web.PanControl(map);
  PanControl.index = 1;
  // map.controls[google.maps.ControlPosition.TOP_LEFT].push(PanControl);
  document.getElementById('panctrl').appendChild(PanControl);

}
google.maps.event.addDomListener(window, 'load', initialize);

/**
 * @param {string} tagName
 * @param {Object.<string, string>} properties
 * @returns {Node}
 */
function CreateElement(tagName, properties) {
  var elem = document.createElement(tagName);
  for (var prop in properties) {
    if (prop == "style")
      elem.style.cssText = properties[prop];
    else if (prop == "class")
      elem.className = properties[prop];
    else
      elem.setAttribute(prop, properties[prop]);
  }
  return elem;
}

/**
 * @constructor
 * @param {google.maps.Map} map
 */
function PanControl(map) {
  this.map = map;
  this.originalCenter = map.getCenter();

  var t = this;
  var panContainer = CreateElement("div", {
    'style': "position: relative; padding: 5px;"
  });

  //Pan Controls
  var PanContainer = CreateElement("div", {
    'style': "position: relative; left: 2px; top: 5px; width: 56px; height: 56px; padding: 5px; overflow: hidden;"
  });
  panContainer.appendChild(PanContainer);
  var div = CreateElement("div", {
    'style': "width: 56px; height: 56px; overflow: hidden;"
  });
  div.appendChild(CreateElement("img", {
    'alt': ' ',
    'src': 'http://maps.gstatic.com/intl/en_ALL/mapfiles/mapcontrols3d5.png',
    'style': "position: absolute; left: 0px; top: -1px; -moz-user-select: none; border: 0px none; padding: 0px; margin: 0px; width: 59px; height: 492px;"
  }));
  PanContainer.appendChild(div);

  div = CreateElement("div", {
    'style': "position: absolute; left: 0px; top: 19px; width: 18.6667px; height: 18.6667px; cursor: pointer;",
    'title': 'Pan left'
  });
  google.maps.event.addDomListener(div, "click", function() {
    t.pan(PanDirection.LEFT);
  });
  PanContainer.appendChild(div);
  div = CreateElement("div", {
    'style': "position: absolute; left: 37px; top: 19px; width: 18.6667px; height: 18.6667px; cursor: pointer;",
    'title': 'Pan right'
  });
  google.maps.event.addDomListener(div, "click", function() {
    t.pan(PanDirection.RIGHT);
  });
  PanContainer.appendChild(div);
  div = CreateElement("div", {
    'style': "position: absolute; left: 19px; top: 0px; width: 18.6667px; height: 18.6667px; cursor: pointer;",
    'title': 'Pan up'
  });
  google.maps.event.addDomListener(div, "click", function() {
    t.pan(PanDirection.UP);
  });
  PanContainer.appendChild(div);
  div = CreateElement("div", {
    'style': "position: absolute; left: 19px; top: 37px; width: 18.6667px; height: 18.6667px; cursor: pointer;",
    'title': 'Pan down'
  });
  google.maps.event.addDomListener(div, "click", function() {
    t.pan(PanDirection.DOWN);
  });
  PanContainer.appendChild(div);
  div = CreateElement("div", {
    'style': "position: absolute; left: 19px; top: 19px; width: 18.6667px; height: 18.6667px; cursor: pointer;",
    'title': 'Reset center'
  });
  google.maps.event.addDomListener(div, "click", function() {
    t.map.setCenter(t.originalCenter);
  });
  PanContainer.appendChild(div);

  return panContainer;
}

/** @param {PanDirection} direction */
PanControl.prototype.pan = function(direction) {
  var panDistance = 50;
  if (direction == PanDirection.UP || direction == PanDirection.DOWN) {
    panDistance = Math.round(this.map.getDiv().offsetHeight / 2);
    this.map.panBy(0, direction == PanDirection.DOWN ? panDistance : -1 * panDistance);
  } else {
    panDistance = Math.round(this.map.getDiv().offsetWidth / 2);
    this.map.panBy(direction == PanDirection.RIGHT ? panDistance : -1 * panDistance, 0);
  }
}

/** @enum */
var PanDirection = {
  LEFT: 0,
  RIGHT: 1,
  UP: 3,
  DOWN: 4
}

window["geocodezip"] = window["geocodezip"] || {};
window["geocodezip"]["web"] = window["geocodezip"]["web"] || {};
window["geocodezip"]["web"]["PanControl"] = PanControl;

使用自定义按钮控制Google地图位置

1 个答案: