常见的js效果（二）之高德地图的应用

今天我要说的是关于高德地图的应用，我问过我周边的小伙伴，没有实际操作经验的小伙伴都告诉我有接口啊，有API啊，很简单啊，我没说话；我问他们你们知道怎么后后台对接数据吗，有人居然跟我说不要数据对接。我并没有其他的意思，我只是想说，如果没有实操，还是说话谦虚一点会比较好，不然还是比较尴尬的，此处省略尴尬歌。

好的，下面我们首先看一下最终实现的效果图：

看起来好像很简单的功能其实内有奥妙。我先来说一下这个需求，然后讲讲解决问题的思路，最后再展现我们的代码。

说一下需求，其实根据这个图就知道，当我选择了经营地址的时，下面就会自动定位并标注，当我们点击其他的地址时，经营地址和详细地址就会自动改变。

 

然后讲一下思路，其实我的博客每次我都要说一下需求和思路，是因为，需求可以变，但思路也要随着需求的改变而改变。了解了需求之后，我定位了下面这几点：

1.首先详细地址键入内容时，得到经营地址和详细地址，如果找到就自动定位到那个地点，并进行标注，如果没有找到，就定位到选择到的省市区，

2.其次就是当我点击地图上的点时，得到它的坐标，后台就直接返回地址，我们得到地址之后，如果地址和上面经营地址不一致，就把省市区下拉框里面选中的地址和详细地址替换成现在点击之后的地址，当然也要添加标注

3.因为键盘键入内容以及点击地图上的坐标时多会用到添加标注，所以在添加标注之前要先判断有没有标注，有就清空标注再添加

 

讲一下高德地图的一些小的知识点：

1.首先说一下zoom级别：zoom是高德地图的缩放级别，级别区间是【4,20】，其实就是一个比例尺的问题，级别越大，缩放比例越小

2.然后说一下 ResizeEnable，这个属性是说可以调整任意窗口大小

3.如果center和level值没有设置的话，默认会是3D的

4.在GIS应用中，很多需要将经纬度转化为地址或者将地址转化为经纬度的，高德地图里面使用Geocoder 服务插件来完成,一开始没有做的时候一直以为是后台数据传的，现在知道是API自动插件转化的，这样就简便了使用

 

 

最后就是大家比较关心的代码阶段，直接贴在下面，有需要的朋友可以参考，当然里面还是有一些问题的，因为没有数据的绑定，省市区的级联我都是用的插件：

 

下面这个是增加地图的js:

$(function () {
    //initArea();
    initMap();
});

