常見的js效果（二）之高德地圖的應用

阿新 • • 發佈：2019-01-28

今天我要說的是關於高德地圖的應用，我問過我周邊的小夥伴，沒有實際操作經驗的小夥伴都告訴我有介面啊，有API啊，很簡單啊，我沒說話；我問他們你們知道怎麼後後臺對接資料嗎，有人居然跟我說不要資料對接。我並沒有其他的意思，我只是想說，如果沒有實操，還是說話謙虛一點會比較好，不然還是比較尷尬的，此處省略尷尬歌。

好的，下面我們首先看一下最終實現的效果圖：

看起來好像很簡單的功能其實內有奧妙。我先來說一下這個需求，然後講講解決問題的思路，最後再展現我們的程式碼。

說一下需求，其實根據這個圖就知道，當我選擇了經營地址的時，下面就會自動定位並標註，當我們點選其他的地址時，經營地址和詳細地址就會自動改變。

然後講一下思路，其實我的部落格每次我都要說一下需求和思路，是因為，需求可以變，但思路也要隨著需求的改變而改變。瞭解了需求之後，我定位了下面這幾點：

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;
}
}

常見的js效果（二）之高德地圖的應用

常見的js效果（二）之高德地圖的應用

從零開始學 Web 之 JS 高階（二）原型鏈，原型的繼承

js 中的一些簡單演算法（二）之雙層迴圈—氣泡排序

win7配置IIS（二）之常見錯誤解決方案

編寫高質量的Python代碼系列（二）之函數

利用css3的animation實現點點點loading動畫效果（二）

mysql進階（二）之細談索引、分頁與慢日誌

python 讀取Excel（二）之xlwt

Git使用（二）之創建版本庫

JS筆記（二）：隱式轉換

JS學習（二）

XML（二）之DTD——XML文件約束

從零開始搭建框架SSM+Redis+Mysql（二）之MAVEN項目搭建

Pyhton編程（二）之變量、用戶輸入及條件語句

塔防遊戲學習日記（二）之朝敵人發射子彈

二次方程優化（二）之 Quadratic Form

python面向對象（二）之封裝

JDBC詳解系列（二）之加載驅動

Python基礎（二）之數據類型和運算（1）——數字

springcloud實踐（二）之api網關：zuul

常見的js效果（二）之高德地圖的應用

相關推薦