高德地图JSApi

<!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">&nbsp;</span></p>

            <p><span id="iAddress">&nbsp;</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那么严谨规范。
巴特西

高德地图JSApi

最新文章

热门文章
