JavaScript 谷歌地图demo

最新推荐文章于 2022-12-10 17:09:06 发布

粹白

最新推荐文章于 2022-12-10 17:09:06 发布

阅读量516

点赞数

文章标签： javascript 谷歌地图 google api

本文链接：https://blog.csdn.net/weixin_38317040/article/details/78640186

版权

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

官方给的接口地址, 在大陆是不用指望的, 换成了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>