基于谷歌地图的位置跟踪界面

Google Map Based Location Tracker 用来跟踪和标记活动轨迹（每日足迹）的一个移动应用界面设计。 Note: 本例需要能访问Google地图API。

map, app

《three.js使用多个渐变torus模拟光环光晕》申请公开！

第三方库
作品简介 1844
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

var gmap = document.getElementById('map');
var map;
var settings = {
    home: {
        latitude: 43.92025,
        longitude: 12.90030
    },
    icon_url: '',
    zoom: 16
}

var coords = new google.maps.LatLng(settings.home.latitude, settings.home.longitude);

var options = {
    zoom: settings.zoom,
    scrollwheel: false,
    center: coords,
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    mapTypeControl: true,
    scaleControl: true,
    streetViewControl: false,
    zoomControlOptions: {
        style: google.maps.ZoomControlStyle.DEFAULT
    },
    overviewMapControl: true,
    styles: [{
        "featureType": "water",
        "elementType": "geometry",
        "stylers": [{
            "color": "#e9e9e9"
        }, {
            "lightness": 17
        }]
    }, {
        "featureType": "landscape",
        "elementType": "geometry",
        "stylers": [{
            "color": "#f5f5f5"
        }, {
            "lightness": 20
        }]
    }, {
        "featureType": "road.highway",
        "elementType": "geometry.fill",
        "stylers": [{
            "color": "#ffffff"
        }, {
            "lightness": 17
        }]
    }, {
        "featureType": "road.highway",
        "elementType": "geometry.stroke",
        "stylers": [{
            "color": "#ffffff"
        }, {
            "lightness": 29
        }, {
            "weight": 0.2
        }]
    }, {
        "featureType": "road.arterial",
        "elementType": "geometry",
        "stylers": [{
            "color": "#ffffff"
        }, {
            "lightness": 18
        }]
    }, {
        "featureType": "road.local",
        "elementType": "geometry",
        "stylers": [{
            "color": "#ffffff"
        }, {
            "lightness": 16
        }]
    }, {
        "featureType": "poi",
        "elementType": "geometry",
        "stylers": [{
            "color": "#f5f5f5"
        }, {
            "lightness": 21
        }]
    }, {
        "featureType": "poi.park",
        "elementType": "geometry",
        "stylers": [{
            "color": "#dedede"
        }, {
            "lightness": 21
        }]
    }, {
        "elementType": "labels.text.stroke",
        "stylers": [{
            "visibility": "on"
        }, {
            "color": "#ffffff"
        }, {
            "lightness": 16
        }]
    }, {
        "elementType": "labels.text.fill",
        "stylers": [{
            "saturation": 36
        }, {
            "color": "#333333"
        }, {
            "lightness": 40
        }]
    }, {
        "elementType": "labels.icon",
        "stylers": [{
            "visibility": "off"
        }]
    }, {
        "featureType": "transit",
        "elementType": "geometry",
        "stylers": [{
            "color": "#f2f2f2"
        }, {
            "lightness": 19
        }]
    }, {
        "featureType": "administrative",
        "elementType": "geometry.fill",
        "stylers": [{
            "color": "#fefefe"
        }, {
            "lightness": 20
        }]
    }, {
        "featureType": "administrative",
        "elementType": "geometry.stroke",
        "stylers": [{
            "color": "#fefefe"
        }, {
            "lightness": 17
        }, {
            "weight": 1.2
        }]
    }]
};

map = new google.maps.Map(gmap, options);

var end = new google.maps.Marker({
    position: new google.maps.LatLng(43.92127, 12.89816),
    map: map,
    icon: {
        url: 'http://www.supah.it/dribbble/020/end.png?v=3',
        origin: new google.maps.Point(0, 0)
    },
    draggable: false
});

var start = new google.maps.Marker({
    position: new google.maps.LatLng(43.92000, 12.89788),
    map: map,
    icon: {
        url: 'http://www.supah.it/dribbble/020/start.png?v=3',
        origin: new google.maps.Point(0, 0)
    },
    draggable: false
});

var info = new google.maps.InfoWindow({
    content: settings.text
});

