高德地圖純js和html

時間 2019-11-18
標籤地圖 html 欄目 JavaScript 简体版
原文原文鏈接
<!doctype html>
<html>
<head>
    <meta content="" charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width" />
    <title>基本地圖展現</title>
    <!-- 地圖的css及js，不可缺乏-->
    <link rel="stylesheet" href="http://cache.amap.com/lbs/static/main1119.css" />
    <link rel="stylesheet" href="http://cache.amap.com/lbs/static/main.css?v=1.0" />
    <script type="text/javascript" src="http://cache.amap.com/lbs/static/es5.min.js"></script>
    <script type="text/javascript" src="http://webapi.amap.com/maps?v=1.3&key=f034871b532a7bfb2d93f18e915b322c&plugin=AMap.DistrictSearch"></script>
    <script type="text/javascript" src="http://cache.amap.com/lbs/static/addToolbar.js"></script>
    <!-- 彈出信息框樣式-->
    <style type="text/css">
        .info-title {
            color: white;
            font-size: 14px;
            background-color: blue;
            line-height: 26px;
            padding: 0px 0 0 6px;
            font-weight: lighter;
            letter-spacing: 1px;
        }

        .info-content {
            font: 12px Helvetica, 'Hiragino Sans GB', 'Microsoft Yahei', '微軟雅黑', Arial;
            padding: 4px;
            color: #666666;
            line-height: 23px;
        }

            .info-content img {
                float: left;
                margin: 3px;
            }

        #tip {
            background-color: #fff;
            padding: 0 10px;
            border: 1px solid silver;
            box-shadow: 3px 4px 3px 0px silver;
            position: absolute;
            font-size: 12px;
            right: 10px;
            top: 5px;
            border-radius: 3px;
            line-height: 36px;
        }
    </style>
