高德地图相关

【引入文件】

<script src="https://webapi.amap.com/maps?v=1.4.15&key=密钥&callback=init&plugin=AMap.DistrictSearch,AMap.MouseTool,AMap.RangingTool,AMap.Driving"></script>

 

【地图位置】

<div class="amap-container" id="amapContainer"></div>

 

【加载地图】

var map = new AMap.Map('amapContainer', {
                mapStyle: 'amap://styles/normal',
                resizeEnable: true,
                rotateEnable: true,
                pitchEnable: true,
                zoom: 16,
                pitch: 60,
                rotation: -15,
                viewMode: '3D',
                buildingAnimation: true,
                doubleClickZoom: false,
                zooms: [3, 20],
                center: [LON, LAT]
            });

 

【切换地图风格】

function changeMapStyle() {
                if($("#amapContainer").hasClass("StyleIsChanged")) {
                    $("#amapContainer").removeClass("StyleIsChanged");
                    map.setMapStyle('amap://styles/normal');
                } else {
                    $("#amapContainer").addClass("StyleIsChanged");
                    map.setMapStyle('amap://styles/darkblue');
                }
            }

 

【marker点击失效】

viewMode: '3D',              //加载地图时，模式选3D

 

【覆盖物】

//自定义元素
var markerContent = "<div class=\"icon-wrapper\">"+
                    "        <div class=\"pulse\"></div>"+
                    "        <div class=\"pulse1\"></div>"+
                    "        <div class=\"pulse2\"></div>"+
                    "        <div class=\"pulse3\"></div>"+
                    "    </div>";

//自定义图标
var Icon = new AMap.Icon({
size: new AMap.Size(300, 300),
image: './img/fire2.png',
});

// 传入 marker
                var iconMarker = new AMap.Marker({
                    position: new AMap.LngLat(LON,LAT),
                    // icon: Icon,
                    content: markerContent,
                    offset: new AMap.Pixel(-100, -100)
                });
                map.clearMap();
                map.add(iconMarker);
                map.setZoomAndCenter(14, [LON,LAT]);
//注意偏移量，为容器宽高的一半

 【加载行政区划】　　　　　　 

　　　　　　　　　　

            drawBounds();
            map.on("zoomchange",function(e){
                let zoom = map.getZoom()
　　　　　　　　　　// 该写法不支持IE

　　　　　　　　　　  // polygons.forEach(

                   // item=>{

                   //     zoom > 12? item.hide():item.show()

                   // })

　　　　　　　　　 //兼容IE的写法
                polygons.forEach(function(element) {
                    zoom > 12 ? element.hide() : element.show();
                });
            })

　　　　　　　　　 var polygons=[];
                var district = null;
                //加载行政区划插件
                function drawBounds() {
                    if(!district){
                        //实例化DistrictSearch
                        var opts = {
                            subdistrict: 0,   //获取边界不需要返回下级行政区
                            extensions: 'all',  //返回行政区边界坐标组等具体信息
                            level: 'district'  //查询行政级别为 市
                        };
                        district = new AMap.DistrictSearch(opts);
                    }
                    //行政区查询
                    district.setLevel("city")
                    district.search("城市名", function(status, result) {
                        map.remove(polygons)//清除上次结果
                        polygons = [];
                        var bounds = result.districtList[0].boundaries;
                        if (bounds) {
                            for (var i = 0, l = bounds.length; i < l; i++) {
                                //生成行政区划polygon
                                var polygon = new AMap.Polygon({
                                    strokeWeight: 1,
                                    path: bounds[i],
                                    fillOpacity: 0.4,
                                    fillColor: '#9370DB',
                                    strokeColor: '#9370DB'
                                });
                                polygons.push(polygon);
                            }
                        }
                        map.add(polygons)
                        map.setFitView(polygons);//视口自适应
                    });
                }
            }

【点击marker，弹窗自定义窗口】

// 鼠标点击标注，显示详细信息
            function addClickHandler(marker){
                var content;
                var obj =new Object();
                marker.on("click",function(e){
                    obj.jd= '120.772201', 
                    obj.wd= '31.827279',
                    content = "";
                    openInfo(content,obj);
                })
            }
            function openInfo(content,obj){
                var infoWindow = new AMap.InfoWindow({
                    content: content
                });
                infoWindow.open(map,[obj.jd, obj.wd])
            }

传入marker调用 addClickHandler(iconMarker);

【地图在onload中加载时，onload外函数无法访问map对象】

// 地图加载
                this.map = new AMap.Map('amapContainer', {
                    // mapStyle: 'amap://styles/normal',
                    resizeEnable: true,
                    rotateEnable: true,
                    pitchEnable: true,
                    zoom: 14,
                    pitch: 60,
                    rotation: -15,
                    viewMode: '3D',
                    // viewMode: '2D',
                    buildingAnimation: true,
                    doubleClickZoom: false,
                    zooms: [3, 20],
                    center: [120.55538, 31.87532]
                });

 【在init中的写法完整版，位置需放在api引入之前】

    <script type="text/javascript">
        window.init = function(){
            this.map = new AMap.Map('amapContainer', {
                viewMode:'3D',
                mapStyle: 'amap://styles/76af0e5e254ef97f4f3075382807af23',
                zoom: 16,
                center: [lon, lat]
            });
            drawBounds();
            map.on("zoomchange",function(e){
                let zoom = map.getZoom()
                // polygons.forEach(
                // item=>{
                //     zoom > 12? item.hide():item.show()
                // })
                polygons.forEach(function(element) {
                    zoom > 12 ? element.hide() : element.show();
                });
            })
            var polygons=[];
            var district = null;
            //加载行政区划插件
            function drawBounds() {
                if(!district){
                    //实例化DistrictSearch
                    var opts = {
                        subdistrict: 0,   //获取边界不需要返回下级行政区
                        extensions: 'all',  //返回行政区边界坐标组等具体信息
                        level: 'district'  //查询行政级别为 市
                    };
                    district = new AMap.DistrictSearch(opts);
                }
                //行政区查询
                district.setLevel("city")
                district.search("城市名", function(status, result) {
                    map.remove(polygons)//清除上次结果
                    polygons = [];
                    var bounds = result.districtList[0].boundaries;
                    if (bounds) {
                        for (var i = 0, l = bounds.length; i < l; i++) {
                            //生成行政区划polygon
                            var polygon = new AMap.Polygon({
                                strokeWeight: 1,
                                path: bounds[i],
                                fillOpacity: 0.4,
                                fillColor: '#2DCED4',
                                strokeColor: '#34C29F'
                            });
                            polygons.push(polygon);
                        }
                    }
                    map.add(polygons)
                    map.setFitView(polygons);//视口自适应
                });
            }
        }
    </script>