JavaScript 谷歌地图demo

来源：互联网发布：淘宝高仿男鞋店铺编辑：程序博客网时间：2024/05/21 18:35

可以实现显示多个点的大头针, 点击显示/切换信息框, 自适应显示地图大小;

官方给的接口地址, 在大陆是不用指望的, 换成了ditu.google.cn; 这里坐标数据写死了, 取数据库数据测试, 有效;

参考官方文档样例写的小demo, 还要继续探索研究啊 : )

<!DOCTYPE html><html>  <head>  <meta charset="UTF-8">    <style>      #map {        height: 800px;        width: 100%;       }    </style>  </head>  <body>    <h3>My Google Maps Demo</h3>    <div id="map"></div>    <script src="http://ditu.google.cn/maps/api/js?&key=你的key"></script>    <script type="text/javascript" src="./jquery-1.8.2.min.js"></script>    <script>    //1.获取所有点的坐标    //2.根据坐标确定地图边界,适应边界生成地图    //3.在地图显示坐标大头针marker    //4.生成infowindow,绑定点击显示详细信息事件          //保存坐标数组      var poi_arr = new Array();      poi_arr[0] = {lat: 39.010695, lng: 88.151546 };      poi_arr[1] = {lat: 39.008236, lng: 88.145581 };      poi_arr[2] = {lat: 39.014379, lng: 88.137911 };      var marker = [],          infowindows = [],          brief_info = [],          contentString = [],          param_lat = [],          param_lng = [];            function initMap() {        //多边形中心点        var bounds2 = new google.maps.LatLngBounds();        var polygonCoords = [];        //遍历坐标确定中心和边界        for(var i=0;i<poi_arr.length;i++){          param_lat.push(poi_arr[i].lat);          param_lng.push(poi_arr[i].lng);          polygonCoords[i] = new google.maps.LatLng(poi_arr[i].lat, poi_arr[i].lng);        }                for (k = 0; k < polygonCoords.length; k++) {          bounds2.extend(polygonCoords[k]);        }        //获得中心点坐标        var map_center = bounds2.getCenter();        //生成地图        var map = new google.maps.Map(document.getElementById('map'), {          zoom: 4,          center: map_center,          mapTypeId: 'satellite'        });        var bounds = {          north: Math.max.apply(Math, param_lat),          south: Math.min.apply(Math, param_lat),          east: Math.max.apply(Math, param_lng),          west: Math.min.apply(Math, param_lng),        };        // 适应边界显示地图        map.fitBounds(bounds);        //详细信息        var cont_full = '<div id="content">'+                '<p>姓名: 小王</p>'+                '<p>坐标: 52.511467, 13.447179</p>'+                '<p>登录时间: 2017-11-15</p>'+                '<p>状态: 巡检中</p>'+                '<p>任务: 11区供电站巡检</p>'+                '</div>';        //遍历坐标,生成大头针,生成信息        for(var i=0;i<poi_arr.length;++i){          //生成信息框内容          contentString[i] = '<div id="content">'+                '<p>姓名: 小王'+ i +'</p>'+                '</div>';        //生成大头针          marker[i] = new google.maps.Marker({            position: poi_arr[i],            map: map          });          brief_info[i] = new google.maps.InfoWindow({            content: contentString[i],            maxWidth: 200          });          infowindows[i] = new google.maps.InfoWindow({            content: cont_full,            maxWidth: 200          });          //显示姓名信息框          brief_info[i].open(map, marker[i]);          bind_click(i,marker[i]);        }       }      function bind_click(i,ma){        //遍历所有坐标,绑定点击事件        ma.addListener('click', function() {          brief_info[i].close();          infowindows[i].open(map, ma);        });      }      var start = new google.maps.event.addDomListener(window, 'load', initMap);          </script>  </body></html>

阅读全文

0 0