我想实现这么一个效果:地图任意缩放后,点击一个按钮,将立刻回到地图初始加载时的位置,并且是没有缩放的状态。
怎么办呢?最好的办法就是用Home按钮。
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
<title>Home Extent</title>
<link rel="stylesheet" href="https://js.arcgis.com/3.19/esri/css/esri.css">
<style>
html, body, #map {
padding:0;
margin:0;
height:100%;
}
#HomeButton {
position: absolute;
top: 95px;
left: 20px;
z-index: 50;
}
</style>
<script src="https://js.arcgis.com/3.19/"></script>
<script>
require([
"esri/map",
"esri/dijit/HomeButton",
"dojo/domReady!"
], function(
Map, HomeButton
) {
var map = new Map("map", {
center: [-56.049, 38.485],
zoom: 3,
basemap: "streets"
});
var home = new HomeButton({
map: map
}, "HomeButton");
home.startup();
});
</script>
</head>
<body>
<div id="map" class="map">
<div id="HomeButton"></div>
</div>
</body>
</html>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
用别的按钮也不是不可以,麻烦一点:
var mapcenter = new Point([120, 26], new SpatialReference({ wkid:4326 }));
map = new Map("map", {
basemap: "delorme",
center: mapcenter,
maxZoom: 10,
minZoom: 1,
zoom: 5,
extent: bounds,
logo: false,
nav: false
});
var homeClick = function(){
map.centerAndZoom(mapcenter,5);
}
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
一定要设置basemap,否则这个缩放难以达到效果。