我正在嘗試在 Google 地圖上顯示標(biāo)記。對(duì)于某些診所，可能會(huì)有一個(gè)或多個(gè)位置。我正在使用 Laravel 并從 MySQL 數(shù)據(jù)庫(kù)中獲取緯度和經(jīng)度值。當(dāng)我編碼時(shí)，它只在一個(gè)位置顯示一個(gè)標(biāo)記。沒(méi)有顯示多個(gè)標(biāo)記。以下是視圖頁(yè)面中的代碼 @extends('user.layout.app') @section('content') <script src="{{ url('js/user/location.js') }}"></script> <div class="container-fluid add-location"> <div class="row"> <div class="col-md-12"> <div class="card"> <form method="post" action="" name="clinicssview" id="clinicssview" enctype="multipart/form-data" novalidate> {{ csrf_field() }} <div class="card-header"> <h4 class="card-title"> View Clinics </h4> </div> @if(!empty($errors->all())) <div class="row"> @foreach ($errors->all() as $error) <div class="col-lg-12"> <div class="alert alert-danger"> <span>{{ $error }}</span> </div> </div> @endforeach </div> @endif
2 回答
德瑪西亞99
TA貢獻(xiàn)1770條經(jīng)驗(yàn) 獲得超3個(gè)贊
在您的情況下，您在循環(huán)中設(shè)置地圖數(shù)據(jù)，for所以我猜每個(gè)循環(huán)它們都會(huì)生成新地圖，因此會(huì)覆蓋原始地圖。嘗試在for循環(huán)外設(shè)置地圖并使用這樣的標(biāo)記位置設(shè)置位置。
function initMap() {
var locations = <?php echo $locations ?>;
var i;
var map = new google.maps.Map(document.getElementById('regularMap'), {
zoom: 4
});
for (i = 0; i < locations.length; i++) {
uluru = new google.maps.LatLng(parseFloat(locations[i]['locationLat']), parseFloat(locations[i]['locationLong']));
console.log(uluru);
var marker = new google.maps.Marker({
map: map,
position: uluru,
});
marker.setMap(map);
}
}
還要marker.setMap(map);在 for 循環(huán)中添加它。
希望這對(duì)您有所幫助。
慕工程0101907
TA貢獻(xiàn)1887條經(jīng)驗(yàn) 獲得超5個(gè)贊
@extends('user.layout.app')
@section('content')
<script src="{{ url('js/user/location.js') }}"></script>
<div class="container-fluid add-location">
<div class="row">
<div class="col-md-12">
<div class="card">
<form method="post" action="" name="clinicssview" id="clinicssview" enctype="multipart/form-data" novalidate>
{{ csrf_field() }}
<div class="card-header">
<h4 class="card-title"> View Clinics </h4>
</div>
@if(!empty($errors->all()))
<div class="row"> @foreach ($errors->all() as $error)
<div class="col-lg-12">
<div class="alert alert-danger"> <span>{{ $error }}</span> </div>
</div>
@endforeach </div>
@endif
<div class="card-content">
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-6">
<div class="form-group hide">
<label class="control-label">Location
<star>*</star>
</label>
<input id="pac-input" name="location" class="controls form-control" type="text" placeholder="Search Box">
<!-- <div id="map" height="1000" width="1000"></div> -->
</div>
<h4 >Preview</h4>
<div class="form-group">
<div id="map" class="map"></div>
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-12">
<div class="form-group">
<label class="control-label">Clinic Name
<star>*</star>
</label>
<input disabled id="user_name" name="user_name" class="controls form-control" type="text" placeholder="Clinc Name" value="{{$clinic->clinicName}}">
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-12">
<div class="form-group">
<label class="control-label">Contact First Name
<star>*</star>
</label>
<input disabled id="contact_fname" name="contact_fname" class="controls form-control" type="text" placeholder="Contact First Name" value="{{$clinic->clinicFname}}">
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-12">
<div class="form-group">
<label class="control-label">Contact Second Name
<star>*</star>
</label>
<input disabled id="contact_sname" name="contact_sname" class="controls form-control" type="text" placeholder="Contact Second Name" value="{{$clinic->clinicLname}}">
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-12">
<div class="form-group">
<label class="control-label">Contact Address
<star>*</star>
</label>
<input disabled id="contact_address" name="contact_adress" class="controls form-control" type="text" placeholder="Contact Address" value="{{$clinic->clinicAddress}}">
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-12">
<div class="form-group">
<label class="control-label">Contact City
<star>*</star>
</label>
<input disabled id="contact_city" name="contact_city" class="controls form-control" type="text" placeholder="City" value="{{$clinic->clinicCity}}">
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-12">
<div class="form-group">
<label class="control-label">Contact State
<star>*</star>
</label>
<input disabled id="contact_state" name="contact_state" class="controls form-control" type="text" placeholder="State" value="{{$clinic->clinicState}}">
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-12">
<div class="form-group">
<label class="control-label">Clinic Zip
<star>*</star>
</label>
<input disabled id="zip" name="zip" class="controls form-control" type="text" placeholder="Zip" value="{{$clinic->clinicZip}}">
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-12">
<div class="form-group{{ $errors->has('email') ? ' has-error' : '' }}">
<label for="email" class="control-label">Email
<star>*</star>
</label>
<input disabled id="email" type="email" class="form-control" name="email" placeholder="Email" value="{{$clinic->clinicEmail}}">
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-12">
<div class="form-group">
<label class="control-label">Clinic Phone Number
<star>*</star>
</label>
<input disabled id="phone" name="phone" class="controls form-control" type="text" placeholder="Phone Number" value="{{$clinic->clinicPhone}}">
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-12">
<div class="form-group">
<label class="control-label">Clinic Website
<star>*</star>
</label>
<input disabled id="clinic_website" name="clinic_website" class="controls form-control" type="text" placeholder="Website" value="{{$clinic->clinicURL}}">
</div>
</div>
</div>
<div class="row">
</form>
</div>
</div>
</div>
</div>
<script>
function initMap() {
var locations = <?php echo $locations ?>;
var j;
for (j = 0; j < locations.length; j++) {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 8,
center: {lat: parseFloat(locations[j]['locationLat']), lng:parseFloat(locations[j]['locationLong'])}
});
setMarkers(map);
}
}
function setMarkers(map) {
var locations = <?php echo $locations ?>;
for (var i = 0; i < locations.length; i++) {
var marker = new google.maps.Marker({
map: map,
position: {lat: parseFloat(locations[i]['locationLat']), lng:parseFloat(locations[i]['locationLong'])},
map: map,
title: locations[i]['locationName']
});
}
}
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAVzWibWlEc43MAKZk2N1PG6suW50uTnI4&callback=initMap">
</script>
@endsection
- 2 回答
- 0 關(guān)注
- 186 瀏覽
添加回答
舉報(bào)
0/150
提交
取消