高德地图API的简单使用

<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">
<style type="text/css">
body, html, #container {
    height: 100%;
    margin: 0px;
    font-size: 12px;
}
//这个是去掉地图上左下角的高德图标
.amap-logo,.amap-copyright{
    display: none!important;
}
</style>
<link rel="stylesheet"
    href="http://cache.amap.com/lbs/static/main1119.css" />
<script src="http://cache.amap.com/lbs/static/es5.min.js"></script>
<script
    src="http://webapi.amap.com/maps?v=1.4.0&key=你申请的key"></script>
<script type="text/javascript"
    src="http://cache.amap.com/lbs/static/addToolbar.js"></script>

下面贴出部分代码

        var map = new AMap.Map('container', {
            resizeEnable : true
        });

        var marker,circle,polygon;

        AMap.plugin([ 'AMap.ToolBar', 'AMap.Scale'], function() {
            map.addControl(new AMap.ToolBar());
            map.addControl(new AMap.Scale());
            //map.addControl(new AMap.MapType({defaultType:0,showRoad:true}));
        });

        function setMapPosition(lng,lat){
            map.setZoomAndCenter(12,new AMap.LngLat(""+lng,""+lat));
        }

        function clearMarker(){
            marker.setMap(null);
        }

        function clearCircle(){
            circle.setMap(null);
        }

        function clearPolygon(){
            polygon.setMap(null);
        }

         function addMarker(lng,lat) {
               marker = new AMap.Marker({
                    icon: "http://webapi.amap.com/theme/v1.3/markers/n/mark_b.png"
                });
                marker.setPosition(new AMap.LngLat(""+lng,""+lat));
                marker.setMap(map);
            }

        //这是设置电子围栏(圆形的,参数是经度、纬度、半径)
         function addCircle(lng,lat,r) {
             r = parseFloat(r)*1000;
             circle = new AMap.Circle({
                center: new AMap.LngLat(""+lng,""+lat),// 圆心位置
                radius: r, //半径,单位:米
                strokeColor: "#F33", //线颜色
                strokeOpacity: 1, //线透明度
                strokeWeight: 1, //线粗细度
                fillColor: "#ee2200", //填充颜色
                fillOpacity: 0.15//填充透明度
            });
            map.setZoomAndCenter(12,new AMap.LngLat(""+lng,""+lat));
            circle.setMap(map);
         }

        //设置电子围栏(矩形的,参数是经度、纬度、宽度、高度),算法得到的结果是近似的,但相差不是很大
         function addPolygon(lng,lat,w,h){
             var R = 6378.137 * 1;
             lng = lng * 1;
             lat = lat * 1;
             w = w * 1;
             h = h * 1;
             var a = 0.25*w/R;
             var b = 360/Math.PI;
             var c = lat*Math.PI/180;
             var m1 = lng + (b)*Math.asin(Math.sin(a)/Math.cos(c));
             var m2 = lng - (b)*Math.asin(Math.sin(a)/Math.cos(c));
             var n1 = lat + 90*h/(R*Math.PI);
             var n2 = lat - 90*h/(R*Math.PI);
             var polygonArr = new Array();
             polygonArr.push(new AMap.LngLat(""+m1,""+n1));
             polygonArr.push(new AMap.LngLat(""+m2,""+n1));
             polygonArr.push(new AMap.LngLat(""+m2,""+n2));
             polygonArr.push(new AMap.LngLat(""+m1,""+n2));
             polygon = new AMap.Polygon({
                    path: polygonArr,//设置多边形边界路径
                    strokeColor: "#F33", //线颜色
                    strokeOpacity: 1, //线透明度
                    strokeWeight: 1,    //线宽
                    fillColor: "#ee2200", //填充色
                    fillOpacity: 0.15//填充透明度
                });
                map.setZoomAndCenter(12,new AMap.LngLat(""+lng,""+lat));
                polygon.setMap(map);
         }
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值