fooleap/amap.html

## amap.html
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.3, user-scalable=no" />
        <title>相片地图</title>
        <style>
            html,body, #map{
                margin: 0;
                width: 100%;
                height: 100%;
            }
            .thumb{
                padding: 4px;
                background-color: #fff;
                border-radius: 4px;
                position: relative;
            }
            .thumb:before{
                position: absolute;
                content: "";
                display: block;
                width: 20px;
                height: 20px;
                background-color: #fff;
                border-radius: 4px;
                transform: rotate(45deg);
                bottom: -10px;
                left: 50%;
                margin-left: -10px;
            }
            .thumb-image{
                position: relative;
                z-index: 1;
                width: 80px;
                border-radius: 4px;
                display: block;
            }

        </style>
        <script src="//webapi.amap.com/maps?v=1.3&key=29076a35fd5abd25add2eb561488a73f"></script>
    </head>
    <body>
        <div id="map"></div>
        <script>

            function getQuery(variable) {
                var query = window.location.search.substring(1);
                var vars = query.split("&");
                for (var i=0;i<vars.length;i++) {
                    var pair = vars[i].split("=");
                    if(pair[0] == variable){return pair[1];}
                }
                return(false);
            }
            var point = getQuery('location').split(',')
            var map = new AMap.Map('map',{
                resizeEnable: true,
                center: point,
                zoom: 13
            });
            new AMap.Marker({
                map: map,
                position: point,
                offset: new AMap.Pixel(-44, -98),
                content: '<div class="thumb"><img class="thumb-image" src="'+getQuery('image')+'?imageView2/1/w/100/h/100" /></div>'
            });

        </script>
    </body>
</html>

## show-photo-location-with-qiniu-and-amap-api.html
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.3, user-scalable=no" />
        <title>结合七牛和高德地图 API 显示照片位置</title>
        <style>
            html,body{
                margin: 0;
                width: 100%;
                height: 100%;
            }
            #map{
                width: 640px;
                height: 427px;
            }
        </style>
        <script src="//cdn.rawgit.com/wandergis/coordtransform/master/index.js"></script>
    </head>
    <body>
        <img src="http://source.fooleap.org/show-photo-location-on-map-with-qiniu-and-amap-api.jpg_640" width="640">
        <h4>逆地理编码</h4>
        <p>上图摄于<span id="address"></span></p>
        <h4>静态地图</h4>
        <p><img id="staticmap" width="640" /></p>
        <h4>动态地图</h4>
        <p><iframe id="map" frameborder="0"></iframe></p>
        <script>
            var imgSrc = document.getElementsByTagName('img')[0].src.split('_')[0];
            var xhrExif = new XMLHttpRequest();
            xhrExif.open('GET', imgSrc + '?exif', true);
            xhrExif.onreadystatechange = function() {
                if (this.readyState == 4 && this.status == 200)
                {
                    var data = JSON.parse(this.responseText);
                    var olat = data.GPSLatitude.val.split(', ');
                    var olng = data.GPSLongitude.val.split(', ');
                    var lat=0, lng=0;
                    for( var e = 0; e < olat.length; e++ ){
                        lat += olat[e] / Math.pow(60, e);
                        lng += olng[e] / Math.pow(60, e);
                    }
                    lat = data.GPSLatitudeRef.val == 'S' ? -lat: lat;
                    lng = data.GPSLongitudeRef.val == 'W' ? -lng: lng;
                    var coord = coordtransform.wgs84togcj02(lng, lat).join(',');

                    var xhrRegeo = new XMLHttpRequest();
                    xhrRegeo.open('GET', '//restapi.amap.com/v3/geocode/regeo?key=890ae1502f6ab57aaa7d73d32f2c8cc1&location='+coord, true);
                    xhrRegeo.onreadystatechange = function() {
                        if (this.readyState == 4 && this.status == 200){
                            var data = JSON.parse(this.responseText);
                            if( data.info == 'OK' ){
                                document.getElementById('address').innerHTML = data.regeocode.addressComponent.city + data.regeocode.addressComponent.district + data.regeocode.addressComponent.township;
                            }
                        }
                    }
                    xhrRegeo.send(null);
                    document.getElementById('staticmap').src = 'http://restapi.amap.com/v3/staticmap?zoom=12&size=640*427&scale=2&markers=-1,'+imgSrc+'?imageView2/1/w/100/h/100/format/png.png,0:'+coord+'&key=890ae1502f6ab57aaa7d73d32f2c8cc1';
                    document.getElementById('map').src = '//cdn.rawgit.com/fooleap/e8435c2f1f6764a7672ffbf0fd6e4698/raw/b359442370d543a8e4bc4fa72ad24af9b388bbaf/amap.html?location='+coord+'&image='+imgSrc;
                }
            };
            xhrExif.send(null);
        </script>
    </body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.3, user-scalable=no" />
	<title>相片地图</title>
	<style>
	html,body, #map{
	margin: 0;
	width: 100%;
	height: 100%;
	}
	.thumb{
	padding: 4px;
	background-color: #fff;
	border-radius: 4px;
	position: relative;
	}
	.thumb:before{
	position: absolute;
	content: "";
	display: block;
	width: 20px;
	height: 20px;
	background-color: #fff;
	border-radius: 4px;
	transform: rotate(45deg);
	bottom: -10px;
	left: 50%;
	margin-left: -10px;
	}
	.thumb-image{
	position: relative;
	z-index: 1;
	width: 80px;
	border-radius: 4px;
	display: block;
	}

	</style>
	<script src="//webapi.amap.com/maps?v=1.3&key=29076a35fd5abd25add2eb561488a73f"></script>
	</head>
	<body>
	<div id="map"></div>
	<script>

	function getQuery(variable) {
	var query = window.location.search.substring(1);
	var vars = query.split("&");
	for (var i=0;i<vars.length;i++) {
	var pair = vars[i].split("=");
	if(pair[0] == variable){return pair[1];}
	}
	return(false);
	}
	var point = getQuery('location').split(',')
	var map = new AMap.Map('map',{
	resizeEnable: true,
	center: point,
	zoom: 13
	});
	new AMap.Marker({
	map: map,
	position: point,
	offset: new AMap.Pixel(-44, -98),
	content: '<div class="thumb"><img class="thumb-image" src="'+getQuery('image')+'?imageView2/1/w/100/h/100" /></div>'
	});

	</script>
	</body>
	</html>