高德地图使用实例二:

<!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>
   <link rel="stylesheet" href="https://cache.amap.com/lbs/static/main.css"/>
   <link rel="stylesheet" href="https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css" type="text/css">
   <script src="https://cdn.bootcss.com/jquery/1.11.2/jquery.min.js"></script>
   <script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.13&key=e27f01c86fc0c625f8bb0bf713ac37dd"></script>
   <style type="text/css">
       html,body,#container{
           height: 100%
       }
       .input-item{
           height: 2.2rem;
       }
       .btn{
           width: 6rem;
           margin: 0 1rem 0 2rem;
       }
       .input-text{
           width: 4rem;
           margin-right:1rem;
       }
       #mapContainer .amap-marker-label{
           border: none;
           background: transparent;
           color: #fff;
           left: 2px!important;
       }
       #panel {
           position: absolute;
           background-color: white;
           max-height: 90%;
           overflow-y: auto;
           top: 10px;
           right: 10px;
           width: 200px;
       }
       .info{
           left: 1rem;
           width: 400px;
       }
       .input-card{
           left: 1rem;
       }
       .btn{
           margin: 0 1rem 0 1rem;
       }
       .amap-icon img{
           width: 25px;
           height: 34px;
       }
       #mapContainer .amap-marker-label{
           left: 5px!important;
       }
       .amap_lib_cloudDataSearch_poi{
           background: url(https://a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-red.png) no-repeat;
           background-size: cover;
           width: 22px;
       }
   </style>
</head>
<body style='font-size:12px'>
<div id="mapContainer"></div>
<div id="panel"></div>
<div class='info'>操作说明:圆和矩形通过拖拽来绘制,其他覆盖物通过点击来绘制</div>
<div class="input-card" style='width: 24rem;'>
   <!--<div class="input-item">-->
       <!--<input type="radio" name='func' checked="" value='marker'><span class="input-text">画点</span>-->
       <!--<input type="radio" name='func' value='polyline'><span class="input-text">画折线</span>-->
       <!--<input type="radio" name='func' value='polygon'><span class="input-text" style='width:5rem;'>画多边形</span>-->
   <!--</div>-->
   <div class="input-item">
       <input type="radio" name='func' value='circle'><span class="input-text">画圆</span>
       <!--<input type="radio" name='func' value='rectangle'><span class="input-text">画矩形</span>-->
       <input type="radio" name='func' value='polygon'><span class="input-text" style='width:5rem;'>画多边形</span>
   </div>
   <div class="input-item">
       <!--<input id="clear" type="button" class="btn" value="清除" />-->
       <input id="close" type="button" class="btn" value="关闭绘图" />
       <input id="closeSearch" type="button" class="btn" value="清除搜索" />
   </div>
</div>
<script type="text/javascript">
   var overlays = [];
   var layObj = [];
   var search;
   var mouseTool;
   var markers = [];
   var map = new AMap.Map("mapContainer", {
       mapStyle: "amap://styles/80a1c6c32084be7eb7861eca15256b02",
       center: [121.550511, 31.210178],
       resizeEnable: true,
       zoom: 12 //地图显示的缩放级别
   });
   //添加云图
   AMap.plugin(["AMap.CloudDataLayer"], function() {
       var layerOptions = {
           query: {
               keywords: ""
           },
           clickable: true
       };
       var cloudDataLayer = new AMap.CloudDataLayer("5c80ba987bbf195c07e7888f", layerOptions);
       //cloudDataLayer.setMap(map); //添加到地图
//        AMap.event.addListener(cloudDataLayer, 'click', function(result) {
//            var clouddata = result.data;
//            var infoWindow = new AMap.InfoWindow({
//                content: "<h3><font face='微软雅黑' color=''#36F'>" +
//                            clouddata._name + "</font></h3><hr>地址:" +
//                            clouddata._address + "<br>" + "创建时间:" +
//                            clouddata._createtime + "<br>" + "更新时间:" +
//                            clouddata._updatetime,
//                size: new AMap.Size(300, 0),
//                autoMove: true,
//                offset: new AMap.Pixel(0, -25)
//            });
//            infoWindow.open(map, clouddata._location);
//        });
   });
   //云图检索
   AMap.plugin(["AMap.CloudDataSearch"], function() {
       //画圆
       map.plugin(["AMap.MouseTool"],function(){
           mouseTool = new AMap.MouseTool(map);
           var radios = document.getElementsByName('func');
           for(var i=0;i<radios.length;i+=1){
               radios[i].onchange = function(e){
                   //console.log(123)
                   draw(e.target.value)
               }
           }
           //监听draw事件
           AMap.event.addListener(mouseTool,'draw',function(e){
               //画圆
               if(e.obj.CLASS_NAME=='AMap.Circle') {
                   var lng = e.obj.getCenter().lng;
                   var lat = e.obj.getCenter().lat;
                   var radius = e.obj.getRadius();
                   overlays = e.obj.getPath();

                   layObj.push(e.obj);
                   var searchOptions = {
                       //map: map, //
                       panel: 'panel',
                       keywords: '',
                       pageSize: 10,
                       orderBy: '_id:ASC',
                       autoFitView: false
                   };

                   //执行区域搜索
                   var x = overlays[0].lng;
                   var x1 = overlays[1].lng;
                   // console.log(AMap.GeometryUtil.ringArea(overlays))
                   if (x != x1) {
                       if (search != null) {
                           search.clear();
                           clearMarker();
                       }
                       //实例化搜索
                       search = new AMap.CloudDataSearch("5c80ba987bbf195c07e7888f", searchOptions);
                       search.searchNearBy([lng, lat], radius, cloudSearch_CallBack);
                       //  search.searchByDistrict('福州市', function(status, result) {
                       //      console.log(status, result);
                       //  });
                   }
               }
               //画多边形
               if(e.obj.CLASS_NAME=='AMap.Polygon') {
                   overlays = e.obj.getPath();
                   layObj.push(e.obj);
                   overlays.push(overlays[0]);
                   var searchOptions = {
                       //map: map, //
                       panel: 'panel',
                       keywords: '',
                       pageSize: 10,
                       orderBy: '_id:ASC',
                       autoFitView: false
                   };
                   //执行区域搜索
                   var x = overlays[0].lng;
                   var x1 = overlays[1].lng;
                   if (x != x1) {
                       if (search != null) {
//                            search.clear();
//                            clearMarker();
                       }
                       //实例化搜索
                       search = new AMap.CloudDataSearch("5c80ba987bbf195c07e7888f", searchOptions);
                       search.searchInPolygon(overlays,cloudSearch_CallBack);
                   }
               }
           });
           //监听map事件
           map.on('mousedown',function(){
               map.remove(layObj);
               layObj = [];
           })
//            document.getElementById('clear').onclick = function(){
//                map.remove(layObj);
//                layObj = [];
//            }
           document.getElementById('closeSearch').onclick = function(){
               map.remove(layObj);
               layObj = [];
               overlays = [];
               if(search!=null){
                   search.clear();
                   clearMarker()
               }
           }
           document.getElementById('close').onclick = function(){
               mouseTool.close(true)//关闭,并清除覆盖物
               for(var i=0;i<radios.length;i+=1){
                   radios[i].checked = false;
               }
           }
       })
   });
   //成功回调
   function cloudSearch_CallBack(status,data){
//        console.log(status);
//        console.log(data);
       clearMarker()
       //初始化地图对象,加载地图
       var dataArr = data.datas;
//        console.log(dataArr)
       if(dataArr&&dataArr.length>0) {
           var infoWindow = new AMap.InfoWindow({offset: new AMap.Pixel(0, -30)});
           for (var i = 0, marker; i < dataArr.length; i++) {
//            dataArr[i].type = dataArr[i].industry_code;
               var marker = new AMap.Marker({
                   icon:'//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-red.png',
                   position: dataArr[i]._location,
                   map: map,
//                content:'&nbsp'
                   label: {content: (i + 1), offset: {x: 0, y: 0}}
               });
               var photo = [];
               if (dataArr[i]._image[0]) {//如果有上传的图片
                   photo = ['<img width=240 height=100 src="' +
                           dataArr[i]._image[0]._preurl + '"><br>'];
               }
               marker.content = "<font face=\"微软雅黑\"color=\"#36F\">" +
                       dataArr[i]._name + "</font><hr />" + photo.join("") +
                       "地址:" + dataArr[i]._address + "<br />" +
                       "联系电话:" + dataArr[i].telephone + "<br />" +
                       "创建时间:" + dataArr[i]._createtime + "<br />" +
                       "更新时间:" + dataArr[i]._updatetime;
               marker.on('click', markerClick);
               //marker.emit('click', {target: marker});
               markers.push(marker)
           }
//            console.log(markers)
           $(".poibox").on('click',function(){
               var mIndex = $(this).index();
               infoWindow.setContent(markers[mIndex].content);
               infoWindow.open(map,markers[mIndex].getPosition());
           })
       }
       function markerClick(e) {
           infoWindow.setContent(e.target.content);
           infoWindow.open(map, e.target.getPosition());
       }
       map.setFitView();
   }
   //画图
   function draw(type){
       switch(type){
           case 'marker':{
               mouseTool.marker({
                   //同Marker的Option设置
               });
               break;
           }
           case 'polyline':{
               mouseTool.polyline({
                   strokeColor:'#80d8ff'
                   //同Polyline的Option设置
               });
               break;
           }
           case 'polygon':{
               mouseTool.polygon({
                   fillColor:'#00b0ff',
                   strokeColor:'#80d8ff'
                   //同Polygon的Option设置
               });
               break;
           }
           case 'rectangle':{
               mouseTool.rectangle({
                   fillColor:'#00b0ff',
                   strokeColor:'#80d8ff'
                   //同Polygon的Option设置
               });
               break;
           }
           case 'circle':{
               mouseTool.circle({
                   fillColor:'#00b0ff',
                   strokeColor:'#80d8ff'
                   //同Circle的Option设置
               });
               break;
           }
       }
   }
   // 清除 marker
   function clearMarker() {
       map.remove(markers);
       markers=[]
   }
</script>
<!--<script type="text/javascript" src="https://cache.amap.com/lbs/static/addToolbar.js"></script>-->
<!--<script type="text/javascript" src="https://webapi.amap.com/demos/js/liteToolbar.js"></script>-->
</body>
</html>


上一篇:高德地图使用实例一

下一篇:表格合并单元格实例