why my code can't alert the map's zoom when zoom changed using MVCObject on google-maps v3
this is my code :
<!DOCTYPE html>
<html>
<head>
<开发者_开发问答meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0px; padding: 0px }
#map_canvas { height: 100% }
</style>
<script type="text/javascript"src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
function initialize() {
var latlng = new google.maps.LatLng(-34.397, 150.644);
var myOptions = {
zoom: 8,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"),
myOptions);
function A(){
this.set('zoom',map.zoom);
this.bindTo('zoom', map);
}
A.prototype = new google.maps.MVCObject();
A.prototype.zoom_changed = function () {
alert(map.zoom)
}
}
</script>
</head>
<body onload="initialize()">
<div id="map_canvas" style="width:100%; height:100%"></div>
</body>
</html>
i want to alert map.zoom when zoom changed using MVCObject ,
but not working . thanks
it is ok now :
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0px; padding: 0px }
#map_canvas { height: 100% }
</style>
<script type="text/javascript"src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
function initialize() {
var latlng = new google.maps.LatLng(-34.397, 150.644);
var myOptions = {
zoom: 8,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"),
myOptions);
function A(){
this.bindTo('zoom', map);
}
A.prototype = new google.maps.MVCObject();
A.prototype.zoom_changed = function () {
alert(this.get('zoom'))
}
var a=new A()
}
</script>
</head>
<body onload="initialize()">
<div id="map_canvas" style="width:100%; height:100%"></div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0px; padding: 0px }
#map_canvas { height: 100% }
</style>
<script type="text/javascript"src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
function initialize() {
var latlng = new google.maps.LatLng(-34.397, 150.644);
var myOptions = {
zoom: 8,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"),
myOptions);
var marker = new google.maps.Marker({
position: map.getCenter(),
draggable:true,
map: map});
//map.bounds_=map.getBounds()
//console.log(map.get('bounds'))
function A(){
this.bindTo('zoom', map);
//this.set('marker', marker);
marker.bindTo('position',map,'center')
//this.bindTo('')
}
A.prototype = new google.maps.MVCObject();
A.prototype.zoom_changed = function () {
//if(this.get('marker'))
//console.log(this.get('marker'))
console.log(map.get('center'))
}
google.maps.Marker.prototype.position_changed = function () {
console.log('sss')
}
var a=new A()
}
</script>
</head>
<body onload="initialize()">
<div id="map_canvas" style="width:100%; height:100%"></div>
</body>
</html>
Try this:
alert(map.getZoom())
加载中,请稍侯......
精彩评论