Create a gist now

Instantly share code, notes, and snippets.

@fooleap /amap.html
Last active May 3, 2017

What would you like to do?
结合七牛和高德地图 API 显示照片位置
<!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>
<!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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment