使用高德地图（js）制作区域显示

最新推荐文章于 2024-05-20 10:44:53 发布

河上街

最新推荐文章于 2024-05-20 10:44:53 发布

阅读量2.1k

点赞数

分类专栏：高德api开发

本文链接：https://blog.csdn.net/liujucai/article/details/105437548

版权

高德api开发专栏收录该内容

2 篇文章 0 订阅

订阅专栏

高德地图 JS API https://lbs.amap.com/api/javascript-api/summary/

实现效果展示：

<!doctype html>
<html>
<head>
    <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">
    <title>地图遮罩</title>
    <style>
    html,
    body,
    #container {
        height: 100%;
        background-color: rgba(0,0,0);
    }
    </style>
</head>
<body>
<div id="container"></div>
<script src="https://webapi.amap.com/maps?v=1.4.15&key=申请的key&plugin=AMap.DistrictSearch"></script>
<script src="//a.amap.com/jsapi_demos/static/resource/heatmapData.js"></script>
<script>
    var map = new AMap.Map('container', {
        zoom:13,
        center:[116.360889,39.924331],
         pitch: 0,
        viewMode: '3D',
        mapStyle:'amap://styles/40035571fa9fdd05a26fe1b05f48fdc9',
        /* 禁止缩放*/
        zoomEnable:false,
       /* 禁止拖动*/
        dragEnable: false,
    });
   /* new AMap.TileLayer({
    map: map,
    tileUrl: 'http://mt{1,2,3,0}.google.cn/vt/lyrs=y@142&hl=zh-CN&gl=cn&x=[x]&y=[y]&z=[z]&s=Galil', // s=Galil不加也能渲染
    zIndex: 2 // 在默认层级之上
	});*/
       //map.setZoom(12.2); //设置地图层级
    new AMap.DistrictSearch({
        extensions:'all',
        subdistrict:0
    }).search('西城区',function(status,result){
        // 外多边形坐标数组和内多边形坐标数组
        var outer = [
            new AMap.LngLat(-360,90,true),
            new AMap.LngLat(-360,-90,true),
            new AMap.LngLat(360,-90,true),
            new AMap.LngLat(360,90,true),
        ];
        var holes = result.districtList[0].boundaries

        var pathArray = [
            outer
        ];
        pathArray.push.apply(pathArray,holes)
        var polygon = new AMap.Polygon( {
            pathL:pathArray,
            strokeColor: 'rgb(20,164,173)',
            strokeWeight: 4,
            strokeOpacity:0.8,
            fillColor: 'rgba(0,0,0)',
            fillOpacity: 1,
            strokeStyle:'dashed',
            strokeDasharray:[10,2,10]
        });
        polygon.setPath(pathArray);
        map.add(polygon);
       /*   var polyline = new AMap.Polyline({
        strokeColor: '#3366FF',   // 线颜色
        strokeOpacity: 1,         // 线透明度
        strokeWeight: 2,          // 线宽
        strokeStyle: 'solid',     // 线样式
        strokeDasharray: [10, 5], // 补充线样式
        geodesic: false            // 绘制大地线
    });
       polyline.setPath(pathArray);
       map.add(polyline);*/
        
        
    })
       if (!isSupportCanvas()) {
        alert('热力图仅对支持canvas的浏览器适用,您所使用的浏览器不能使用热力图功能,请换个浏览器试试~')
    }

    //详细的参数,可以查看heatmap.js的文档 http://www.patrick-wied.at/static/heatmapjs/docs.html
    //参数说明如下:
    /* visible 热力图是否显示,默认为true
     * opacity 热力图的透明度,分别对应heatmap.js的minOpacity和maxOpacity
     * radius 势力图的每个点的半径大小
     * gradient  {JSON} 热力图的渐变区间 . gradient如下所示
     *	{
     .2:'rgb(0, 255, 255)',
     .5:'rgb(0, 110, 255)',
     .8:'rgb(100, 0, 255)'
     }
     其中 key 表示插值的位置, 0-1
     value 为颜色值
     */
    var heatmap;
    map.plugin(["AMap.Heatmap"], function () {
        //初始化heatmap对象
        heatmap = new AMap.Heatmap(map, {
            radius: 25, //给定半径
            opacity: [0, 0.8]
            /*,
            gradient:{
                0.5: 'blue',
                0.65: 'rgb(117,211,248)',
                0.7: 'rgb(0, 255, 0)',
                0.9: '#ffea00',
                1.0: 'red'
            }
             */
        });
        
        var points =[
        {"lng":116.363808,"lat":39.878455,"count":100},
        {"lng":116.354765,"lat":39.90129,"count":100},
        {"lng":116.373133,"lat":39.919922,"count":1200},
        {"lng":116.363505,"lat":39.928956,"count":100},
        {"lng":116.389898,"lat":39.942875,"count":100}
       ];
        //设置数据集：该数据为北京部分“公园”数据
        heatmap.setDataSet({
            data: points,
            max: 100 	
        });
    });

    //判断浏览区是否支持canvas
    function isSupportCanvas() {
        var elem = document.createElement('canvas');
        return !!(elem.getContext && elem.getContext('2d'));
    }
    
    
    //添加点标记
    var  markerList=[ {"title":"1","lng":116.363808,"lat":39.878455},
                   {"title":"2","lng":116.363505,"lat":39.928956},
                   {"title":"3","lng":116.389898,"lat":39.942875},
                    {"title":"4","lng":116.373133,"lat":39.919922},
                     {"title":"5","lng":116.354765,"lat":39.90129}
    ];
       // 创建一个 Icon
    var Icon = new AMap.Icon({
        // 图标尺寸
        size: new AMap.Size(100, 100),
        // 图标的取图地址
        image: 'img/popular.gif',
        // 图标所用图片大小
       imageSize: new AMap.Size(100, 100),
        // 图标取图偏移量
      // imageOffset: new AMap.Pixel(-20, -3)
    });
     var markers=[];
    var infoWindow = new AMap.InfoWindow({offset: new AMap.Pixel(0, -30)});
    for(var i = 0 ; i < markerList.length ; i ++){
    	   // 将 icon 传入 marker
		    var marker = new AMap.Marker({
		        position: new AMap.LngLat(markerList[i].lng,markerList[i].lat),
		        icon: Icon,
		        offset: new AMap.Pixel(-50, -50),
		         clickable: true
		    }); 
		      marker.content = '我是第' + (i + 1) + '个Marker';
		      marker.on('click', markerClick);
    	   markers.push(marker);
    	 
    	      //点标注的点击事件
         /*   var clickHandle = AMap.event.addListener(marker, 'click', function(e) {
               alert(marker.getTitle());
            });*/
      
     }
      function markerClick(e) {
        infoWindow.setContent(e.target.content);
        infoWindow.open(map, e.target.getPosition());
    }
       // 将 markers 添加到地图
       map.add(markers);
       /*      for(var i = 0 ; i < markers.length ; i ++){
           
      }*/
      
 
 
</script>
</body>
</html>

河上街

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
使用高德地图（js）制作区域显示

高德地图 JS APIhttps://lbs.amap.com/api/javascript-api/summary/实现效果展示：<!doctype html><html><head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible...
复制链接

扫一扫