高德地图JSapi-CSDN博客

1.js显示地图

<link rel="stylesheet" href="http://cache.amap.com/lbs/static/main1119.css"/><!-- 引入高德地图的样式 -->

 <script src="http://webapi.amap.com/maps?v=1.3&key=aafdf4a9edda043681ff641e6d9b9ee8"></script><!-- 传入key -->
    <script type="text/javascript" src="http://cache.amap.com/lbs/static/addToolbar.js"></script><!-- 引入高德地图js文件 -->

<div id="container" style="width:49%;height: 80%;"></div><!--放置地图的div  -->
<div id="container2" style="width:49%;height: 80%;"></div>

/* 选择容器；设置地图的中心点，并标记 */
        var marker, map = new AMap.Map("container", {
            resizeEnable: true,
            center: [114.290924,30.601394],
            zoom: 13
        }); 
        /* 设置地图的中心点，并标记 */
        var marker2, map2 = new AMap.Map("container2", {
            resizeEnable: true,
            center: [114.290924,30.601394],
            zoom: 13
        });

2.点击获取地图经纬度坐标；创建marker点

    /* 点击获取地图坐标 */
        var clickEventListener = map.on('click', function(e) {
           document.getElementById("xy").value = e.lnglat.getLng() + ',' + e.lnglat.getLat(); 
          /* 点击一次新增一个标记点 */
             var marker= new AMap.Marker({
                map:map,
                position:[e.lnglat.getLng(),e.lnglat.getLat()]
                 });                
        });

3.在地图上绘制多边形折线

  //在地图上绘制折线
        var editor={};
        editor._polygon=(function(){
            return new AMap.Polygon({
                map: map,
                path: lineArr,/* 这里是一个数组； */
                strokeColor: "#0000ff",
                strokeOpacity: 1,
                strokeWeight: 3,
                fillColor: "#CD2626",
                fillOpacity: 0.35
            });
        })();
        map.setFitView();        
        editor._polygonEditor= new AMap.PolyEditor(map, editor._polygon);

第二种绘制图形

// 绘制轨迹
                             var polyline = new AMap.Polyline({
                                map: map,
                                path: lineArr,/* 这里是坐标数组 */
                                strokeColor: "red",  //线颜色
                                strokeOpacity: 1,     //线透明度
                                strokeWeight: 1,      //线宽
                                strokeStyle: "solid"  //线样式
                            });                             
                            map.setFitView();    
                            /*  将画线的区域渲染颜色*/
                            var polygon = new AMap.Polygon({
                                map: map,
                                fillOpacity:0.4,
                                path: lineArr
                            });

4.开始编辑多边形；结束编辑多边形

    /* 开始编辑 */
        editor.startEditPolygon=function(){
            editor._polygonEditor.open();
        }
        /*结束编辑 */
        editor.closeEditPolygon=function(){
            /* 结束编辑时会自动将坐标全部存在数组内
                ；将数组转为字符串，以#号分隔 */
          var  arg = lineArr.join("#");
          document.getElementById("arg").value=arg+"#"; /* 这里是将数组转成的字符串存起来 */
          editor._polygonEditor.close();
        }

5.清除标记的方法

map.clearMap();

6，当时为了去除地图上的样式，起到刷新地图的效果；没有找到更好的方法，选择的重新加载一遍地图。覆盖之前的；也就是在div里重新加载一次；

7，自定义图标以及样式

    marker= new AMap.Marker({
                            title:name,/* 鼠标放上去显示的标题 */
                            map: map,
                            position: arr,/*  坐标数组*/
                            icon: new AMap.Icon({            
                                size: new AMap.Size(50,50),  //图标大小
                                image: "static/img/1.png",/*图片路径  */
                                imageOffset: new AMap.Pixel(0,0)/* 偏移量 */
                                        })        
                                });
            
                        marker.setLabel({//label默认蓝框白底左上角显示，样式className为：amap-marker-label；可以在css样式里调整
                            offset: new AMap.Pixel(-20,20),//修改label相对于maker的位置
                            content:"<span style='color: red'>"+name+"</span>"/* 这里写的是html代码 */
                        })