高德地图JSapi

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代码 */
                        })

 8.自定义标记及标记里面的文字

 <link rel="stylesheet" href="http://cache.amap.com/lbs/static/main1119.css"/>
    <script type="text/javascript" src="http://webapi.amap.com/maps?v=1.4.6&key=26a3fcfc5d3f17d7b276c65f84b702aa&plugin=AMap.Driving"></script>
    <script type="text/javascript" src="http://cache.amap.com/lbs/static/addToolbar.js"></script>

  AMapUI.loadUI(['overlay/SimpleMarker'], function(SimpleMarker) {
                                         new SimpleMarker({
                                             //普通文本
                                             iconLabel: '起',
                                             iconStyle: 'green',
                                             map: map,
                                             position: [arr[0].y,arr[0].x] 
                                         });
                                          new SimpleMarker({
                                             //普通文本
                                             iconLabel: '终',
                                             iconStyle: 'red',
                                             map: map,              
                                             position: [arr[arr.length-1].y,arr[arr.length-1].x] 
                                         }); 
                                     });    

 9.多边形图形添加点击事件、多边形点击事件、弹窗信息

        //在指定位置打开信息窗体
        function openInfo() {
            alert(123);
            //构建信息窗体中显示的内容
            var info = [];
            info.push("<div οnclick='abc();' class='input-card content-window-card'><div><img style=\"float:left;\" src=\" https://webapi.amap.com/images/autonavi.png \"/></div> ");
            info.push("<div style=\"padding:7px 0px 0px 0px;\"><h4>高德软件</h4><input />");
            info.push("<p class='input-item'>电话 : 010-84107000   邮编 : 100102</p>");
            info.push("<p class='input-item'>地址 :北京市朝阳区望京阜荣街10号首开广场4层</p></div></div>");

            infoWindow = new AMap.InfoWindow({
                content: info.join("")  //使用默认信息窗体框样式，显示信息内容
            });

            infoWindow.open(map, map.getCenter());
        }

             var polygon = new AMap.Polygon({
                map: map,
                path: lineArr,/* 这里是一个数组； */
                strokeColor: "#0000ff",
                strokeOpacity: 1,
                strokeWeight: 3,
                fillColor: "#CD2626",
                fillOpacity: 0.35
            });
                 //多边形添加点击事件
             polygon.on('click', function(){
                 openInfo();
                 });

 

转载于:https://www.cnblogs.com/qq376324789/p/8969247.html