Allah Rızası İçin Çok Acillll tasarım düzenleme

Rapor et
Soru

Bu soru rapor edilmelidir hissediyorum neden kısaca açıklayınız.

Rapor et
İptal

Benim yaptıgım tasarım resmı ektedır.Ancak ben de boyle bır tarz ıstıyorum ama guzel durmuyor bende.Yardım edersenız cok sevınırım.

Arkadaşlar iyi günler benim bir projem var google maps üzerinden javascript ile kodlamasını tamamladım ancak tasarım kısmı var.Tasarımda oyle abartılı birşey aramamaktayım ancak ben beceremedim.Kaynak kodlar aşağıdadır.Yardımcı olabilecek varsa sevinirim.

<pre>

<html>
<head>
<style type=”text/css”>
.gm-style .gm-style-iw{font-weight:300;font-size:13px;overflow:hidden}.gm-style .gm-iw{color:#2c2c2c}.gm-style .gm-iw b{font-weight:400}.gm-style .gm-iw a:link,.gm-style .gm-iw a:visited{color:#4272db;text-decoration:none}.gm-style .gm-iw a:hover{color:#4272db;text-decoration:underline}.gm-style .gm-iw .gm-title{font-weight:400;margin-bottom:1px}.gm-style .gm-iw .gm-basicinfo{line-height:18px;padding-bottom:12px}.gm-style .gm-iw .gm-website{padding-top:6px}.gm-style .gm-iw .gm-photos{padding-bottom:8px;-ms-user-select:none;-moz-user-select:none;-webkit-user-select:none}.gm-style .gm-iw .gm-sv,.gm-style .gm-iw .gm-ph{cursor:pointer;height:50px;width:100px;position:relative;overflow:hidden}.gm-style .gm-iw .gm-sv{padding-right:4px}.gm-style .gm-iw .gm-wsv{cursor:pointer;position:relative;overflow:hidden}.gm-style .gm-iw .gm-sv-label,.gm-style .gm-iw .gm-ph-label{cursor:pointer;position:absolute;bottom:6px;color:#fff;font-weight:400;text-shadow:rgba(0,0,0,0.7) 0 1px 4px;font-size:12px}.gm-style .gm-iw .gm-stars-b,.gm-style .gm-iw .gm-stars-f{height:13px;font-size:0}.gm-style .gm-iw .gm-stars-b{position:relative;background-position:0 0;width:65px;top:3px;margin:0 5px}.gm-style .gm-iw .gm-rev{line-height:20px;-ms-user-select:none;-moz-user-select:none;-webkit-user-select:none}.gm-style.gm-china .gm-iw .gm-rev{display:none}.gm-style .gm-iw .gm-numeric-rev{font-size:16px;color:#dd4b39;font-weight:400}.gm-style .gm-iw.gm-transit{margin-left:15px}.gm-style .gm-iw.gm-transit td{vertical-align:top}.gm-style .gm-iw.gm-transit .gm-time{white-space:nowrap;color:#676767;font-weight:bold}.gm-style .gm-iw.gm-transit img{width:15px;height:15px;margin:1px 5px 0 -20px;float:left}.gm-iw {text-align:left;}.gm-iw .gm-numeric-rev {float:left;}.gm-iw .gm-photos,.gm-iw .gm-rev {direction:ltr;}.gm-iw .gm-stars-f, .gm-iw .gm-stars-b {background:url(“https://maps.gstatic.com/mapfiles/api-3/images/review_stars.png”) no-repeat;background-size: 65px 26px;float:left;}.gm-iw .gm-stars-f {background-position:left -13px;}.gm-iw .gm-sv-label,.gm-iw .gm-ph-label {left: 4px;}</style><style type=”text/css”>.gm-style .gm-style-mtc label,.gm-style .gm-style-mtc div{font-weight:400}</style><style type=”text/css”>@media print { .gm-style .gmnoprint, .gmnoprint { display:none }}@media screen { .gm-style .gmnoscreen, .gmnoscreen { display:none }}</style><link type=”text/css” rel=”stylesheet” href=”https://fonts.googleapis.com/css?family=Roboto:300,400,500,700″><style type=”text/css”>.gm-style .gm-style-cc span,.gm-style .gm-style-cc a,.gm-style .gm-style-mtc div{font-size:10px}</style><style type=”text/css”>.gm-style{font-family:Roboto,Arial,sans-serif;font-size:11px;font-weight:400;text-decoration:none}.gm-style img{max-width:none}</style><style id=”stndz-style”>div[class*=”item-container-obpd”], a[data-redirect*=”paid.outbrain.com”], a[onmousedown*=”paid.outbrain.com”] { display: none !important; } a div[class*=”item-container-ad”] { height: 0px !important; overflow: hidden !important; position: absolute !important; } div[data-item-syndicated=”true”] { display: none !important; } .grv_is_sponsored { display: none !important; } .zergnet-widget-related { display: none !important; }
</style>
<style>
html,
body,
#map {
margin: 0;
padding: 0;
height: 100%;
}
.map{
float:right;}
td {
font-size: 18px;
}

