<!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那么严谨规范。