高德地圖API的簡單使用

原創

2020-02-21 18:01

<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);
         }