javascript - DHTML(geoloaction属性、google map表示)

navigatorのgeolocation属性は、HTML5からブラウザの位置を取得できる。

getCurrentPosition(onSuccess, onError, options)
int watchCurrentPosition(onSuccess, onError, options)
clearWatch(watchId)

Callback関数function(position)のpositionの属性

timestamp : 時間
coords : Coordinatesオブジェクト
- longitude : 経度
- latitude : 緯度
- altitude : 高度
- accuracy : 経度と緯度の精度値、単位はm
- altitudeAccuracy : 高度の精度値、単位はm
- speed : ブラウザの移動速度
- heading : ブラウザの方向
- timestamp : 位置の時間

ブラウザの位置を取得し、googlemapに表示する

<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=SJIS" />
    <title> google map </title>
    <style type="text/css">
        html {
            height: 100%
        }
        body {
            height: 100%;
            margin: 0px;
            padding: 0px
        }
        #map_canvas {
            height: 100%
        }
    </style>
    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false">
    </script>
    <script type="text/javascript">
        function initialize() {
            // geolocation属性
            navigator.geolocation.getCurrentPosition(function(position) {
                    // ブラウザの位置
                    var latlng = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
                    // googlemapのオプション
                    var myOptions = {
                        zoom: 16,
                        center: latlng,
                        mapTypeId: google.maps.MapTypeId.ROADMAP
                    };
                    // 要素取得
                    var mapDiv = document.getElementById("map_canvas");
                    // 要素にmap表示
                    var map = new google.maps.Map(mapDiv, myOptions);
                    // マーク
                    var marker = new google.maps.Marker({
                        position: latlng,
                        animation: google.maps.Animation.BOUNCE,
                        map: map
                    });
                    // 表示文字
                    var info = new google.maps.InfoWindow({
                        content: "ココにあるよ"
                    });
                    // 表示
                    info.open(map, marker);
                },
                function(error) {
                    alert("位置取得できませんでした。");
                }, {
                    enableHighAccuracy: true,
                    maximumAge: 1000
                });
        }
    </script>
</head>

<body onload="initialize()">
    <div id="map_canvas" style="width:50%; height:50%"></div>
</body>

</html>

f:id:liguofeng29:20160214110711p:plain

liguofeng29’s blog

個人勉強用ブログだっす。

javascript - DHTML(geoloaction属性、google map表示)