-1
モバイルアプリをスワイプするか、ブラウザでドラッグするのではなく、カスタムコントローラを使ってGoogleマップ上の位置を変更できますか? スワイプ/ドラッグと同じようにスムーズに変化するポジションを探していますが、ジャンプやシフトはありません。問題の例から変更 カスタムボタンでGoogleマップ位置を制御する
モバイルアプリをスワイプするか、ブラウザでドラッグするのではなく、カスタムコントローラを使ってGoogleマップ上の位置を変更できますか? スワイプ/ドラッグと同じようにスムーズに変化するポジションを探していますが、ジャンプやシフトはありません。問題の例から変更 カスタムボタンでGoogleマップ位置を制御する
一つのオプション、:Google Maps Javascript positioning control maps:
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;
html,
body {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px
}
#map_canvas {
width: 80%;
height: 100%;
margin: 0px;
padding: 0px
}
<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map_canvas" style="float: right; border: 2px solid #3872ac;"></div>
<div id="panctrl" style="float: right;"></div>
この質問:[GoogleマップのJavascript位置決め制御マップ](http://stackoverflow.com/questions/27769309/google-maps-javascript-positioning-control-maps)は、カスタムのパンコントロールを作成します。それはマップ上にある必要はありません。 – geocodezip