input {
font-family: Roboto, Arial, sans-serif;
font-size: 22px;
padding: 7px 8px;
border: 0px;
box-shadow: 0px 0px 6px #999;
border-radius: 10px;
}
input[type=text] {
width: 300px;
-webkit-transition: width .35s ease-in-out;
transition: width .35s ease-in-out;
}
input[type=text]:focus {
width: 400px;
}
input[type=”submit”] {
padding: 6px 20px;
margin: 20px 0 0 0;
align:center;
}

#left-bar
{
height:100%;
width:23%;
float:left;
}
#inner-top
{
width:100%;
height:40%;
background-color:rgba(0,0,0,.9) !important;
}
#innerbottom {
width:100%;
height:60%;
overflow:scroll;
}
.adp-directions {
width: 100%;
}
form label {
display: block;
padding: 4px 0px;
}
.autoLink{
color: white;

}
p{
font-size: 12pt;
font-family: Roboto, Arial, sans-serif;
}
</style>
<script type=”text/javascript” charset=”UTF-8″ src=”https://maps.googleapis.com/maps-api-v3/api/js/27/3/intl/tr_ALL/common.js”></script><script type=”text/javascript” charset=”UTF-8″ src=”https://maps.googleapis.com/maps-api-v3/api/js/27/3/intl/tr_ALL/util.js”></script><script type=”text/javascript” charset=”UTF-8″ src=”https://maps.googleapis.com/maps-api-v3/api/js/27/3/intl/tr_ALL/infowindow.js”></script><script type=”text/javascript” charset=”UTF-8″ src=”https://maps.googleapis.com/maps-api-v3/api/js/27/3/intl/tr_ALL/map.js”></script><script type=”text/javascript” charset=”UTF-8″ src=”https://maps.googleapis.com/maps-api-v3/api/js/27/3/intl/tr_ALL/controls.js”></script><script type=”text/javascript” charset=”UTF-8″ src=”https://maps.googleapis.com/maps-api-v3/api/js/27/3/intl/tr_ALL/places_impl.js”></script><script type=”text/javascript” charset=”UTF-8″ src=”https://maps.googleapis.com/maps-api-v3/api/js/27/3/intl/tr_ALL/geometry.js”></script><script type=”text/javascript” charset=”UTF-8″ src=”https://maps.googleapis.com/maps-api-v3/api/js/27/3/intl/tr_ALL/directions.js”></script><script type=”text/javascript” charset=”UTF-8″ src=”https://maps.googleapis.com/maps-api-v3/api/js/27/3/intl/tr_ALL/onion.js”></script><script type=”text/javascript” charset=”UTF-8″ src=”https://maps.googleapis.com/maps-api-v3/api/js/27/3/intl/tr_ALL/marker.js”></script><script type=”text/javascript” charset=”UTF-8″ src=”https://maps.googleapis.com/maps-api-v3/api/js/27/3/intl/tr_ALL/stats.js”></script><script type=”text/javascript” charset=”UTF-8″ src=”https://maps.googleapis.com/maps-api-v3/api/js/27/3/intl/tr_ALL/poly.js”></script>
<link href=”https://fonts.googleapis.com/icon?family=Material+Icons” rel=”stylesheet”>
</head>
<body>
<script src=”https://maps.googleapis.com/maps/api/js?libraries=places”></script>
<script src=”https://cdn.rawgit.com/googlemaps/v3-utility-library/master/routeboxer/src/RouteBoxer.js” type=”text/javascript”></script>
<div id=”left-bar”>
<div id=”inner-top”>

