PictureMap/map_view_script.js at master · aoitan/PictureMap · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
var map;
function map_view_loading() {
    var geo = navigator.geolocation;
    if (geo) {
        geo.getCurrentPosition(
            function (position) {
                window.console.log("測位成功: " + position.coords.latitude + ", " + position.coords.longitude);
                var latlng = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
                map.panTo(latlng);
            },
            function (error) {
                window.alert("測位エラー: " + error.code);
            },
            {
                timeout: 10000
            }
        );
        mapView(35.6853264, 139.7530997);
    } else {
        window.alert("geolocation is null");
    }
}

function mapView(latitude, longitude) {
    var mapOptions = {
        zoom: 10,
        center: new google.maps.LatLng(latitude, longitude),
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    map = new google.maps.Map(document.getElementById('map-canvas'),
        mapOptions);
}

function makeMarker(file)
{
    // 画像のURL
    var url = window.URL.createObjectURL(file);

    // 画像サイズ取得
    var reader = new FileReader();
    reader.addEventListener('load', function(e) {
        var img = new Image();
        img.addEventListener('load', function (inE) {
            var imgObj = inE.target;

            // 高さが32になるように拡縮倍率を計算
            var height = imgObj.naturalHeight;
            var width = imgObj.naturalWidth;
            var scale = 32 / height;

            // 倍率をかけた幅
            var scaledWidth = width * scale;

            // マーカー画像
            var icon = new google.maps.MarkerImage(url,
                new google.maps.Size(width, height),
                new google.maps.Point(0, 0),
                new google.maps.Point(0, 0),
                new google.maps.Size(scaledWidth, 32));

            // 位置情報
            var pos = map.getCenter();

            // マーカーを作る
            var marker = new google.maps.Marker({
                position: pos,
                map: map,
                icon: icon
            });

            // マーカーがクリックされたときに表示するinfoウィンドウを作る
            var infoWindow = new google.maps.InfoWindow({
                maxWidth: 320
            });

            // マーカーがクリックされたイベントハンドラ
            google.maps.event.addListener(marker, 'click', function() {
                infoWindow.setContent(
                    // infoウィンドウで表示する内容のHTML
                    '<a href="' + url + '"><img src="' + url + '"></a><br />' +
                    '緯度：' + pos.lat() + '<br />経度：' + pos.lng()
                );
                infoWindow.open(map, marker);
            });
        }, false);
        img.src = e.target.result;
    }, false);
    reader.readAsDataURL(file);
}

function relocation()
{
    var geo = navigator.geolocation;
    if (geo) {
        geo.getCurrentPosition(
            function (position) {
                window.console.log("測位成功: " + position.coords.latitude + ", " + position.coords.longitude);
                var latlng = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
                map.panTo(latlng);
            },
            function (error) {
                window.alert("測位エラー: " + error.code);
            },
            {
                timeout: 60000
            }
        );
    } else {
        window.alert("geolocation is null");
    }
}

function pasteImageDispatch()
{
    if (navigator.userAgent.indexOf("Mobile") > 0) {
        pasteImageMobile();
    }
    else {
        pasteImagePc();
    }
}

function pasteImageMobile()
{
    // イメージピッカー
    var pick = new MozActivity({
       name: "pick",
       data: {
           type: ["image/png", "image/jpg", "image/jpeg"]
       }
    });

    // 取得成功時の処理
    pick.addEventListener('success', function () {
        makeMarker(this.result.blob);
    }, false);

    // 取得失敗時の処理
    pick.addEventListener('error', function () {
        window.alert("画像取得失敗");
    }, false);
}

function pasteImagePcOnChange(fs)
{
    makeMarker(fs[0]);
}

function pasteImagePc()
{
    // ファイルピッカー
    var filePick = document.getElementById("paste_image");
    filePick.click();
}