//初始化地图
function initMap() {
    // 标记
    var marker;
    var infoWindow;
    var shopAddress = $("#formattedAddress").val();

    //店铺的经纬度
    var longitude = $("#lngX").val() || 0;
    var latitude = $("#latY").val() || 0;

    //地图显示属性
    var mapViewOptions = {};
    if (longitude != "0" && latitude != "0") {
        var iniPosition = new AMap.LngLat(longitude, latitude);
        mapViewOptions = {
            resizeEnable: true,
            center: iniPosition,
            zoom: 20
        };
    } else {
        mapViewOptions = {
            resizeEnable: true,
            zoom: 13
        };
    }

    //创建地图
    var mapObj = new AMap.Map("mapContainer",{
        resizeEnable: true,
        view: new AMap.View2D(mapViewOptions),
        keyboardEnable: false
    });

    //创建点标记
    if (longitude != "0" && latitude != "0") {
        var markerOption = {
            map: mapObj,
            position: new AMap.LngLat(longitude, latitude)
        };
        marker = new AMap.Marker(markerOption);

        //显示窗体信息
        infoWindow = new AMap.InfoWindow({
            content: "
 您所在位置 
" + tipContents(shopAddress),
            size: new AMap.Size(300, 0),
            autoMove: true,
            offset: new AMap.Pixel(0, -30)
        });
        infoWindow.open(mapObj, new AMap.LngLat(longitude, latitude));
    }

    AMap.event.addListener(mapObj, 'click', function (e) {
        //获取地址
        AMap.service('AMap.Geocoder', function () {//回调函数
            var geocoder = new AMap.Geocoder({});
            geocoder.getAddress(e.lnglat, function (status, result) {
                if (status === 'complete' && result.info === 'OK') {
                    var gAddr = result.regeocode;
                    var addrComponent = gAddr.addressComponent;
                    var detailAddress = (addrComponent.township || "") + (addrComponent.street || "") + (addrComponent.streetNumber || "") + (addrComponent.building || "");
                    $("#address").val(detailAddress);
                    // 获取经纬度
                    $("#lngX").val(e.lnglat.getLng());
                    $("#latY").val(e.lnglat.getLat());
                    // 重新初始化省市区
                    setAreaInfo(gAddr);
                    setAddressInfo(gAddr, e.lnglat);
                }
            });
        });
    });

    if ($.trim($("#address").val())) {
        $("#mapContainer").show();
    }

    $("#address").blur(function() {
        var keyword = $.trim($(this).val());
        if (keyword == "") {
            $("#mapContainer").hide();
        } else {
            $("#mapContainer").show();
        }
    }).change(function() {
        AMap.service('AMap.Geocoder', function() { //回调函数
            var geocoder = new AMap.Geocoder({});

            var province = $("#province").val() ? $("#province").find("option:selected").text() : "";
            var city = $("#city").val() ? $("#city").find("option:selected").text() : "";
            var district = $("#district").val() ? $("#district").find("option:selected").text() : "";
            var detailAddr = document.getElementById('address').value;
            var address = province + city + district + detailAddr;

            geocoder.getLocation(address, function (status, result) {
                if (status === 'complete' && result.info === 'OK') {
                    var gAddr = result.geocodes[0];
                    //获取经纬度
                    $("#lngX").val(gAddr.location.lng);
                    $("#latY").val(gAddr.location.lat);
                    setAddressInfo(gAddr, gAddr.location);
                }
            });
        });
    });

    function setAreaInfo(regeocode) {
        var addrComponent = regeocode.addressComponent;
        var provinceName = addrComponent.province.replace('省', '');
            provinceName = addrComponent.province.replace('自治区', '');
            provinceName = addrComponent.province.replace('特别行政区', '');
        var cityName = addrComponent.city;
        var districtName = addrComponent.district;

        var province = $("#province").val() ? $("#province").find("option:selected").text() : "";
        var city = $("#city").val() ? $("#city").find("option:selected").text() : "";
        var district = $("#district").val() ? $("#district").find("option:selected").text() : "";

        if (province.indexOf(provinceName) == -1) {

            $("#province option").each(function () {
                if ($(this).text().indexOf(provinceName) != -1) {
                    $(this).prop("selected", "selected");
                    $("#hidProvinceId").val($("#province").val());
                    return false;
                }
            });
        }

        if (city.indexOf(cityName) == -1) {
            $("#city option").each(function () {
                if ($(this).text().indexOf(cityName) != -1) {
                    $(this).prop("selected", "selected");
                    $("#hidCityId").val($("#city").val());
                    return false;
                }
            });
        }

        if (district.indexOf(districtName) == -1) {
            $("#district option").each(function () {
                if ($(this).text().indexOf(districtName) != -1) {
                    $(this).prop("selected", "selected");
                    $("#hidDistrictId").val($("#district").val());
                    return false;
                }
            });
        }

    }

    function setAddressInfo(regeocode, location) {

        $("#formattedAddress").val(regeocode.formattedAddress);

        //清除点标注
        if (marker) {
            marker.setMap(null);
            marker = null;
        }
        //添加点标注
        marker = new AMap.Marker({
            position: location
        });
        marker.setMap(mapObj);

        infoWindow = new AMap.InfoWindow({
            content: "
 您所在位置 
" +
            tipContents(regeocode.formattedAddress),
            size: new AMap.Size(300, 0),
            autoMove: true,
            offset: new AMap.Pixel(0, -30)
        });
        infoWindow.open(mapObj, location);
    }

    function tipContents(address) {
        if (address == "" ||
            address == "undefined" ||
            address == null ||
            address == " undefined" ||
            typeof address == "undefined") {
            address = "暂无";
        }
        var str = "  地址：" + address;
        return str;
    }
}