var runningCoords = [{
    lat: 43.92003,
    lng: 12.89786
}, {
    lat: 43.91992,
    lng: 12.89796
}, {
    lat: 43.91937,
    lng: 12.89887
}, {
    lat: 43.91929,
    lng: 12.89890
}, {
    lat: 43.91928,
    lng: 12.89904
}, {
    lat: 43.91906,
    lng: 12.89927
}, {
    lat: 43.91883,
    lng: 12.89973
}, {
    lat: 43.91785,
    lng: 12.90166
}, {
    lat: 43.91868,
    lng: 12.90242
}, {
    lat: 43.91875,
    lng: 12.90252
}, {
    lat: 43.91878,
    lng: 12.90262
}, {
    lat: 43.91886,
    lng: 12.90261
}, {
    lat: 43.91959,
    lng: 12.90254
}, {
    lat: 43.92024,
    lng: 12.90243
}, {
    lat: 43.92114,
    lng: 12.90215
}, {
    lat: 43.92230,
    lng: 12.90177
}, {
    lat: 43.92244,
    lng: 12.90163
}, {
    lat: 43.92251,
    lng: 12.90137
}, {
    lat: 43.92236,
    lng: 12.90056
}, {
    lat: 43.92205,
    lng: 12.89938
}, {
    lat: 43.92133,
    lng: 12.89819
}];

/* No Animation */
/*
var runPath = new google.maps.Polyline({
  path: runningCoords,
  geodesic: true,
  strokeColor: '#58a7e2',
  strokeOpacity: 1.0,
  strokeWeight: 3
});
runPath.setMap(map);
*/

/* Animation */
var i = 0;

