0
我正在使用Google Maps API。网站上的Google Maps API v3在向下滚动时缩放地图，而不是在页面上降低
该网站呈现，但问题是，当我向下滚动，而不是在网站上降低它开始放大，并使网站上的导航真的很烦人。
我想做的事情是：少动态，更静态。等待用户点击+/-按钮以放大。无法自动缩放。
有没有人在这里明白我的问题？有没有人有线索如何解决这个问题？
非常感谢！ :)
var cities = [
{
city : 'City: Ittoqqortoormiit',
desc : 'Beginning of the expedition of Microsoft',
lat : 70.20,
long : -23
},
{
city : 'City: Kangerlussuaq',
desc : 'End of the expedition of Microsoft',
lat : 67,
long : -50.8
},
{
city : 'City: Kangerlussuaq',
desc : 'End of the expedition of Microsoft',
lat : 60,
long : -45.8
}
];
//Angular App Module and Controller
var sampleApp = angular.module('mapsApp', []);
sampleApp.controller('MapCtrl', function ($scope) {
//We center the map in Greenland
var mapOptions = {
zoom: 4,
center: new google.maps.LatLng(69,-26),
mapTypeId: google.maps.MapTypeId.TERRAIN
};
$scope.map = new google.maps.Map(document.getElementById('map'), mapOptions);
poly = new google.maps.Polyline(polyOptions);
poly.setMap(map);
$scope.markers = [];
var path = poly.getPath();
var latlngbounds = new google.maps.LatLngBounds();
var infoWindow = new google.maps.InfoWindow();
for (var i = 0; i < PitStops.length; i++) {
new google.maps.Marker({
position: cities[ i ].latlng,
map: map,
title: cities[ i ].name
});
path.push(PitStops[ i ].latlng);
latlngbounds.extend(PitStops[ i ].latlng);
}
map.fitBounds(latlngbounds);
}
google.maps.event.addDomListener(window, 'load', initialize);
var createMarker = function (info){
var marker = new google.maps.Marker({
map: $scope.map,
position: new google.maps.LatLng(info.lat, info.long),
title: info.city
});
marker.content = '<div class="infoWindowContent">' + info.desc + '</div>';
google.maps.event.addListener(marker, 'click', function(){
infoWindow.setContent('<h2>' + marker.title + '</h2>' + marker.content);
infoWindow.open($scope.map, marker);
});
$scope.markers.push(marker);
}
for (i = 0; i < cities.length; i++){
createMarker(cities[i]);
}
$scope.openInfoWindow = function(e, selectedMarker){
e.preventDefault();
google.maps.event.trigger(selectedMarker, 'click');
}
});#charts {
width: 1500px;
}
.InsideContent{
display:inline-block;
}
#curve_chart1{
width:250px;
float:left;
width: 500px;
height: 310px
}
#curve_chart2{
width:2500x;
width: 500px;
height: 310px
}
#curve_chart3{
width:250px;
float:right;
width: 500px;
height: 310px
}<!DOCTYPE html>
<html ng-app="mapsApp">
<head lang="en">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta name="product" content="Metro UI CSS Framework">
<meta name="description" content="Simple responsive css framework">
<meta name="author" content="Chantal MARIN">
<link href="css/metro-bootstrap.css" rel="stylesheet">
<!--<link href="css/metro-bootstrap-responsive.css" rel="stylesheet">-->
<link href="css/iconFont.css" rel="stylesheet">
<!-- Load JavaScript Libraries -->
<script src="js/jquery/jquery.min.js"></script>
<script src="js/jquery/jquery.widget.min.js"></script>
<!-- Metro UI CSS JavaScript plugins -->
<script src="js/load-metro.js"></script>
<!-- Local JavaScript -->
<script src="js/github.info.js"></script>
<title>This is the map of the expedition</title>
<link rel="stylesheet" href="css/maps.css">
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.3/angular.min.js"></script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyD6SfOqSpJQa45i0LWO-9zSrV9HDPzACYg&signed_in=true&callback=initMap"></script>
<script type="text/javascript" src="js/maps.js"></script>
<script type="text/javascript"
src="https://www.google.com/jsapi?autoload={
'modules':[{
'name':'visualization',
'version':'1',
'packages':['corechart']
}]
}"></script>
<script type="text/javascript">
google.setOnLoadCallback(drawChart);
// Callback that creates and populates a data table,
// instantiates the chart, passes in the data and
// draws it
function drawChart() {
//this is the first chart to visualize with the data
var data1 = google.visualization.arrayToDataTable([
['Dates', 'distance'],
['01 april', 1000],
['02 april', 1170],
['03 april', 660],
['04 april', 1030]
]);
var data2 = google.visualization.arrayToDataTable([
['Dates', 'distance'],
['01 april', 1000],
['02 april', 1170],
['03 april', 660],
['04 april', 1030]
]);
var data3 = google.visualization.arrayToDataTable([
['Year', 'Heartrate', 'distance'],
['2004', 400, 1500],
['2005', 60, 1600],
['2006', 1120, 1700],
['2007', 540, 1800]
]);
// Set chart options for teh first chart
var options1 = {
title: 'Heartrate vs days',
curveType: 'function',
legend: { position: 'bottom' }
};
// Set chart options for the second chart
var options2 = {
title: 'Distance vs days',
curveType: 'function',
legend: { position: 'bottom' }
};
// Set chart options for the thirdchart
var options3 = {
title: 'Heart-rate vs distance vs days',
curveType: 'function',
legend: { position: 'bottom' }
};
// Instantiate and draw our first chart, passing in some options.
var chart = new google.visualization.LineChart(document.getElementById('curve_chart1'));
chart.draw(data1, options1);
// Instantiate and draw our second chart, passing in some options.
var chart2 = new google.visualization.LineChart(document.getElementById('curve_chart2'));
chart2.draw(data2, options2);
// Instantiate and draw our second chart, passing in some options.
var chart3 = new google.visualization.LineChart(document.getElementById('curve_chart3'));
chart3.draw(data3, options3);
}
</script>
</head>
<body class="metro">
<div class="container">
<header class="margin20 nrm nlm">
<div class="clearfix">
<div class="place-right">
<form>
<div class="input-control text size6 margin20 nrm">
<img src="images/Donate.jpg" style="height: 100px; display: inline-block; margin-right: 0px; margin-left: 100px;">
</div>
</form>
</div>
<a class="place-left" href="#" title="">
<h1> <img src="images/wn8.png" style="height: 40px; display: inline-block; margin-right: 20px; margin-left: 10px;">Microsoft Band </h1>
</a>
</div>
<div class="main-menu-wrapper">
<ul class="horizontal-menu nlm">
<li><a href="#">Pictures of the trip</a></li>
<li><a href="#">Information</a></li>
<li><a href="#">Team</a></li>
</ul>
</li>
</ul>
</div>
</header>
<div id="map_canvas" style="width:1550px; height:500px"></div>
<script type="text/javascript">
function initialize() {
var poly;
var PitStops = [{
name: "Stop 1",
latlng: new google.maps.LatLng(70, -23)
}, {
name: "Stop 2",
latlng: new google.maps.LatLng(67, -50)
}, {
name: "Stop 3",
latlng: new google.maps.LatLng(60, -45)
}, {
name: "Stop 4",
latlng: new google.maps.LatLng(61, -43)
} ];
var mapOptions = {
zoom: 4,
center: new google.maps.LatLng(69,-26),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var polyOptions = {
strokeColor: '#FF0000',
strokeOpacity: 1.0,
strokeWeight: 4
}
var map2 = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
poly = new google.maps.Polyline(polyOptions);
poly.setMap(map2);
var path = poly.getPath();
var latlngbounds = new google.maps.LatLngBounds();
for (var i = 0; i < PitStops.length; i++) {
new google.maps.Marker({
position: PitStops[ i ].latlng,
map: map2,
title: PitStops[ i ].name
});
path.push(PitStops[ i ].latlng);
latlngbounds.extend(PitStops[ i ].latlng);
}
map.fitBounds(latlngbounds);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
<p class="description">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
<div id="charts">
<div id="curve_chart1" class="InsideContent">left</div>
<div id="curve_chart2" class="InsideContent">Middle</div>
<div id="curve_chart3" class="InsideContent">right</div>
<div class="clear"></div>
</div>
<div class="tile-group no-margin no-padding clearfix" style="width: 100%">
<div class="tile double ol-transparent"><img src="images/exp1.jpg" /></div>
<div class="tile double ol-transparent"><img src="images/exp1.jpg" /></div>
<div class="tile double ol-transparent"><img src="images/exp1.jpg" /></div>
<div class="tile double ol-transparent"><img src="images/exp1.jpg" /></div>
<div class="tile double ol-transparent"><img src="images/exp1.jpg" /></div>
</div>
<div class="tile-group no-margin no-padding1 clearfix" style="width: 100%;">
<a href="#"><span class="tile-group-title fg-orange">TRIP: DAY 1 <span class="icon-arrow-right-5"></span></span></a>
<div class="tile quadro double-vertical ol-transparent"><img src="images/exp1.jpg" /></div>
<div class="tile double ol-transparent"><img src="images/exp1.jpg" /></div>
<div class="tile ol-transparent"><img src="images/exp1.jpg" /></div>
<div class="tile ol-transparent"><img src="images/exp1.jpg" /></div>
<div class="tile ol-transparent"><img src="images/exp1.jpg" /></div>
<div class="tile ol-transparent"><img src="images/exp1.jpg" /></div>
<div class="tile double ol-transparent"><img src="images/exp1.jpg" /></div>
<div class="tile double ol-transparent"><img src="images/exp1.jpg" /></div>
<div class="tile double ol-transparent"><img src="images/exp1.jpg" /></div>
</div>
<div class="tile-group no-margin no-padding1 clearfix" style="width: 100%;">
<a href="#"><span class="tile-group-title fg-cobalt">TRIP: DAY 2<span class="icon-arrow-right-5"></span></span></a>
<div class="tile quadro double-vertical ol-transparent"><img src="images/exp1.jpg" /></div>
<div class="tile double ol-transparent"><img src="images/1.jpg" /></div>
<div class="tile ol-transparent"><img src="images/1.jpg" /></div>
<div class="tile ol-transparent"><img src="images/1.jpg" /></div>
<div class="tile ol-transparent"><img src="images/1.jpg" /></div>
<div class="tile ol-transparent"><img src="images/1.jpg" /></div>
<div class="tile double ol-transparent"><img src="images/1.jpg" /></div>
<div class="tile double ol-transparent"><img src="images/exp1.jpg" /></div>
<div class="tile double ol-transparent"><img src="images/exp1.jpg" /></div>
</div>
<div class="tile-group no-margin no-padding1 clearfix" style="width: 100%;">
<a href="#"><span class="tile-group-title fg-orange">TRIP: DAY 3 <span class="icon-arrow-right-5"></span></span></a>
<div class="tile quadro double-vertical ol-transparent"><img src="images/exp1.jpg" /></div>
<div class="tile double ol-transparent"><img src="images/exp1.jpg" /></div>
<div class="tile ol-transparent"><img src="images/exp1.jpg" /></div>
<div class="tile ol-transparent"><img src="images/exp1.jpg" /></div>
<div class="tile ol-transparent"><img src="images/exp1.jpg" /></div>
<div class="tile ol-transparent"><img src="images/exp1.jpg" /></div>
<div class="tile double ol-transparent"><img src="images/exp1.jpg" /></div>
<div class="tile double ol-transparent"><img src="images/exp1.jpg" /></div>
<div class="tile double ol-transparent"><img src="images/exp1.jpg" /></div>
</div>
<div class="tile-group no-margin no-padding1 clearfix" style="width: 100%;">
<a href="#"><span class="tile-group-title fg-orange">TRIP: DAY 4 <span class="icon-arrow-right-5"></span></span></a>
<div class="tile quadro double-vertical ol-transparent"><img src="images/exp1.jpg" /></div>
<div class="tile double ol-transparent"><img src="images/exp1.jpg" /></div>
<div class="tile ol-transparent"><img src="images/exp1.jpg" /></div>
<div class="tile ol-transparent"><img src="images/exp1.jpg" /></div>
<div class="tile ol-transparent"><img src="images/exp1.jpg" /></div>
<div class="tile ol-transparent"><img src="images/exp1.jpg" /></div>
<div class="tile double ol-transparent"><img src="images/exp1.jpg" /></div>
</div>
<div class="tile-group no-margin no-padding1 clearfix" style="width: 100%;">
<a href="#"><span class="tile-group-title fg-orange">TRIP: DAY 5 <span class="icon-arrow-right-5"></span></span></a>
<div class="tile quadro double-vertical ol-transparent"><img src="images/exp1.jpg" /></div>
<div class="tile double ol-transparent"><img src="images/exp1.jpg" /></div>
<div class="tile ol-transparent"><img src="images/exp1.jpg" /></div>
<div class="tile ol-transparent"><img src="images/exp1.jpg" /></div>
<div class="tile ol-transparent"><img src="images/exp1.jpg" /></div>
<div class="tile ol-transparent"><img src="images/exp1.jpg" /></div>
<div class="tile double ol-transparent"><img src="images/exp1.jpg" /></div>
</div>
<div class="tile-group no-margin no-padding1 clearfix" style="width: 100%;">
<a href="#"><span class="tile-group-title fg-orange">TRIP: DAY 6 <span class="icon-arrow-right-5"></span></span></a>
<div class="tile quadro double-vertical ol-transparent"><img src="images/exp1.jpg" /></div>
<div class="tile double ol-transparent"><img src="images/exp1.jpg" /></div>
<div class="tile ol-transparent"><img src="images/exp1.jpg" /></div>
<div class="tile ol-transparent"><img src="images/exp1.jpg" /></div>
<div class="tile ol-transparent"><img src="images/exp1.jpg" /></div>
<div class="tile ol-transparent"><img src="images/exp1\.jpg" /></div>
<div class="tile double ol-transparent"><img src="images/jek_vorobey.jpg" /></div>
</div>
<div class="tile-group no-margin no-padding1 clearfix" style="width: 100%;">
<a href="#"><span class="tile-group-title fg-orange">TRIP: DAY 7 <span class="icon-arrow-right-5"></span></span></a>
<div class="tile quadro double-vertical ol-transparent"><img src="images/exp1.jpg" /></div>
<div class="tile double ol-transparent"><img src="images/exp1.jpg" /></div>
<div class="tile ol-transparent"><img src="images/exp1.jpg" /></div>
<div class="tile ol-transparent"><img src="images/exp1.jpg" /></div>
<div class="tile ol-transparent"><img src="images/exp1.jpg" /></div>
<div class="tile ol-transparent"><img src="images/exp1.jpg" /></div>
<div class="tile double ol-transparent"><img src="images/exp1.jpg" /></div>
</div>
</div>
</div>
<div class="tile triple double-vertical ol-transparent bg-white">
<div class="tile-content">
<div class="panel no-border">
<div class="panel-header bg-darkRed fg-white">News 04-April-2016</div>
<div class="panel-content fg-dark nlp nrp">
<img src="images/jeki_chan.jpg" class="place-left margin10 nlm ntm size2">
<strong>James and his colleague soon in the north Pole/strong> The expedition is going to be happenning soon! Do not forget to [email protected]
</div>
</div>
</div>
</div>
<div class="tile triple double-vertical ol-transparent bg-white">
<div class="tile-content">
<div class="panel no-border">
<div class="panel-header bg-pink fg-white">News 10-April-2016</div>
<div class="panel-content fg-dark nlp nrp">
<img src="images/jek_vorobey.jpg" class="place-left margin10 nlm ntm size2">
<strong>James finally made it to the North Pole</strong> In the centre of the Arctic Ocean there is a Pole that has yet to be conquered. Now a British team is planning a journey of more than 1,000km (800 miles) to be the first to reach the loneliest place on the ice.
</div>
</div>
</div>
</div>
</div>
<script src="js/hitua.js"></script>
<div class="main-content clearfix">
<div class="tile-area no-padding clearfix">
</div>
<div class="tile ol-transparent bg-teal">
<div class="tile-content icon">
<span class="icon-facebook"></span>
</div>
</div>
<div class="tile ol-transparent bg-green">
<div class="tile-content icon">
<span class="icon-twitter"></span>
</div>
</div>
</div>
<footer>
<div class="bottom-menu-wrapper">
<ul class="horizontal-menu compact">
<li><a href="#">Authors: @ChantalMarin @LukmaanKolia @MarcoGreselin</a></li>
<li><a href="#">UCL</a></li>
<li><a href="#">Microsoft</a></li>
<li><a href="#">Help</a></li>
<li><a href="#">Feedback</a></li>
</ul>
</div>
</footer>
</body>
</html>
非常感谢你：d –