<label>
<i class=”material-icons” style=”font-size:17px”>place</i> Nereden:<br />
<input type=”text” id=”from”>
<br><p><a href=”#” class=”autoLink” style=”display: none;”><i class=”material-icons” style=”font-size:15px”>my_location</i> Şuanki konumumu kullan: <span> bulunamadı </span></p></a>
</label>
<label>
<i class=”material-icons” style=”font-size:17px”>place</i> Nereye: <br />
<input type=”text” id=”to” >
</label><br>
<label>
<i class=”material-icons” style=”font-size:17px”>place</i> Waypoint: <br />
<input type=”text” id=”waypoints” onkeyup=”veri()” />
</label><br>

<input type=”submit” onclick=”route()” value=”Rotayı Hesapla”>

</div> <div id=”innerbottom”>
<h4>Rota üzerinde görmek istediklerinizi seçiniz</h4>

<select id=”type”>
<option value=”mosque”>Cami</option>
<option value=”hospital”>Hastane</option>
<option value=”hospital”>Park</option>
<option value=”hospital”>Alışveriş Merkezi</option>
</select>
</div>
</div>
<div id=”map” style=”width:77%; height:100%;position: relative; overflow: hidden;” > </div>

<label>keyword</label>

<input type=”text” id=”keyword” value=””>
<label>name</label>
<input type=”text” id=”name” value=””>
<div id=”towns”></div>
Box within at least
<input type=”text” id=”distance” value=”3″ size=”2″>miles of the route from

<br>
<script type=”text/javascript”>
var map = null;
var boxpolys = null;
var directions = null;
var routeBoxer = null;
var distance = null; // km
var service = null;
var gmarkers = [];
var boxes = null;
var infowindow = new google.maps.InfoWindow();

