Google 地图 API 当我向下滚动而不是在页面上向下滚动时，网站上的 v3 会放大地图
Google Maps API v3 on website zooms in the map when I scroll down instead of going lower on the page
我正在使用 Google 地图 API。
网站呈现，但问题是当我向下滚动而不是在网站上向下滚动时，它开始放大，这使得网站上的导航非常烦人。
我希望它做什么：减少动态，增加静态。等待用户点击+/-按钮来放大。无法自动缩放。
这里有人理解我的问题吗？有人知道如何解决这个问题吗？
非常感谢！ :)
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 Donate@
</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>
要在地图上禁用滚轮，您可以使用 scrollwheel: false
var mapOptions = {
zoom: 10,
mapTypeId: google.maps.MapTypeId.SATELLITE,
scrollwheel: false
}
map = new google.maps.Map(document.getElementById("map"), mapOptions);
我正在使用 Google 地图 API。
网站呈现，但问题是当我向下滚动而不是在网站上向下滚动时，它开始放大，这使得网站上的导航非常烦人。
我希望它做什么：减少动态，增加静态。等待用户点击+/-按钮来放大。无法自动缩放。
这里有人理解我的问题吗？有人知道如何解决这个问题吗？
非常感谢！ :)
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 Donate@
</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>
要在地图上禁用滚轮，您可以使用 scrollwheel: false
var mapOptions = {
zoom: 10,
mapTypeId: google.maps.MapTypeId.SATELLITE,
scrollwheel: false
}
map = new google.maps.Map(document.getElementById("map"), mapOptions);