-1
我在我的網站上有一個谷歌地圖頁面，所以一切都很好正常的瀏覽器視圖，但是當我嘗試從響應視圖（移動）看這個頁面時，地圖是在與複選框相同的位置，我希望它位於複選框下方，因此不會妨礙它，在響應視圖中如何定位它？如何在響應視圖中定位谷歌地圖
普通視圖 
移動視圖
Googlemaps.js
var map;
var infowindow;
var lat;
var lng;
var types = [];
var service;
$('#details').hide();
initGeolocation();
function initGeolocation()
{
if(navigator.geolocation)
{
// Call getCurrentPosition with success and failure callbacks
navigator.geolocation.getCurrentPosition(success, fail);
}
else
{
alert("Sorry, your browser does not support geolocation services.");
}
}
function success(position)
{
lng = position.coords.longitude;
lat = position.coords.latitude;
initMap();
}
function fail()
{
alert("Could not obtain location");
}
function initMap() {
//var pyrmont = {lat: -33.867, lng: 151.195};
var pyrmont = {lat: lat, lng: lng};
map = new google.maps.Map(document.getElementById('map'), {
center: pyrmont,
zoom: 15
});
infowindow = new google.maps.InfoWindow();
service = new google.maps.places.PlacesService(map);
if(types.length > 0) {
$.each(types, function(key, value) {
service.nearbySearch({
location: pyrmont,
radius: 8000,
type: [value]
}, callback);
});
}
}
function callback(results, status) {
if (status === google.maps.places.PlacesServiceStatus.OK) {
for (var i = 0; i < results.length; i++) {
createMarker(results[i]);
}
}
}
function createMarker(place) {
var placeLoc = place.geometry.location;
var marker = new google.maps.Marker({
map: map,
position: place.geometry.location,
types: place.types
});
google.maps.event.addListener(marker, 'click', function() {
service.getDetails({
placeId: place.place_id
}, function (place, status) {
/*
var marker = new google.maps.Marker({
name: place.name,
map: map,
position: place.geometry.location,
types: place.types
});
markers.push(marker);
*/
if (status === google.maps.places.PlacesServiceStatus.OK) {
var review = [];
if (undefined !== place.reviews && place.reviews.length) {
for (var i = 0; i < place.reviews.length; i++) {
if (place.reviews[i].text) {
review.push('<b>Author Name:</b> ' + place.reviews[i].author_name + '</br>' + '<b>Review:</b> ' + place.reviews[i].text + '</br>');
}
}
} else {
review.push('Not Available');
}
$('#details').show();
$('#name').html(place.name);
$('#rating').html(place.rating + ' ' + 'Star(s)');
$('#address').html(place.adr_address);
$('#review').html(review);
}
}
);
infowindow.setContent(place.name);
infowindow.open(map, this);
});
}
function gymMarkers() {
var check = $('#gym').is(':checked');
if (check) {
types.push('gym');
initGeolocation();
} else {
var removeItem = 'gym';
types = jQuery.grep(types, function(value) {
return value != removeItem;
});
initGeolocation();
}
$('#details').hide();
}
//Park markers
function parkMarkers() {
var check = $('#park').is(':checked');
if (check) {
types.push('park');
initGeolocation();
} else {
var removeItem = 'park';
types = jQuery.grep(types, function(value) {
return value != removeItem;
});
initGeolocation();
}
$('#details').hide();
}
//Store markers
function storeMarkers() {
var check = $('#store').is(':checked');
if (check) {
types.push('store');
initGeolocation();
} else {
var removeItem = 'store';
types = jQuery.grep(types, function(value) {
return value != removeItem;
});
initGeolocation();
}
$('#details').hide();
}
//Museum markers
function museumMarkers() {
var check = $('#museum').is(':checked');
if (check) {
types.push('museum');
initGeolocation();
} else {
var removeItem = 'museum';
types = jQuery.grep(types, function(value) {
return value != removeItem;
});
initGeolocation();
}
$('#details').hide();
}
//Zoo markers
function zooMarkers() {
var check = $('#zoo').is(':checked');
if (check) {
types.push('zoo');
initGeolocation();
} else {
var removeItem = 'zoo';
types = jQuery.grep(types, function(value) {
return value != removeItem;
});
initGeolocation();
}
$('#details').hide();
}
//Cafe markers
function cafeMarkers() {
var check = $('#cafe').is(':checked');
if (check) {
types.push('cafe');
initGeolocation();
} else {
var removeItem = 'cafe';
types = jQuery.grep(types, function(value) {
return value != removeItem;
});
initGeolocation();
}
$('#details').hide();
}
function atmMarkers() {
var check = $('#atm').is(':checked');
if (check) {
types.push('atm');
initGeolocation();
} else {
var removeItem = 'atm';
types = jQuery.grep(types, function(value) {
return value != removeItem;
});
initGeolocation();
}
$('#details').hide();
}
function bankMarkers() {
var check = $('#bank').is(':checked');
if (check) {
types.push('bank');
initGeolocation();
} else {
var removeItem = 'bank';
types = jQuery.grep(types, function(value) {
return value != removeItem;
});
initGeolocation();
}
$('#details').hide();
}
function barMarkers() {
var check = $('#bar').is(':checked');
if (check) {
types.push('bar');
initGeolocation();
} else {
var removeItem = 'bar';
types = jQuery.grep(types, function(value) {
return value != removeItem;
});
initGeolocation();
}
$('#details').hide();
}
function meal_takeawayMarkers() {
var check = $('#meal_takeaway').is(':checked');
if (check) {
types.push('meal_takeaway');
initGeolocation();
} else {
var removeItem = 'meal_takeaway';
types = jQuery.grep(types, function(value) {
return value != removeItem;
});
initGeolocation();
}
$('#details').hide();
}
function night_clubMarkers() {
var check = $('#night_club').is(':checked');
if (check) {
types.push('night_club');
initGeolocation();
} else {
var removeItem = 'night_club';
types = jQuery.grep(types, function(value) {
return value != removeItem;
});
initGeolocation();
}
$('#details').hide();
}
function parkingMarkers() {
var check = $('#parking').is(':checked');
if (check) {
types.push('parking');
initGeolocation();
} else {
var removeItem = 'parking';
types = jQuery.grep(types, function(value) {
return value != removeItem;
});
initGeolocation();
}
$('#details').hide();
}
front.blade.php
@extends('layouts.master')
<style>
div#searchBar{
height:65px;
width:400px;
float:right;
padding-right:40px;
}
div#map{
float:left;
padding-right:50px;
}
</style>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
@section('content')
<div class="container">
<!-- This is a *view* - HTML markup that defines the appearance of your UI -->
<div id='searchBar'>
<div class="panel panel-default">
<div class="panel-body">
<blockquote> <p> <h2>Search: </h2></blockquote><strong data-bind="text: location"></strong></p><br>
<p><input type='checkbox' onclick="gymMarkers();" id='gym'> Gyms
<input type='checkbox' onclick="parkMarkers();" id='park'>Parks <input type='checkbox' onclick="barMarkers();" id='bar'> Bar </p><br>
<p><input type='checkbox' onclick="storeMarkers();" id='store'> Stores <input type='checkbox' onclick="museumMarkers();" id='museum'> Museums <input type='checkbox' onclick="meal_takeawayMarkers();" id='meal_takeaway'> Meal takeaway</p><br>
<p><input type='checkbox' onclick="zooMarkers();" id='zoo'> Zoos
<input type='checkbox' onclick="cafeMarkers();" id='cafe'> Cafes <input type='checkbox' onclick="night_clubMarkers();" id='night_club'> Night club</p><br>
<p><input type='checkbox' onclick="atmMarkers();" id='atm'> ATM <input type='checkbox' onclick="bankMarkers();" id='bank'> Bank <input type='checkbox' onclick="parkingMarkers();" id='parking'> Parking </p><br>
</div>
</div>
</div>
{{--Google maps--}}
<div id="map"></div>
</div>
<div class="container">
{{--Cafe details--}}
<div id="details" style="visibility:false">
<table class="table table-bordered table-hover" style="width: 800px; margin-top: 10px;">
<thead>
<tr><th scope="row">
<td colspan="2" style="text-align: center;"><b>Description</b></td>
</tr>
<tr>
</thead>
<td width="150"><b>Name</b></td>
<td id="name"></td>
</tr>
<tr>
<td width="150"><b>Rating</b></td>
<td id="rating"></td>
</tr>
<tr>
<td width="150"><b>Address</b></td>
<td id="address"></td>
</tr>
<tr>
<td width="150"><b>User Review</b></td>
<td id="review"></td>
</tr>
</table>
</table>
</div>
{{--Review--}}
<div>
<ul class="reviews"></ul>
</div>
{{--Example--}}
<div>
<ul class="example"></ul>
</div>
</div>
</div>
@endsection
master.blad.php
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>
Laramap
</title>
</meta>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- CSRF Token -->
<meta name="csrf-token" content="{{ csrf_token() }}">
<title>{{ config('app.name', 'Laravel') }}</title>
<!-- Styles -->
<link href="{{ asset('css/app.css') }}" rel="stylesheet">
<link href="{{asset('css/style.css')}}" rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="{{asset('css/main.css')}}">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />
</link>
</head>
<body>
<div id="app">
<nav class="navbar navbar-default navbar-static-top">
<div class="container">
<div class="navbar-header">
@if (Auth::guest())
@else
@endif
<!-- Collapsed Hamburger -->
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#app-navbar-collapse">
<span class="sr-only">Toggle Navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<!-- Branding Image -->
<a class="navbar-brand" href="{{ url('/') }}">
{{ config('app.name', 'Laravel') }}
</a>
</div>
<div class="collapse navbar-collapse" id="app-navbar-collapse">
<!-- Left Side Of Navbar -->
<ul class="nav navbar-nav">
@if (Auth::guest())
@else
@endif
<li>
<div class="for-group" style="padding-top:10px;">
<input type="text" id="searching_for" placeholder="Search for a user" style="width: 300px;" class="form-control">
</div>
</li>
</ul>
<a class="navbar-brand" href="{{ url('/front') }}">
{{ config('front', 'Nearby') }}
</a>
<a class="navbar-brand" href="{{ url('/suggest') }}">
{{ config('suggest', 'Suggest Me') }}
</a>
<a class="navbar-brand" href="{{ url('/calendar') }}">
{{ config('calendar', 'Events') }}
</a>
<a class="navbar-brand" href="{{ url('/home') }}">
{{ config('home', 'Home') }}
</a>
<!-- Right Side Of Navbar -->
<ul class="nav navbar-nav navbar-right">
<!-- Authentication Links -->
@if (Auth::guest())
<li><a href="{{ route('login') }}">Login</a></li>
<li><a href="{{ route('register') }}">Register</a></li>
@else
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">
{{ Auth::user()->name }} <span class="caret"></span>
</a>
<ul class="dropdown-menu" role="menu">
<li><a href="{{url('/home')}}"><i class="fa fa-btn fa-cogs"></i>Home</a></li>
<li><a href="{{url('/profile/'.Auth::user()->id)}}"><i class="fa fa-btn fa-user"></i>My Profile</a></li>
<li><a href="{{url('/settings')}}"><i class="fa fa-btn fa-cogs"></i>Settings</a></li>
<li><a href="{{url('/front')}}"><i class="fa fa-btn fa-cogs"></i>Map</a></li>
<li>
<a href="{{ route('logout') }}"
onclick="event.preventDefault();
document.getElementById('logout-form').submit();">
Logout
</a>
<form id="logout-form" action="{{ route('logout') }}" method="POST" style="display: none;">
{{ csrf_field() }}
</form>
</li>
</ul>
</li>
@endif
</ul>
</div>
</div>
</nav>
@yield('content')
<script crossorigin="anonymous" integrity="sha256-cCueBR6CsyA4/9szpPfrX3s49M9vUU5BgtiJj06wt/s=" src="https://code.jquery.com/jquery-3.1.0.min.js">
</script>
{{-- Google map api --}}
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyC4NNeHbNb1_nFhKnckNxMKpxXeQUecenM&libraries=places&sensor=false" async defer></script>
<script src="{{asset('js/googleMaps.js')}}"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js">
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<script src="//code.jquery.com/jquery-1.12.0.min.js"></script>
<script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script src="{{ URL::to('src/js/app2.js') }}"></script>
@yield('js')
</body>
</html>
#map {max-width：100％;} – syntaxe
@syntaxe沒有改變任何東西 – Lucy