<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>火星坐标获取demo
</title>
<script src="http://webapi.amap.com/js/marker.js"></script>
<script type="text/javascript" src='http://webapi.amap.com/maps?v=1.3&plugin=AMap.Geolocation,AMap.ToolBar,AMap.Geocoder,AMap.PlaceSearch,AMap.Autocomplete,AMap.Driving&key=自己应用的key'></script>
<style>
#iMap{height:500px;width:600px;float:left;}
.info{float:left;margin:0 0 0 10px;}
label{width:80px;float:left;}
.detail{padding:10px;border:1px solid #aaccaa}
</style>
</head>
<body onLoad="mapInit()">
<div id="iMap"></div>
<div class="info">
<h1>坐标拾取工具(GCJ-02坐标)
</h1>
<p>说明:
</p>
<p>1、鼠标滚轮可以缩放地图,拖动地图。
</p>
<p>2、点击地图,即可获得GCJ-02的经纬度坐标,即火星坐标。
</p>
</br>
<div class="detail">
<p><span id="lnglat"> </span></p>
<p><span id="iAddress"> </span></p>
</div>
</div>
</body>
<script language="javascript">
var mapObj;
var lnglatXY;
//初始化地图
function mapInit(){
var opt = {
level: 15, //设置地图缩放级别
// center: new AMap.LngLat(116.397428, 39.90923) //设置地图中心点
} ;
mapObj = new AMap.Map("iMap", opt);
AMap.event.addListener(mapObj,'click',getLnglat); //点击事件
initFlagShop();
//mapObj.setFitView();//把所有的标记点全部显示出来,所以会有所缩放,//不知为啥,会报错
}
function geocoder() {
regeocoder(lnglatXY);//通过火星坐标获取地址名称,iner进dom
//添加标记点
var pMarker = new AMap.Marker({
position: lnglatXY,
title: '选中点',
map:mapObj
});
}
//鼠标点击,获取经纬度坐标
function getLnglat(e){
mapObj.clearMap();//应该是清除坐标的意思
initFlagShop();
var x = e.lnglat.getLng();
var y = e.lnglat.getLat();
document.getElementById("lnglat").innerHTML = x + "," + y;
lnglatXY = new AMap.LngLat(x,y);
geocoder();
}
</script>
<script type="text/javascript">
//逆地理位置编码(火星坐标---->地址)
function regeocoder(lnglatXY) { //逆地理编码
var geocoder = new AMap.Geocoder({
radius: 1000,
extensions: "all"
});
geocoder.getAddress(lnglatXY, function(status, result) {
if (status === 'complete' && result.info === 'OK') {
geocoder_CallBack(result);
}
});
// mapObj.setFitView();
}
function geocoder_CallBack(data) {
var address = data.regeocode.formattedAddress; //返回地址描述
document.getElementById("iAddress").innerHTML = address;
}
</script>
<script type="text/javascript">
//初始化标记点
function initFlagShop(){
//假数据
var shops = [{L: 23.123678, I: 113.28342600000002, lng: 113.283426, lat: 23.123678},
{L: 23.124783, I: 113.287375, lng: 113.287375, lat: 23.124783}];
//在地图上添加点标记
var markers = [];
for (var i = 0; i < shops.length; i += 1) {
var marker;
marker = new AMap.Marker({
position: shops[i],
title: '已被选作商户的点',
map:mapObj
});
}
}
</script>
</html>
js真的是门有点散漫自由的语言,不像java那么严谨规范。
转载于:https://www.cnblogs.com/sundaymorning/p/6475789.html
相关资源:JAVA上百实例源码以及开源项目