高德地图
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
<link rel="stylesheet" href="https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css" />
<style>
html,
body,
#container {
width: 100%;
height: 100%;
}
</style>
<title>高德地图</title>
</head>
<body>
<div id="container"></div>
<script src="https://webapi.amap.com/maps?v=1.4.15&key=yourkey"></script>
<script>
var markers=[];
var map = new AMap.Map('container', {
resizeEnable: true,
});
var center = map.getCenter();
console.log(center);
var markerinit = new AMap.Marker({
position: new AMap.LngLat(center.lng,center.lat),
});
markers.push(markerinit);
map.add(markerinit);
map.on('click', function(e) {
map.remove(markers);
var marker = new AMap.Marker({
position: new AMap.LngLat(e.lnglat.getLng(),e.lnglat.getLat()),
});
markers.push(marker);
map.add(marker);
var httpRequest = new XMLHttpRequest();
var location=e.lnglat.getLng()+","+e.lnglat.getLat()
httpRequest.open('GET', 'https://restapi.amap.com/v3/geocode/regeo?key=yourkey&location='+location, true);
httpRequest.send();
httpRequest.onreadystatechange = function () {
if (httpRequest.readyState == 4 && httpRequest.status == 200) {
var json = httpRequest.responseText;
var obj = JSON.parse(json);
var cityname="";
if(obj.regeocode.addressComponent.city.length==0){
cityname = obj.regeocode.addressComponent.province;
}else{
cityname = obj.regeocode.addressComponent.city;
}
localStorage.setItem('cityname',cityname);
}
};
})
function getpoint() {
return localStorage.getItem('cityname');
}
</script>
</body>
</html>
百度地图
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
body, html,#allmap {width: 100%;height: 100%;overflow: hidden;margin:0;font-family:"微软雅黑";}
</style>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=yourkey"></script>
<title>地址解析</title>
</head>
<body>
<div id="allmap"></div>
</body>
</html>
<script type="text/javascript">
var map = new BMap.Map("allmap");
var point = new BMap.Point(116.331398,39.897445);
map.centerAndZoom(point,18);
var geolocation = new BMap.Geolocation();
geolocation.getCurrentPosition(function(r){
if(this.getStatus() == BMAP_STATUS_SUCCESS){
map.panTo(r.point);
var pointnow = new BMap.Point(r.point.lng,r.point.lat);
map.centerAndZoom(pointnow,12);
var mknow = new BMap.Marker(pointnow);
map.addOverlay(mknow);
map.addEventListener("click", function (e) {
map.clearOverlays();
var mk = new BMap.Marker(e.point);
map.addOverlay(mk);
localStorage.setItem('pointlat',e.point.lat);
localStorage.setItem('pointlng',e.point.lng);
var pt = e.point;
var geoc = new BMap.Geocoder();
geoc.getLocation(pt, function(rs){
var addComp = rs.addressComponents;
localStorage.setItem('pointcity',addComp.city);
});
});
} else {
}
},{enableHighAccuracy: true})
function getpoint() {
return localStorage.getItem('pointcity');
}
</script>
Processed:
0.010, SQL:
9
