ahpest_django/static/javascripts/googlemap.js

$(document).ready(function() {
   var cluster, markers = [];
   var map=new google.maps.Map(document.getElementById('map'), {
                  center: {lat: 31.851859, lng: 117.27978},
                  zoom: 8,
                  mapTypeId: google.maps.MapTypeId.SATELLITE,
                  tilt: 45
   });

  var inti=initmap();

  function initmap(){
          $.ajax({
                     url:"/list",
                     type: "GET",
                     "dataType": "json",
                     success:function(response){
                          markers=[];

                          $.each(response.data, function(i, obj) {
                            var myLatLng=new google.maps.LatLng(obj.fields.latitude, obj.fields.longitude)
                             var title='<span style="font-size:11px;color:#F00;">'+obj.fields.pestname+'</span>'
                                                        var contentString = "<div id='content'>"+
                                                              "<div id='siteNotice'>"+
                                                              "</div>"+
                                                              "<h1 style='font-size:14px;color:#F00;'>调查人:"+obj.fields.researchpeople+"</h1>"+
                                                              "<div id='bodyContent'>"+

                                                              "<p><a href="+"/showform/"+obj.pk+" data-toggle='modal' data-target='#treeModal' >详细信息</a></p>"+
                                                              "</div>"+
                                                              "</div>";
                            var infowindow = new google.maps.InfoWindow({
                                content: contentString,
                                maxWidth: 160
                            });
                            var marker = new google.maps.Marker({
                                                       position: myLatLng,
                                                       map: map,
                                                       title:obj.fields.pestname
                            });
                            markers.push(marker);
                            marker.addListener('click', function() {
                                infowindow.open(map, marker);
                            });

                          });
                        var markerCluster = new MarkerClusterer(map, markers, {imagePath: 'http://7u2iif.com1.z0.glb.clouddn.com/m'});
                     },
                     error: function(){

                     }
          });

   }

   $('#search').click(function(event){
      var posturl="/gsmm/multsearch?"
      var areaid = $("#areaid").find("option:selected").val();
      var pestname = $("#pestname").find("option:selected").val();
      var researchpeople = $("#researchpeople").find("option:selected").val();
      if(areaid !=0){
         posturl=posturl+'area='+areaid;
      }
      if(keid !=0){
         posturl=posturl+'&ke='+keid;
      }
      if(lid !=0){
          posturl= posturl+'&level='+lid;
      }
      var map=new google.maps.Map(document.getElementById('map'), {
                        center: {lat: 31.851859, lng: 117.27978},
                        zoom: 8,
                        mapTypeId: google.maps.MapTypeId.SATELLITE,
                        tilt: 45
      });
      $.ajax({
            url: posturl,
            type: "GET",
            "dataType": "json",
            success:function(response){
                 markers=[];

                 $.each(response.data, function(i, obj) {
                   var myLatLng=new google.maps.LatLng(obj.latitude, obj.longitude)

                   var title='<span style="font-size:11px;color:#F00;">'+obj.gsbh+'</span>'
                   var contentString = "<div id='content'>"+
                   "<div id='siteNotice'>"+
                         "</div>"+
                         "<h1 style='font-size:14px;color:#F00;'>古树编号:"+obj.gsbh+"</h1>"+
                         "<div id='bodyContent'>"+
                         "<p><b>中文名:</b>" +obj.cname+"</p>"+
                         "<p><b>等级:</b>" +obj.treelevel+"</p>"+
                         "<p><b>科属:</b>" +obj.ke+"</p>"+
                         "<p><b>树龄:</b>" +obj.treeage+"</p>"+
                         "<p><b>树高:</b>" +obj.treeheight+"</p>"+
                         "<p><b>胸围:</b>" +obj.treechest+"</p>"+
                         "<p><a href="+"/showform/"+obj.id+" data-toggle='modal' data-target='#treeModal' >详细信息</a></p>"+
                         "</div>"+
                         "</div>";

                   var infowindow = new google.maps.InfoWindow({
                       content: contentString,
                       maxWidth: 160
                   });
                   var marker = new google.maps.Marker({
                                              position: myLatLng,
                                              map: map,
                                              title:obj.mainbreed
                   });
                   markers.push(marker);
                   marker.addListener('click', function() {
                       infowindow.open(map, marker);
                   });

                 });


               var markerCluster = new MarkerClusterer(map, markers, {imagePath: 'http://7u2iif.com1.z0.glb.clouddn.com/m'});
            },
            error: function(){

            }
      });

      });



});