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

1.需要引入JS文件

<script src="http://maps.googleapis.com/maps/api/js?key=AIzaSyDnX7ZzqMBrXWmBLkOA18otCargKzrN8Iw"></script>

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

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

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

 <div class="div_map" id="div_map_info"></div>

标识点图片 就是这个红色图标  前端JS 调用 Google地图 以及拖拽地图事件触发

 

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

前端JS 调用 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) // 海拔
             }
         });  
    }
}

上一篇:Photoshop将外景图片调色制作成黄昏色调效果的教程


下一篇:在Catalyst交换机VLAN或L3 接口上的对唯一的MAC地址支持的平台配置