</head>
<body onload="mapInit()">
    <div id="container">
    </div>
    <div class="button-group" style="*position:absolute;top:90%;left:20%;text-align:center;">
        <input type="button" class="button" value="添加" onclick="addMarker();" />
        <!--<input type="button" class="button" value="更新站點" id="updateMarker()" />-->
        <input type="button" class="button" value="刪除" onclick="deleteMarker()" />
    </div>
    <!--var MM = new csMenu(document.getElementById("container"), document.getElementById("Menu1"));
    <div id="Menu1" style="background-color:White; border:1px solid #cccccc; padding:10px;">
        <li>打開</li>
        <li>打印</li>
        <li>回覆發件人</li>
        <li>所有回覆</li>
        <li>轉發</li>
        <li>分配</li>
        <li>垃圾郵件</li>
        <li>刪除</li>
        <li>歸檔此郵件</li>
        <li>分揀此郵件</li>
    </div>
    /////////////////////////////////////////////////////-->
    <script type="text/javascript">
        function csMenu(_object, _menu) {
            this.IEventHander = null;
            this.IFrameHander = null;
            this.IContextMenuHander = null;

            this.Show = function (_menu) {
                var e = window.event || event;
                if (e.button == 2) {
                    if (window.document.all) {
                        this.IContextMenuHander = function () { return false; };
                        document.attachEvent("oncontextmenu", this.IContextMenuHander);
                    }
                    else {
                        this.IContextMenuHander = document.oncontextmenu;
                        document.oncontextmenu = function () { return false; };
                    }

                    window.csMenu$Object = this;
                    this.IEventHander = function () { window.csMenu$Object.Hide(_menu); };

                    if (window.document.all)
                        document.attachEvent("onmousedown", this.IEventHander);
                    else
                        document.addEventListener("mousedown", this.IEventHander, false);

                    _menu.style.left = e.clientX;
                    _menu.style.top = e.clientY;
                    _menu.style.display = "";

                    if (this.IFrameHander) {
                        var _iframe = document.getElementById(this.IFrameHander);
                        _iframe.style.left = e.clientX;
                        _iframe.style.top = e.clientY;
                        _iframe.style.height = _menu.offsetHeight;
                        _iframe.style.width = _menu.offsetWidth;
                        _iframe.style.display = "";
                    }
                }
            };

            this.Hide = function (_menu) {
                var e = window.event || event;
                var _element = e.srcElement;
                do {
                    if (_element == _menu) {
                        return false;
                    }
                }
                while ((_element = _element.offsetParent));

                if (window.document.all)
                    document.detachEvent("on" + e.type, this.IEventHander);
                else
                    document.removeEventListener(e.type, this.IEventHander, false);

                if (this.IFrameHander) {
                    var _iframe = document.getElementById(this.IFrameHander);
                    _iframe.style.display = "none";
                }

                _menu.style.display = "none";

                if (window.document.all)
                    document.detachEvent("oncontextmenu", this.IContextMenuHander);
                else
                    document.oncontextmenu = this.IContextMenuHander;
            };

            this.initialize = function (_object, _menu) {
                window._csMenu$Object = this;
                var _eventHander = function () { window._csMenu$Object.Show(_menu); };

                _menu.style.position = "absolute";
                _menu.style.display = "none";
                _menu.style.zIndex = "1000000";

                if (window.document.all) {
                    var _iframe = document.createElement('iframe');
                    document.body.insertBefore(_iframe, document.body.firstChild);
                    _iframe.id = _menu.id + "_iframe";
                    this.IFrameHander = _iframe.id;

                    _iframe.style.position = "absolute";
                    _iframe.style.display = "none";
                    _iframe.style.zIndex = "999999";
                    _iframe.style.border = "0px";
                    _iframe.style.height = "0px";
                    _iframe.style.width = "0px";

                    _object.attachEvent("onmouseup", _eventHander);
                }
                else {
                    _object.addEventListener("mouseup", _eventHander, false);
                }
            };

            this.initialize(_object, _menu);
        }
        /////////////////////////////////////////////////
    </script>

    <script type="text/javascript">



        //添加站點
        function addMarker() {
            //獲取經緯度
            var lnglat = getlnglat();
            //document.getElementById("myPageTop").style.display = "none"; //隱藏
            document.getElementById("myPageTop").style.display = ""; //顯示

        }
        //添加Marker
        function AddMarkerBtn() {
            //獲取經緯度
            var lnglat = document.getElementById("lnglat").value;
            //獲取站點名
            var siteName = document.getElementById("siteName").value;
            //獲取站點負責人
            var WorkerName = document.getElementById("WorkerName").value;
            //獲取詳細地址
            var DeiliteAddress = document.getElementById("tipinput").value;
            //定義經度
            var lng = "";
            //定義緯度
            var lat = "";
            //給經度賦值 從0開始到，結束
            lng = lnglat.substr(0, lnglat.indexOf(","));
            //給緯度賦值   從，後一位開始到數組的總長結束
            lat = lnglat.substr(lnglat.indexOf(",") + 1, lnglat.length - 1);

            if (lnglat == "" || lnglat == null) {
                alert("請單擊地圖獲取座標或輸入相應地址或取座標後重試！");
            } else {
                if (WorkerName != "" && siteName != "") {
                    window.external.addMarker(siteName, WorkerName, lng, lat, DeiliteAddress); //getDebugPath()爲c#方法
                    document.getElementById("myPageTop").style.display = "none"; //隱藏

                } else {
                    alert("請填寫相關數據！");
                }
            }

        }
        //隱藏窗體
        function ColseaddMarkerWindow() {
            document.getElementById("myPageTop").style.display = "none"; //隱藏
        }
        //獲取單擊的點的經緯度
        function clearMarker(e) {

            //獲取到單擊的點座標
            var lat = e.target.getPosition();
            //把座標存入全局變量
            getlnglatPoint = lat;

        }
        //刪除點
        function deleteMarker() {
            //取全局變量的經緯度值
            var lnglat = getlnglatPoint;
            //轉換成字符串
            lnglat = lnglat + "";
            //定義經度
            var lng = "";
            //定義緯度
            var lat = "";
            //給經度賦值 從0開始到，結束
            lng = lnglat.substr(0, lnglat.indexOf(","));
            //給緯度賦值   從，後一位開始到數組的總長結束
            lat = lnglat.substr(lnglat.indexOf(",") + 1, lnglat.length - 1);


            if (lnglat == "" || typeof (lnglat) == null) {
                alert("請選擇一個點！");
            } else {
                //調用後臺方法，進行刪除
                window.external.deleteMarker(lng, lat); //getDebugPath()爲c#方法
            }
        }
        //刷新頁面
        function updateMarker() {
            window.external.FindUserMobilephone();
        }

        //全局變量，存儲經緯度
        var getlnglatPoint = "";


        //獲取參數說明， 定義一個變量，調用GetQueryString("傳入參數名");方法便可，返回的是一個數組

        //------------------------------------------------------------------------------------------------接收參數
        //獲取經緯度
        var arrdes = GetQueryString("lnglat");
        //獲取站點名稱
        var siteName = GetQueryString("siteNaem");
        //站點負責人
        var WorkerName = GetQueryString("WorkerName");
        //獲取站點具體地址
        var FullName = GetQueryString("FullName");

        //獲取Url參數值，傳入參數名便可,返回的是一個數組
        function GetQueryString(name) {
            var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
            var r = window.location.search.substr(1).match(reg);
            if (r != null) {
                var value = unescape(r[2]);
                //去掉最後一個字符，是一個，號
                value = value.substr(0, value.length - 1);

                //定義一個數組來存放傳過來的全部參數
                var Arrvalue = [];
                //給arrdes賦值  string2Array方法下面有說明
                Arrvalue = string2Array(value);
                return Arrvalue;
            } else {
                return null;
            }
        }

        //將字符轉換爲數組的方法,去除分割標誌
        function string2Array(stringObj) {
            stringObj = stringObj.replace(/\[([\w, ]*)\]/, "$1");
            if (stringObj.indexOf("[") == 0) {// if has chinese
                stringObj = stringObj.substring(1, stringObj.length - 1);
            }
            var arr = stringObj.split("p");    //------------     !!!!!!!!!!!!注意：分割標誌p
            var newArray = []; //new Array();
            for (var i = 0; i < arr.length; i++) {
                var arrOne = arr[i];
                newArray.push(arrOne);
            }
            // console.log(newArray);
            return newArray;
        };

        //  建立一個地圖
        var map = new AMap.Map('container', {
            resizeEnable: true,              //是否監控地圖容器尺寸變化，默認值爲false
            zoom: 13,                        //初始化大小，從國到街爲3-18
            center: [126.48, 46.83]   //初始化中心點，傳入經緯度

        });

        //定義須要的地圖控件，相似於實例化一個對象
        AMap.plugin(['AMap.ToolBar', 'AMap.Scale', 'AMap.OverView', 'AMap.MapType', 'AMap.Geolocation'],
        //添加地圖控件 若不須要，可直接刪除代碼
    function () {
        //集成了縮放、平移、定位等功能按鈕在內的組合控件  界面操做集成(鼠標右鍵雙擊縮小，鼠標左鍵雙擊放大，移動，鼠標滑輪縮放)
        map.addControl(new AMap.ToolBar());

        //展現地圖在當前層級和緯度下的比例尺 左下
        map.addControl(new AMap.Scale());

        //在地圖右下角顯示地圖的縮略圖 右下
        map.addControl(new AMap.OverView({ isOpen: false }));//默認不打開

        //實現默認圖層與衛星圖、實施交通圖層之間切換的控 右上
        //map.addControl(new AMap.MapType());

        //用來獲取和展現用戶主機所在的經緯度位置 左下
        map.addControl(new AMap.Geolocation());
    });

        //建立一個信息框，offset是信息框對點的偏移程度，能夠調整
        var infoWindow = new AMap.InfoWindow({ offset: new AMap.Pixel(0, -30) });
        for (var i = 0, marker; i < arrdes.length; i++) {

            //定義經度
            var lng = "";
            //定義緯度
            var lat = "";
            //把數組裏面的經緯度轉換成字符串
            var lnglat = arrdes[i] + "";
            //給經度賦值 從0開始到，結束
            lng = lnglat.substr(0, lnglat.indexOf(","));
            //給緯度賦值   從，後一位開始到數組的總長結束
            lat = lnglat.substr(lnglat.indexOf(',') + 1, lnglat.length - 1);
            //添加一個點，
            var marker = new AMap.Marker({
                //點的位置，從上面賦值，直接賦數組的值是沒法獲得的，全部東西弄了可能有12個小時，這裏佔了10個小時
                position: [lng, lat],
                map: map //地圖，就是最開始建立的地圖
            });
            //這裏的content是信息框裏面的內容，能夠用js拼接成想要的樣式或格式
            marker.content =
            '<div class="info-title">名稱：' + siteName[i] + '</div><div class="info-content">' +
            '<img src="http://webapi.amap.com/images/amap.jpg">' +
            '負責人：' + WorkerName[i] + '<br/>' +
            '地址：' + FullName[i] + '</div>';
            ;
            //添加點的單擊事件
            marker.on('click', markerClick);
            marker.emit('click', { target: marker });
        }

        //當單擊Marker時彈出文本框
        function markerClick(e) {
            // alert(e.target.getPosition()); 獲取點的經緯度
            infoWindow.setContent(e.target.content);
            infoWindow.open(map, e.target.getPosition());
            clearMarker(e);
        }

        //自適應點分佈位置，使點可以顯示徹底
        map.setFitView();

        //獲取站點經緯度
        function getlnglat() {
            //爲地圖註冊click事件獲取鼠標點擊出的經緯度座標
            var clickEventListener = map.on('click', function (e) {
                document.getElementById("lnglat").value = e.lnglat.getLng() + ',' + e.lnglat.getLat();
                document.getElementById("key_11").value = e.lnglat.getLng();
                document.getElementById("key_12").value = e.lnglat.getLat();
                geocoder2();
            });
        }


        //------------------------------------------地址編碼解析 begin
        var mapObj;
        var result;
        var marker = [];
        var windowsArr = [];
        function mapInit() {
            mapObj = new AMap.Map('iCenter');    //默認定位：初始化加載地圖時，center及level屬性缺省，地圖默認顯示用戶所在城市範圍
        };
        var MGeocoder;
        var key_11;
        var key_12;
        function geocoder2() {  //POI搜索，關鍵字查詢
            key_11 = document.getElementById("key_11").value;
            key_12 = document.getElementById("key_12").value;

            if (key_11 == "" || typeof (key_11) == null || typeof (key_11) == 'undefined') {

                alert("地圖還未加載完成，沒法獲取相應點，請稍後...")
            }

            var lnglatXY = new AMap.LngLat(key_11, key_12);
            //document.getElementById('result').innerHTML = "您輸入的是：" + key_1;
            //加載地理編碼插件
            mapObj.plugin(["AMap.Geocoder"], function () {
                MGeocoder = new AMap.Geocoder({
                    radius: 1000,
                    extensions: "all"
                });
                //返回地理編碼結果
                AMap.event.addListener(MGeocoder, "complete", geocoder_CallBack2);
                //逆地理編碼
                MGeocoder.getAddress(lnglatXY);
            });

            mapObj.setFitView();
        }

        function geocoder_CallBack2(data) { //回調函數
            var resultStr = "";
            var address;
            //返回地址描述
            address = data.regeocode.formattedAddress;
            //返回周邊道路信息

            //返回結果拼接輸出
            resultStr = "<div style=\"font-size: 12px;padding:0px 0 4px 2px; border-bottom:1px solid #C1FFC1;\">" + "<b>地址</b>：" + address + "</div>";
            document.getElementById("tipinput").value = address;
            document.getElementById("result").innerHTML = resultStr;
        }
        //------------------------------------------地址編碼解析 end



        //---------------------------------------------右鍵菜單    begin

        var contextMenu = new AMap.ContextMenu();  //建立右鍵菜單
        //右鍵放大
        contextMenu.addItem("放大一級", function () {
            map.zoomIn();
        }, 0);
        //右鍵縮小
        contextMenu.addItem("縮小一級", function () {
            map.zoomOut();
        }, 1);
        //右鍵顯示全國範圍
        contextMenu.addItem("縮放至全國範圍", function (e) {
            map.setZoomAndCenter(4, [108.946609, 34.262324]);
        }, 2);
        //右鍵添加Marker站點
        contextMenu.addItem("添加站點", function (e) {
            addMarker();   //------------------------------------直接寫方法，而後把上面的方法刪了就好了
        }, 3);
        //右鍵添加Marker站點
        contextMenu.addItem("刪除站點", function (e) {

        }, 4);//  ----------------------------------要添加跟多按鈕的時候注意第三個參數不能重複

        //地圖綁定鼠標右擊事件——彈出右鍵菜單
        map.on('rightclick', function (e) {
            contextMenu.open(map, e.lnglat);
            contextMenuPositon = e.lnglat;
        });

        //---------------------------------------------右鍵菜單    begin


    </script>
    <div id="myPageTop" style="display: none;">
        <table>
            <tr>
                <td colspan="2">
                    <label>
                        <span style="color: Red">點擊地圖上相應位置便可添加地址及相應經緯度！</span>
                    </label>
                </td>
            </tr>
            <tr>
                <td>
                    <label>
                        名稱：
                    </label>
                </td>
                <td class="column2">
                    <label>
                        負責人：
                    </label>
                </td>
            </tr>
            <tr>
                <td>
                    <input type="text" placeholder="請填寫養老院名稱" id="siteName">
                </td>
                <td class="column2">
                    <input type="text" placeholder="請填寫養老院負責人" id="WorkerName">
                </td>
            </tr>
            <tr style="display:none">
                <td>
                    <div id="iCenter">
                    </div>
                    <div id="result">
                    </div>
                    <div id="iControlbox">

                        <input type="text" id="key_11" value="126.48" />
                        <input type="text" id="key_12" value="46.83" />
                        <button onclick="javascript:geocoder2();">
                            逆地址解析
                        </button>

                    </div>
                </td>
            </tr>

            <tr>
                <td colspan="2">
                    <label>
                        經緯度(點擊地圖獲取)：
                    </label>
                </td>
            </tr>
            <tr>
                <td colspan="2">
                    <input type="text" readonly="true" id="lnglat" style="width:375px;">
                </td>
            </tr>
            <tr>
                <td colspan="2">
                    <label>
                        詳細地址(點擊地圖獲取地址)：
                    </label>
                </td>

            </tr>
            <tr>

                <td colspan="2">
                    <input type="text" placeholder="詳細地址" id="tipinput" style="width:375px;">
                </td>
            </tr>
            <tr>
                <td colspan="2">
                    <input type="button" class="button" style="width: 190px; height: 20px;" value="確認添加"
                           onclick="AddMarkerBtn();" />
                    <input type="button" class="button" style="width: 190px; height: 20px;" value="關閉窗體"
                           onclick="ColseaddMarkerWindow();" />
                </td>
            </tr>
        </table>
    </div>
</body>
</html>
相關標籤/搜索
每日一句
每一个你不满意的现在，都有一个你没有努力的曾经。