function initialize() {

// Haritanın merkezini Kayseri olarak ayarla
var mapOptions = {
center: new google.maps.LatLng(38.7322222,35.4852778),
mapTypeId: google.maps.MapTypeId.ROADMAP,
zoom: 5,
styles:
[{“featureType”:”administrative”,”elementType”:”labels.text.fill”,”stylers”:[{“color”:”#444444″}]},{“featureType”:”landscape”,”elementType”:”geometry.fill”,”stylers”:[{“color”:”#cacaca”}]},{“featureType”:”landscape.natural.terrain”,”elementType”:”geometry.fill”,”stylers”:[{“color”:”#90c383″},{“visibility”:”on”}]},{“featureType”:”poi.attraction”,”elementType”:”geometry.fill”,”stylers”:[{“visibility”:”on”},{“color”:”#a9a9a9″}]},{“featureType”:”poi.business”,”elementType”:”geometry.fill”,”stylers”:[{“color”:”#a9a9a9″},{“visibility”:”on”}]},{“featureType”:”poi.government”,”elementType”:”geometry.fill”,”stylers”:[{“visibility”:”on”},{“color”:”#a9a9a9″}]},{“featureType”:”poi.medical”,”elementType”:”geometry.fill”,”stylers”:[{“color”:”#c34131″},{“visibility”:”on”}]},{“featureType”:”poi.park”,”elementType”:”geometry.fill”,”stylers”:[{“visibility”:”on”},{“color”:”#b3ebb0″}]},{“featureType”:”poi.place_of_worship”,”elementType”:”geometry.fill”,”stylers”:[{“visibility”:”on”},{“color”:”#a9a9a9″}]},{“featureType”:”poi.school”,”elementType”:”geometry.fill”,”stylers”:[{“color”:”#e1e262″}]},{“featureType”:”poi.sports_complex”,”elementType”:”geometry.fill”,”stylers”:[{“color”:”#a9a9a9″}]},{“featureType”:”road”,”elementType”:”all”,”stylers”:[{“saturation”:-100},{“lightness”:45}]},{“featureType”:”road.highway”,”elementType”:”all”,”stylers”:[{“visibility”:”simplified”}]},{“featureType”:”road.highway”,”elementType”:”geometry.fill”,”stylers”:[{“color”:”#f1f1f1″},{“visibility”:”on”}]},{“featureType”:”road.highway”,”elementType”:”geometry.stroke”,”stylers”:[{“color”:”#8f8f8f”},{“visibility”:”on”},{“weight”:”1″}]},{“featureType”:”road.arterial”,”elementType”:”geometry.fill”,”stylers”:[{“color”:”#f3f3f3″}]},{“featureType”:”road.arterial”,”elementType”:”geometry.stroke”,”stylers”:[{“color”:”#b7b7b7″},{“visibility”:”on”}]},{“featureType”:”road.local”,”elementType”:”geometry.fill”,”stylers”:[{“visibility”:”on”},{“color”:”#efefef”}]},{“featureType”:”road.local”,”elementType”:”geometry.stroke”,”stylers”:[{“color”:”#a59686″}]},{“featureType”:”transit”,”elementType”:”all”,”stylers”:[{“visibility”:”off”}]},{“featureType”:”transit.station.airport”,”elementType”:”geometry.fill”,”stylers”:[{“color”:”#a9a9a9″},{“visibility”:”on”}]},{“featureType”:”transit.station.bus”,”elementType”:”geometry.fill”,”stylers”:[{“visibility”:”on”},{“color”:”#a9a9a9″}]},{“featureType”:”transit.station.rail”,”elementType”:”geometry.fill”,”stylers”:[{“visibility”:”on”},{“color”:”#a9a9a9″}]},{“featureType”:”water”,”elementType”:”all”,”stylers”:[{“color”:”#7dabd0″},{“visibility”:”on”}]},{“featureType”:”water”,”elementType”:”geometry.fill”,”stylers”:[{“visibility”:”on”}]}]
};

map = new google.maps.Map(document.getElementById(“map”), mapOptions);
service = new google.maps.places.PlacesService(map);

routeBoxer = new RouteBoxer();

directionService = new google.maps.DirectionsService();
directionsRenderer = new google.maps.DirectionsRenderer({
draggable: true,
map: map
});

// Eğer URL sonunda parametreler varsa, location.search de buluncaklar
// “?marker=3” gibi

// ilk karakteri görmezden gelicez çünkü “?” ile işimiz yok
var query = location.search.substring(1);

// geri kalanını her “&” için ayır ve “argname=value” listesine eşleştir
var pairs = query.split(“&”);
for (var i = 0; i < pairs.length; i++) {
// her bir eşi “=” ile ayır, argname ve value elde etmek için yapıyoruz
var pos = pairs[i].indexOf(“=”);
var argname = pairs[i].substring(0, pos).toLowerCase();
var value = pairs[i].substring(pos + 1).toLowerCase();

// her bir olası argnamei çalıştır – eğer space kullanma ihtimali varsa unescape() kullan
if (argname == “to”) {
document.getElementById(‘to’).value = unescape(value);
}
if (argname == “from”) {
document.getElementById(‘from’).value = unescape(value);
}

if (argname == “dist”) {
document.getElementById(‘distance’).value = parseFloat(value);
}
if (argname == “type”) {
document.getElementById(‘type’).value = unescape(value);
}
if (argname == “waypoints”) {
document.getElementById(‘waypoints’).value = unescape(value);
}
if (argname == “keyword”) {
document.getElementById(‘keyword’).value = unescape(value);
}

if (argname == “submit”) {
route();
}
}

}

function route() {
// Bir önce rota kutularını temizler
clearBoxes();

// Mil kilometreye çevrildi.
distance = parseFloat(document.getElementById(“distance”).value) * 1.609344;

var request = {
origin: document.getElementById(“from”).value,
destination: document.getElementById(“to”).value,

travelMode: google.maps.DirectionsTravelMode.DRIVING
}

// Rota isteniyor
directionService.route(request, function(result, status) {
if (status == google.maps.DirectionsStatus.OK) {
directionsRenderer.setDirections(result);

// İlk rotanın etrafı kutu içine alınıyor
var path = result.routes[0].overview_path;
boxes = routeBoxer.box(path, distance);
// alert(boxes.length);
//Boxes çizerek konumları belli bölgeye alındı drawBoxes();
findPlaces(0);
} else {
alert(“Directions query failed: ” + status);
}
});
}

// Kutuların dizisini haritada çiz
function drawBoxes() {
boxpolys = new Array(boxes.length);
for (var i = 0; i < boxes.length; i++) {
boxpolys[i] = new google.maps.Rectangle({
bounds: boxes[i],
fillOpacity: 0,
strokeOpacity: 1.0,
strokeColor: ‘#000000’,
strokeWeight: 1,
map: map
});
}
}

var waypts = document.getElementById(‘waypoints’).value;
function findPlaces(searchIndex) {
var type = document.getElementById(‘type’).value;
var keyword = document.getElementById(‘keyword’).value;
var name = document.getElementById(‘name’).value;
var request = {
bounds: boxes[searchIndex],
waypoints: [{location:waypts, stopover: true}],
optimizeWaypoints: true,
};
if (!!type && (type != “”)) {
if (type.indexOf(‘,’) > 0)
request.types = type.split(‘,’);
else
request.types = [type];
}
if (!!keyword && (keyword != “”)) request.keyword = keyword;
if (!!name && (name != “”)) request.name = name;
service.radarSearch(request, function(results, status) {
if (status == google.maps.places.PlacesServiceStatus.OK) {
document.getElementById(‘innerbottom’).innerHTML
for (var i = 0, result; result = results[i/1.2]; i++) {
var marker = createMarker(result);
}
} else {
document.getElementById(‘innerbottom’).innerHTML ;
}
if (status != google.maps.places.PlacesServiceStatus.OVER_QUERY_LIMIT) {
searchIndex++;
if (searchIndex < boxes.length)
findPlaces(searchIndex);
} else { // 1 saniye bekle ve tekrar dene
setTimeout(“findPlaces(” + searchIndex + “)”, 10);
}

});

}

// Haritada gözüken kareleri temzile
function clearBoxes() {
if (boxpolys != null) {
for (var i = 0; i < boxpolys.length; i++) {
boxpolys[i].setMap(null);
}
}
boxpolys = null;
}

function createMarker(place) {
var placeLoc = place.geometry.location;
if (place.icon) {
var image = new google.maps.MarkerImage(
place.icon, new google.maps.Size(100, 100),
new google.maps.Point(0, 0), new google.maps.Point(17, 34),
new google.maps.Size(25, 25));
} else var image = {
url: ‘https://developers.google.com/maps/documentation/javascript/examples/full/images/beachflag.png’,
size: new google.maps.Size(20,15),
anchor: new google.maps.Point(3.5, 3.5)

};

var marker = new google.maps.Marker({
map: map,
icon: image,

animation: google.maps.Animation.DROP ,
position: place.geometry.location
});
var request = {
reference: place.reference
};
google.maps.event.addListener(marker, ‘click’, function() {
service.getDetails(request, function(place, status) {
if (status == google.maps.places.PlacesServiceStatus.OK) {
var contentStr = ‘<h5>’ + place.name + ‘</h5><p>’ + place.formatted_address+'<br>’+'<input type=”submit” value=”ADD WAYPOİNT” id =”waypoints” name=”waypoints”/>’;
if (!!place.formatted_phone_number) contentStr += ‘<br>’ + place.formatted_phone_number;
if (!!place.website) contentStr += ‘<br><a target=”_blank” href=”‘ + place.website + ‘”>’ + place.website + ‘</a>’;
contentStr += ‘<br>’ + ‘</p>’;
infowindow.setContent(contentStr);
infowindow.open(map, marker);
} else {
var contentStr = “<h5>No Result, status=” + status + “</h5>”;
infowindow.setContent(contentStr);
infowindow.open(map, marker);
}
});

});
gmarkers.push(marker);
if (!place.name) place.name = “Yer” +gmarkers.length ;
var innerbottom_html = “<a href=’javascript:google.maps.event.trigger(gmarkers[” + parseInt(gmarkers.length – 1) + “],\”click\”);’>” + place.name + “</a><br>”;
document.getElementById(‘innerbottom’).innerHTML += innerbottom_html;

}

google.maps.event.addDomListener(window, ‘load’, initialize);

</script>

</body>
</html>

</pre>

 

Yardımcı olursanız sevınırım.


Cevaplandı 0
CSS 3 sene 4 Cevap 768 görüntüleme Intern 0

Yazar HakkındaIntern

Cevaplar ( 4 )

  1. Avatar

    Bu cevap rapor edilmelidir hissediyorum neden kısaca açıklayınız.

    Rapor et
    İptal

    Sen bizden yeniden tasarım istiyorsun kardeşim. Sen yapmaya çalış takıldığın yerleri sadece kısım olarak sor yardımcı olalım. Bunu benim yapmam sana birşey kazandırmaz.

    • baran2323

      Bu cevap rapor edilmelidir hissediyorum neden kısaca açıklayınız.

      Rapor et
      İptal

      Ben yeni tasarım istiyorum çünkü javascript kullandığım için dışarıdan aldıgım templatelere uydurmaya çalıştıgımda haritayı görünteleyemiyorum ve hatanın da ismi yazmadığından böyle bir yardım talebinde bulundum.Proje ödevimin sadece küçük bir parçası aslında .Sadece attığım resimdeki sol taraf düzenlenecek ama bir türlü olmuyor.

  2. Avatar

    Bu cevap rapor edilmelidir hissediyorum neden kısaca açıklayınız.

    Rapor et
    İptal

    öncelikle sana tavsiyem ne yaptığını anlamak kod okunurluğunu artırmak için css ve js dosyalarını ayrı tut.

    Daha sonra nerede nasıl bi şekillendirme yapmak istiyorsan onu sor.

    Zaten okul projelerinde tasarıma o kadar önem vermezler evenlar çalışıyorsa pek sorun olmaz.

    En iyi cevap
  3. Avatar

    Bu cevap rapor edilmelidir hissediyorum neden kısaca açıklayınız.

    Rapor et
    İptal

    Tasarımla alakalı yararlanabileceğiniz birkaç site var.

    1-) http://www.androidvisual.com -> Kendi sitem 🙂 Göz atmanızı tavsiye ederim.
    2-) github -> her alanda olduğu gibi android alanında da en büyük kütüphane diyebilirim.

Cevap bırak

Gözat

KOD PAYLAŞIRKEN DİKKAT!!!!

HTML kod paylaşmak için

<pre class="html">HTML KOD</pre>
XML kod paylaşmak için
<pre class="xml">XML KOD</pre>
Diğer dillerde(php,java,android,javasvript,c# vs..) kod paylaşmak için
<pre>KOD</pre>
tagları arasında paylaşmayı unutmayın.