function animPath() {

if (i > runningCoords.lenght) {
        return false;
    }

dept_lat = runningCoords[i].lat;
    dept_lng = runningCoords[i].lng;
    arr_lat = runningCoords[i + 1].lat;
    arr_lng = runningCoords[i + 1].lng;

google.maps.event.addListenerOnce(map, 'idle', function() {
    setTimeout(init, 300);
});

$('.reload').click(function() {
    location.href = location.href;
});

编译

CSS

/*--------------------
Body
--------------------*/

*,
*::before,
*::after {
    box-sizing: border-box;
}
body {
    height: 100vh;
    margin: 0;
    background: -webkit-radial-gradient(ellipse farthest-corner at center bottom, #69d2fb 0%, #20438e 100%);
    background: radial-gradient(ellipse farthest-corner at center bottom, #69d2fb 0%, #20438e 100%);
    color: #42474f;
    font-family: 'Roboto', sans-serif;
}
/*--------------------
App
--------------------*/

.app {
    position: relative;
    top: 50%;
    left: 50%;
    width: 320px;
    height: 568px;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    background: #fff;
    padding: 2px 2px 30px;
    border: 4px solid #fff;
    border-radius: 10px;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
}
.app h1 {
    position: absolute;
    z-index: 10;
    top: 0;
    left: 0;
    width: 100%;
    height: 44px;
    font-size: 18px;
    font-weight: 300;
    padding: 10px 10px;
    background: #f9f9f9;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
}
.app h1 img {
    vertical-align: middle;
    position: relative;
    top: -4px;
    margin-right: 10px;
}
.app h1 small {
    position: relative;
    top: 6px;
    float: right;
    font-size: 14px;
    color: #58A7E2;
}
.app #map {
    position: absolute;
    z-index: 1;
    width: 100%;
    height: 490px;
    top: 0;
    left: 0;
}
.app .info {
    position: absolute;
    z-index: 10;
    bottom: 0;
    left: -1px;
    width: 101%;
    height: 115px;
    background: #fff;
    box-shadow: 0 -4px 30px rgba(0, 0, 0, 0.1);
    overflow: hidden;
}
.app .info-box {
    position: relative;
    background: #fff;
    padding: 10px;
    width: 50%;
    height: 60px;
    float: left;
    border-bottom: 1px solid #ddd;
    border-right: 1px solid #ddd;
}
.app .info-box img {
    position: absolute;
    left: 9px;
    top: 12px;
    width: 25px;
    height: auto;
    height: auto;
}
.app .info-box mark {
    position: absolute;
    left: 43px;
    top: 13px;
    font-size: 22px;
    font-weight: 300;
    padding: 0;
    background: none;
    color: #393e47;
}
.app .info-box small {
    position: absolute;
    left: 43px;
    top: 38px;
    display: block;
    font-size: 10px;
    text-transform: uppercase;
    color: #959da6;
}
.app .info-box:nth-child(2) img {
    top: 10px;
}
.app .info-box:nth-child(2n) {
    border-right: none;
}
.app .info-box:nth-child(n+3) {
    border-bottom: none;
}
.reload {
    position: absolute;
    bottom: 15px;
    right: 15px;
    background: #fff;
    border: none;
    border-radius: 20px;
    outline: none !important;
    font-size: 11px;
    line-height: 1.5;
    padding: 8px 12px;
    text-transform: uppercase;
    z-index: 10;
    cursor: pointer;
    box-shadow: 0 6px 7px #244B94;
    -webkit-transition: all 0.1s cubic-bezier(0.67, 0.13, 0.1, 0.81);
    transition: all 0.1s cubic-bezier(0.67, 0.13, 0.1, 0.81);
}
.reload:hover {
    box-shadow: 0 4px 4px #244B94;
    -webkit-transform: translateY(1px);
    transform: translateY(1px);
}
.reload:active {
    box-shadow: 0 1px 2px #244B94;
    -webkit-transform: translateY(2px);
    transform: translateY(2px);
}
.reload svg {
    vertical-align: middle;
    position: relative;
    top: -2px;
}

HTML

<div class="app">
    <h1>
    <img src="https://www.supah.it/dribbble/020/runner.png" />Today's workout <small>09/03/2016</small>
  </h1>
    <div id="map"></div>
    <div class="info">
        <div class="info-box">
            <img src="https://www.supah.it/dribbble/020/route.png" />
            <mark><span>5.1</span> KM</mark>
            <small>Total distance</small>
        </div>
        <div class="info-box">
            <img src="https://www.supah.it/dribbble/020/time.png" />
            <mark><span>25</span>'<span>34</span>"</mark>
            <small>Spend time</small>
        </div>
        <div class="info-box">
            <img src="https://www.supah.it/dribbble/020/heart.png" />
            <mark><span>103</span> BPM</mark>
            <small>Average pulse</small>
        </div>
        <div class="info-box">
            <img src="https://www.supah.it/dribbble/020/average.png" />
            <mark><span>5.4</span> KM/H</mark>
            <small>Average distance</small>
        </div>
    </div>
</div>

<button class="reload">
    <svg xmlns="https://www.w3.org/2000/svg" xmlns:xlink="https://www.w3.org/1999/xlink" version="1.1" id="Capa_1" x="0px" y="0px" width="16px" height="16px" viewBox="0 0 92.33 92.33" style="enable-background:new 0 0 92.33 92.33;" xml:space="preserve">
        <g>
            <path d="M70.598,16.753c-1.722-1.24-4.113-0.852-5.349,0.866c-1.242,1.716-0.853,4.113,0.865,5.35   c13.613,9.818,18.021,27.857,10.482,42.89c-4.082,8.138-11.088,14.202-19.726,17.066c-8.636,2.871-17.877,2.2-26.013-1.879   c-8.134-4.083-14.197-11.088-17.066-19.722c-2.866-8.642-2.197-17.877,1.886-26.014c4.958-9.89,14.458-16.779,25.413-18.429   c0.074-0.008,0.137-0.036,0.211-0.053l0.157,7.571c0.021,0.839,0.542,1.585,1.321,1.889c0.782,0.305,1.672,0.11,2.25-0.496   l10.904-11.379c0.794-0.828,0.764-2.142-0.062-2.933L44.492,0.577c-0.606-0.582-1.499-0.739-2.267-0.399   c-0.251,0.108-0.476,0.269-0.662,0.462c-0.372,0.389-0.585,0.919-0.579,1.479l0.151,7.212c-0.385-0.063-0.78-0.087-1.188-0.027   c-13.418,2.021-25.052,10.46-31.125,22.571C-1.499,52.451,6.85,77.584,27.424,87.901c5.989,3.005,12.362,4.429,18.646,4.429   c15.306,0,30.065-8.439,37.382-23.028C92.688,50.884,87.284,28.782,70.598,16.753z"
            fill="#404853" />
    </svg> reload
</button>

Google Map Based Location Tracker 用来跟踪和标记活动轨迹（每日足迹）的一个移动应用界面设计。 Note: 本例需要能访问Google地图API。

map, app

编辑器支持Emmet

快捷键

Google Map Based Location Tracker 用来跟踪和标记活动轨迹（每日足迹）的一个移动应用界面设计。 Note: 本例需要能访问Google地图API。

map, app

基于React和mapbox的位置跟踪器

基于D3.js实现的热点地图

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：