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

已于 2024-01-04 17:10:25 修改
阅读量3.5k 收藏 8
点赞数 1
分类专栏： # L1：Base Part1：Web 文章标签： 地图 高德地图 应用 前端 需求
于 2017-09-21 10:21:30 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/diaoweixiao/article/details/78048842
版权

今天我要说的是关于高德地图的应用。

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

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

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

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

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

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

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

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

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

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

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

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

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>地址详情得到焦点时，把地址选中的地址找到</title>
    <link rel="stylesheet" href="../../css/Common/base.css">
    <script type="text/javascript" src="http://webapi.amap.com/maps?v=1.3&key=23eb8cbd678e6bc1eb10f24676028131"></script>
    <style>
        input,select{outline: none;}
        .formBox{width: 600px;margin: 50px auto;color:#333;font-size: 14px;}
        .area{width: 100px;height: 30px;margin-right:8px;color:#666;line-height: 30px;border:1px solid #999;}
        .address{width: 300px;height: 30px;margin:10px 0;padding:0 10px;line-height: 30px;}
        #mapContainer{display:none;width: 500px;height: 400px;}
    </style>
</head>
<body>

<form class="formBox">
    <div data-toggle="distpicker">
        <select class="area" id="province"></select>
        <select class="area" id="city"></select>
        <select class="area" id="district"></select>
    </div>
    <input type="text" class="address" id="address" placeholder="请填写您的地址">
    <div id="mapContainer"></div>
</form>
<div class="submit_box">
    <input type="hidden" id="lngX" name="lngX" value=""/>
    <input type="hidden" id="latY" name="latY" value=""/>
    <input type="hidden" id="formattedAddress" value=""/>
    <input type="hidden" id="hidProvinceId" value=""/>
    <input type="hidden" id="hidCityId" value=""/>
    <input type="hidden" id="hidDistrictId" value=""/>
</div>
<script src="../../js/Common/jquery.js"></script>
<script src="../../js/plugin/distpicker/distpicker.data.js"></script>
<script src="../../js/plugin/distpicker/distpicker.js"></script>
<script src="../../js/Private/AddMap.js"></script>
</body>
</html>

下面这个是增加地图的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: "<h3><font color=\"#00a6ac\"> 您所在位置 </font></h3>" + 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: "<h3><font color=\"#00a6ac\"> 您所在位置 </font></h3>" +
            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;
    }
}

评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值