前端JS 调用 Google地图以及拖拽地图事件触发

2023-11-25 19:47:16

1.需要引入JS文件

key没有的话可以去下面这个网站按照操作说明获取

https://www.jb51.net/article/89970.htm

下面这个DIV就是展示地图的 id 可以修改但是要保证全部用到的地方修改完毕

标识点图片就是这个红色图标

2. 建议将生成地图的提成一个方法用定时判断是否Google加载完毕红框部分是我自己传递的参数实际情况自行调整不需要可以删除

3.googleParInfo.initGoogleMap 方法要是下面方法有些参数变量没用到可以根据实际情况删除

红色标记的为主要初始化地图的方法其他的方法属于获取地图内的一些参数

var googleParInfo = {
imangePath: "",

   marker_data: "",
   // 地图初始化
   initGoogleMap: function(imangePath, objData){
       googleParInfo.imangePath = imangePath;

       var map;
   var lat = $("#hidden_latitude").val(); // 纬度
   var lng = $("#hidden_longitude").val(); // 经度
   var marker;// 标注
   var infowindow;// 汽泡
   var marker_first; // 第一个标注
   function initialize() {
   // 初始位置
   if(lat == "" || lng == ""){
       lat = "22.6876402383";
       lng = "113.9259866372";
   }
       var latLng = {"lat":lat,"lng":lng};
       var myLatlng = new google.maps.LatLng(lat, lng);
   var mapOptions = {
   zoom: 8,
   center: myLatlng,
   mapTypeId: google.maps.MapTypeId.ROADMAP
   };
   map = new google.maps.Map(document.getElementById('div_map_info'), mapOptions);
   if (marker_first != null) {
   marker_first.setMap(null);
   }
   //var clickedLocation = new google.maps.LatLng(myLatlng);
   marker_first = new google.maps.Marker({
   position: myLatlng,
   map: map,
   icon: imangePath +"/resources/shineDesign/img/designPlant/google_point.png" // 就是标识点图片见文章最上面
   });

   marker_first.setDraggable(true);
   googleParInfo.marker_data = marker_first;
               // 当地图拖拽的时候处理的内容
   google.maps.event.addListener(marker_first, 'dragend', googleParInfo.googleDragend);
   }
   //google.maps.event.addDomListener(window, 'load', initialize); 这种写法有些情况不兼容可以换成下面的
   initialize() // 加载地图
   },

   // 获取定位点具体位置
   getGoogleAddress: function (aData){
       var arrayInfo = new Array();
       for(var s = 0; s < aData.length; s++){ // 过滤不知名的路往上找
       if(aData[s]["formatted_address"].indexOf("Unnamed") != -1){
               continue;
           }
       arrayInfo.push(aData[s]);
       break;
       }
       return arrayInfo[0].formatted_address
   },

   // 获取地图定位相关城市信息
   getGoogleCity: function(aData){
       var arrayInfo = new Array();
       for(var s = 0; s < aData.length; s++){ // 获取长度为2 或者为3 的这样里面就包含了省市区信息了
           if(aData[s]["address_components"].length == 2 || aData[s]["address_components"].length == 3){
           if(aData[s]["formatted_address"].match(/\d+/g)){ // 过滤是数字的城市
               continue;
           }
           if(aData[s]["formatted_address"].indexOf("Unnamed") != -1){ // 过滤不知名的路往上找
                   continue;
               }
           arrayInfo.push(aData[s]);
           }
       }
       if(arrayInfo.length > 0){
           return arrayInfo[0];
       }
       // 不确定上面的判断能全部过滤下面的这段代码留着备用
   switch (aData.length){
   case 4:
   return aData[0];
   break;
   case 5:
   return aData[1];
   break;
   case 6:
   return aData[2];
   break;
   case 7:
   return aData[3];
   break;
   case 8:
   return aData[4];
   break;
   case 9:
   return aData[5];
   break;
   case 10:
   return aData[6];
   break;
   default:
   return aData[0];
   break;
   }
   },

   //根据输入的位置定位地图该方法可以绑定 blur事件触发
   addressTolatLng: function (){
      var geocoder = new google.maps.Geocoder();
      var latLng;
      var address = document.getElementById("geoLoca_insAddr").value; // 输入的地址
      var a = new google.maps.ElevationService();
      geocoder.geocode({'address':address},function(results,status){
          if(status == google.maps.GeocoderStatus.OK){
              var latitude = results[0].geometry.location.lat();//经度
              var longitude = results[0].geometry.location.lng();//纬度
              var marker_first;
              latLng = {"lat":latitude,"lng":longitude};
      var myLatlng = new google.maps.LatLng(latitude, longitude);
   var mapOptions = {
   zoom: 10,
   center: myLatlng,
   mapTypeId: google.maps.MapTypeId.ROADMAP
   };
   map = new google.maps.Map(document.getElementById('div_map_info'), mapOptions);
   if (marker_first != null) {
   marker_first.setMap(null);
   }
   //var clickedLocation = new google.maps.LatLng(myLatlng);
   marker_first = new google.maps.Marker({
   position: myLatlng,
   map: map,
   icon: googleParInfo.imangePath +"/resources/shineDesign/img/designPlant/google_point.png"
   });
   googleParInfo.setInstallInfo(results, false)
   marker_first.setVisible(true);
   marker_first.setDraggable(true);
   googleParInfo.marker_data = marker_first;
   google.maps.event.addListener(marker_first, 'dragend', googleParInfo.googleDragend);
   a.getElevationForLocations({locations:[latLng]},function(data){
               if (data && data[0]){
                  var alt = Math.round(data[0].elevation);
                  $("#loca_altitude").val(alt) // 海拔

               }
           });
          }else{
alert("没有找到相应的地址")
          }
      })
   },

   // 获取地图位置相关信息(根据项目实际情况修改下面方法)
   setInstallInfo: function (responses, isCoverage){
       if(responses && responses.length > 0) {
   var cityInfo = googleParInfo.getGoogleCity(responses);
   var address = googleParInfo.getGoogleAddress(responses)
   if(isCoverage != false){
       $("#geoLoca_insAddr").val(address); // 安装当前定位的具体位置

   }
   if(cityInfo.address_components.length == 2){
   $("#hidden_district").val(cityInfo.address_components[1]["long_name"]); // 区域
   $("#hidden_country").val(cityInfo.address_components[1]["long_name"]); // 国家
   $("#loca_city").val(cityInfo.address_components[0]["long_name"]); // 城市
   }else if(cityInfo.address_components.length == 3){
   $("#hidden_district").val(cityInfo.address_components[2]["long_name"]); // 区域
   $("#hidden_country").val(cityInfo.address_components[2]["long_name"]); // 国家
   $("#loca_city").val(cityInfo.address_components[0]["long_name"]); // 城市
   }else{
       var newArray = new Array();
       newArray = cityInfo.address_components.reverse();
       $("#hidden_district").val(newArray[0]["long_name"]); // 区域
   $("#hidden_country").val(newArray[0]["long_name"]); // 国家
   $("#loca_city").val(newArray[2]["long_name"]); // 城市
   }
   }
   },

   // 地图拖动定义的方法
   googleDragend: function(){
       var marker_first = googleParInfo.marker_data
       var lat = marker_first.getPosition().lat();
       var lng = marker_first.getPosition().lng();
   $("#hidden_latitude").val(lat);
   $("#hidden_longitude").val(lng);
   var a = new google.maps.ElevationService();
   var latLng = {"lat":lat,"lng":lng};
   var geocoder = new google.maps.Geocoder();
   geocoder.geocode({
   latLng: latLng
   }, function(responses) {
       googleParInfo.setInstallInfo(responses)
   });
       a.getElevationForLocations({locations:[latLng]},function(data){
           if (data && data[0]){
              var alt = Math.round(data[0].elevation);
              $("#loca_altitude").val(alt) // 海拔
           }
       });
   }
}

码农公寓

相关文章