碼上快樂

相關內容    簡體    繁體

高德地圖 使用案例

本文轉載自   查看原文   2015-02-12 17:16   2176  
<!DOCTYPE html>
<!-- saved from url=(0039)http://zhaoziang.com/amap/zero_3_1.html -->
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

    <title>地圖覆蓋物</title>
    <link rel="stylesheet" type="text/css" href="./地圖覆蓋物_files/zero.css">
    <script charset="utf-8" src="./地圖覆蓋物_files/t.js"></script>
    <script language="javascript" src="./地圖覆蓋物_files/maps"></script>
    <link rel="stylesheet" type="text/css" href="./地圖覆蓋物_files/style.css">
    <script src="./地圖覆蓋物_files/main" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript" charset="utf-8" src="./地圖覆蓋物_files/count"></script>
</head>
<body onload="mapInit()">
<div id="iCenter" class="amap-container amap-fade-anim">
    <div class="amap-maps" style="transform: translate3d(0px, 0px, 0px);">
        <div class="amap-layers">
            <div class="amap-layer" style="z-index: 1;">
                <div class="amap-tile-container amap-zoom-animated"></div>
                <div class="amap-tile-container amap-zoom-animated"><img class="amap-tile amap-tile-loaded"
                                                                         style="height: 256px; width: 256px; left: 256px; top: 33px;"
                                                                         src="./地圖覆蓋物_files/appmaptile"><img
                        class="amap-tile amap-tile-loaded" style="height: 256px; width: 256px; left: 256px; top: 289px;"
                        src="./地圖覆蓋物_files/appmaptile(1)"><img class="amap-tile amap-tile-loaded"
                                                               style="height: 256px; width: 256px; left: 0px; top: 289px;"
                                                               src="./地圖覆蓋物_files/appmaptile(2)"><img
                        class="amap-tile amap-tile-loaded" style="height: 256px; width: 256px; left: 0px; top: 33px;"
                        src="./地圖覆蓋物_files/appmaptile(3)"><img class="amap-tile amap-tile-loaded"
                                                               style="height: 256px; width: 256px; left: 512px; top: 33px;"
                                                               src="./地圖覆蓋物_files/appmaptile(4)"><img
                        class="amap-tile amap-tile-loaded" style="height: 256px; width: 256px; left: 512px; top: 289px;"
                        src="./地圖覆蓋物_files/appmaptile(5)"><img class="amap-tile amap-tile-loaded"
                                                               style="height: 256px; width: 256px; left: 256px; top: -223px;"
                                                               src="./地圖覆蓋物_files/appmaptile(6)"><img
                        class="amap-tile amap-tile-loaded" style="height: 256px; width: 256px; left: 256px; top: 545px;"
                        src="./地圖覆蓋物_files/appmaptile(7)"><img class="amap-tile amap-tile-loaded"
                                                               style="height: 256px; width: 256px; left: 512px; top: -223px;"
                                                               src="./地圖覆蓋物_files/appmaptile(8)"><img
                        class="amap-tile amap-tile-loaded" style="height: 256px; width: 256px; left: 0px; top: 545px;"
                        src="./地圖覆蓋物_files/appmaptile(9)"><img class="amap-tile amap-tile-loaded"
                                                               style="height: 256px; width: 256px; left: 0px; top: -223px;"
                                                               src="./地圖覆蓋物_files/appmaptile(10)"><img
                        class="amap-tile amap-tile-loaded" style="height: 256px; width: 256px; left: 512px; top: 545px;"
                        src="./地圖覆蓋物_files/appmaptile(11)"></div>
            </div>
        </div>
        <div class="amap-overlays"></div>
    </div>
    <div class="amap-controls"></div>
    <img class="amap-logo" src="./地圖覆蓋物_files/autonavi.png">

    <div class="amap-copyright" style="display: block;">地圖數據 ©2014 AutoNavi - GS(2014)6002號</div>
</div>
<div id="iControlbox">
    <p>坐標：<span id="lnglat">&nbsp;</span></p><input type="hidden" id="x_" value=""/><input type="hidden" id="y_" value=""/>
    <ul>
        <li>
            <button onclick="javascript:addMarker();">添加marker</button>
            <button onclick="javascript:updateMarker();">修改marker</button>
            <button onclick="javascript:clearMap();">清空地圖</button>
        </li>
        <li>
            <button onclick="javascript:addMarker2();">普通標注</button>
            <button onclick="javascript:marker2Cartoon();">動畫</button>
            <button onclick="javascript:iJuhe();">聚合marker</button>
            <button onclick="javascript:clearMap();">清空地圖</button>
        </li>
        <li>
            <button onclick="javascript:addCloudLayer();">添加雲圖</button>
            <button onclick="javascript:clearMap();">清空地圖</button>
        </li>
        <li>
            <button onclick="javascript:startRun();">軌跡回放</button>
            <button onclick="javascript:endRun();">停止</button>
            <button onclick="javascript:clearMap();">清空地圖</button>
        </li>
        <li>
            <button onclick="javascript:addCircle();">圓形</button>
            <button onclick="javascript:addPolygon();">多邊形</button>
            <button onclick="javascript:clearMap();">清空地圖</button>
        </li>
        <li>
            <button onclick="javascript:openInfo();">默認信息窗口</button>
            <button onclick="javascript:myWindow();">自定義信息窗口</button>
            <button onclick="javascript:clearMap();">清空地圖</button>
        </li>
        <li>
            <button onclick="javascript:xmMap();">鼓浪嶼地圖</button>
            <button onclick="javascript:clearMap();">清空地圖</button>
        </li>
    </ul>
</div>
<!-- tongji begin-->
<script type="text/javascript">
    var _bdhmProtocol = (("https:" == document.location.protocol) ? " https://" : " http://");
    document.write(unescape("%3Cscript src='" + _bdhmProtocol + "hm.baidu.com/h.js%3Faeff88f19045b513af7681b011cea3bd' type='text/javascript'%3E%3C/script%3E"));
</script>
<script src="./地圖覆蓋物_files/h.js" type="text/javascript"></script>
<a href="http://tongji.baidu.com/hm-web/welcome/ico?s=aeff88f19045b513af7681b011cea3bd" target="_blank"><img border="0"
                                                                                                             src="./地圖覆蓋物_files/21.gif"
                                                                                                             width="20"
                                                                                                             height="20"></a>
<!-- tongji end -->

<script language="javascript">
var mapObj;
var marker;
var marker2;
var marker3;
var cluster;
var markers = [];
var lineArr;
var cloudDataLayer;
//初始化地圖對象，加載地圖  
function mapInit() {
    mapObj = new AMap.Map("iCenter", {
        center: new AMap.LngLat(116.397428, 39.90923), //地圖中心點
        level: 11  //地圖顯示的比例尺級別
        //zoomEnable:false
    });
    AMap.event.addListener(mapObj, 'click', getLnglat); //點擊事件
}
//鼠標點擊，獲取經緯度坐標  
function getLnglat(e) {
    var x = e.lnglat.getLng();
    var y = e.lnglat.getLat();
    document.getElementById("x_").value = x;
    document.getElementById("y_").value = y;
    document.getElementById("lnglat").innerHTML = x + "," + y;
}
//清空地圖
function clearMap() {
    mapObj.clearMap();
    cloudDataLayer.setMap(null);
}
//實例化marker  
function addMarker() {
//    mapObj.clearMap();    //  清除地圖上的 標記點
    var x = 116.405467;
    var y = 39.907761;
    x = document.getElementById("x_").value;
    y = document.getElementById("y_").value;
    marker = new AMap.Marker({
        icon: "zhao.gif",
        position: new AMap.LngLat(x, y)
    });
    marker.setMap(mapObj);  //在地圖上添加點  
}
//修改marker
function updateMarker() {
    //自定義點標記內容     
    var markerContent = document.createElement("div");
    markerContent.className = "markerContentStyle";

    //點標記中的圖標  
    var markerImg = document.createElement("img");
    markerImg.className = "markerlnglat";
    markerImg.src = "tuo.gif";
    markerContent.appendChild(markerImg);

    //點標記中的文本
    var markerSpan = document.createElement("span");
    markerSpan.innerHTML = "一秒鍾變拓跋玉兒";
    markerContent.appendChild(markerSpan);

    marker.setContent(markerContent);//更新點標記內容
    marker.setPosition(new AMap.LngLat(116.368732, 39.92514)); //更新點標記位置
}
function addMarker2() {
    mapObj.clearMap();
    marker2 = new AMap.Marker({
        position: (new AMap.LngLat(116.384182, 39.916451)),
        draggable: true,  //點標記可拖拽
        cursor: 'move',
        raiseOnDrag: true //鼠標拖拽點標記時開啟點標記離開地圖的效果
    });
    marker2.setMap(mapObj);
}
function marker2Cartoon() {
    marker2.setAnimation('AMAP_ANIMATION_BOUNCE'); //設置點標記的動畫效果，此處為彈跳效果
}
function iJuhe() {
    mapObj.clearMap();
    // 隨機向地圖添加500個標注點
    var mapBounds = mapObj.getBounds();
    var sw = mapBounds.getSouthWest();
    var ne = mapBounds.getNorthEast();
    var lngSpan = Math.abs(sw.lng - ne.lng);
    var latSpan = Math.abs(ne.lat - sw.lat);

    for (var i = 0; i < 500; i++) {
        var markerPosition = new AMap.LngLat(sw.lng + lngSpan * (Math.random() * 1), ne.lat - latSpan * (Math.random() * 1));
        var marker = new AMap.Marker({
            map: mapObj,
            position: markerPosition, //基點位置
            icon: "js_marker.png", //marker圖標，直接傳遞地址url
            offset: {x: -8, y: -34} //相對於基點的位置
        });
        markers.push(marker);
    }
    setTimeout(function () {
        addCluster(0);
        e
    }, 500);
}
function addCluster(tag) {
    if (cluster) {
        cluster.setMap(null);
    }
    if (tag == 1) {
        var sts = [
            {url: "js_1.png", size: new AMap.Size(32, 32), offset: new AMap.Pixel(-16, -30)},
            {url: "js_2.png", size: new AMap.Size(32, 32), offset: new AMap.Pixel(-16, -30)},
            {url: "js_3.png", size: new AMap.Size(48, 48), offset: new AMap.Pixel(-24, -45), textColor: '#CC0066'}
        ];
        mapObj.plugin(["AMap.MarkerClusterer"], function () {
            cluster = new AMap.MarkerClusterer(mapObj, markers, {styles: sts});
        });
    }
    else {
        mapObj.plugin(["AMap.MarkerClusterer"], function () {
            cluster = new AMap.MarkerClusterer(mapObj, markers);
        });
    }
}
//添加雲圖
function addCloudLayer() {
    //加載雲圖層插件  
    mapObj.plugin('AMap.CloudDataLayer', function () {
        var layerOptions = {
            query: {keywords: ''},
            clickable: true
        };
        cloudDataLayer = new AMap.CloudDataLayer('533904fbe4b08ebff7d53895', layerOptions); //實例化雲圖層類  
        cloudDataLayer.setMap(mapObj); //疊加雲圖層到地圖  

        AMap.event.addListener(cloudDataLayer, 'click', function (result) {
            var clouddata = result.data;
            var infoWindow = new AMap.InfoWindow({
                content: "<h3><font face=\"微軟雅黑\"color=\"#3366FF\">" + clouddata._name + "</font></h3><hr />地址：" + clouddata._address + "<br />" + "電話號碼：" + clouddata.phonenumber + "<br />" + "郵編：" + clouddata.postalcode + "<br /><strong>" + "擅長專科：" + clouddata.medicalspecialists + "</strong><br />" + "所在省份：" + clouddata.provinces,
                size: new AMap.Size(300, 0),
                autoMove: true,
                offset: new AMap.Pixel(0, -5)
            });
            infoWindow.open(mapObj, clouddata._location);
        });
    });
}
function removeCloudLayer() {
    cloudDataLayer.setMap(null);
}
//地圖圖塊加載完畢后執行函數  
function completeEventHandler() {
    marker3 = new AMap.Marker({
        map: mapObj,
        //draggable:true, //是否可拖動
        position: new AMap.LngLat(116.273881, 39.807409),//基點位置
        icon: "http://code.mapabc.com/images/car_03.png", //marker圖標，直接傳遞地址url
        offset: new AMap.Pixel(-26, -13), //相對於基點的位置
        autoRotation: true
    });
    var lngX = 116.273881;
    var latY = 39.807409;
    lineArr = new Array();
    lineArr.push(new AMap.LngLat(lngX, latY));
    for (var i = 1; i < 30; i++) {
        lngX = lngX + Math.random() * 0.05;
        if (i % 2) {
            latY = latY + Math.random() * 0.0001;
        } else {
            latY = latY + Math.random() * 0.06;
        }
        lineArr.push(new AMap.LngLat(lngX, latY));
    }
    //繪制軌跡
    var polyline = new AMap.Polyline({
        map: mapObj,
        path: lineArr,
        strokeColor: "#00A",//線顏色
        strokeOpacity: 1,//線透明度
        strokeWeight: 3,//線寬
        strokeStyle: "solid",//線樣式
    });
}
function startRun() {  //開始播放動畫
    completeEventHandler();
    marker3.moveAlong(lineArr, 80);     //開始軌跡回放
}
function endRun() {   //結束動畫播放
    marker3.stopMove();  //暫停軌跡回放
}
//添加圓覆蓋物  
function addCircle() {
    circle = new AMap.Circle({
        center: new AMap.LngLat("116.403322", "39.920255"),// 圓心位置
        radius: 10000, //半徑
        strokeColor: "#F33", //線顏色
        strokeOpacity: 1, //線透明度
        strokeWeight: 3, //線粗細度
        fillColor: "#ee2200", //填充顏色
        fillOpacity: 0.35//填充透明度
    });
    circle.setMap(mapObj);
}
//添加多邊形覆蓋物  
function addPolygon() {
    var polygonArr = new Array();//多邊形覆蓋物節點坐標數組
    polygonArr.push(new AMap.LngLat("116.319809", "39.956596"));
    polygonArr.push(new AMap.LngLat("116.556702", "39.983434"));
    polygonArr.push(new AMap.LngLat("116.483917", "39.845449"));
    polygonArr.push(new AMap.LngLat("116.244278", "39.848612"));
    polygon = new AMap.Polygon({
        path: polygonArr,//設置多邊形邊界路徑
        strokeColor: "#0000ff", //線顏色
        strokeOpacity: 0.2, //線透明度
        strokeWeight: 3,    //線寬
        fillColor: "#f5deb3", //填充色
        fillOpacity: 0.35//填充透明度
    });
    polygon.setMap(mapObj);
}

//在指定位置打開默認信息窗體  
function openInfo() {
    //構建信息窗體中顯示的內容  
    var info = [];
    info.push("<div><div><img style=\"float:left;\" src=\" http://webapi.amap.com/images/autonavi.png \"/></div> ");
    info.push("<div style=\"padding:0px 0px 0px 4px;\"><b>高德軟件</b>");
    info.push("電話 : 010-84107000   郵編 : 100102");
    info.push("地址 : 北京市望京阜通東大街方恆國際中心A座16層</div></div>");
    inforWindow = new AMap.InfoWindow({
        content: info.join("<br/>")  //使用默認信息窗體框樣式，顯示信息內容
    });
    inforWindow.open(mapObj, new AMap.LngLat(116.373881, 39.907409));
}

//實例化信息窗體  
var infoWindow2 = new AMap.InfoWindow({
    isCustom: true,  //使用自定義窗體
    content: createInfoWindow('方恆假日酒店&nbsp;&nbsp;<span style="font-size:11px;color:#F00;">價格:318</span>', "<img src='http://tpc.googlesyndication.com/simgad/5843493769827749134' style='float:left;margin:0 5px 5px 0;'>地址：北京市朝陽區阜通東大街6號院3號樓 東北 8.3 公里<br/>電話：010 64733333<br/><a href='http://baike.baidu.com/view/6748574.htm'>詳細信息</a>"),
    size: new AMap.Size(300, 0),
    offset: new AMap.Pixel(0, -50)//-113, -140
});

//關閉信息窗體  
function closeInfoWindow() {
    mapObj.clearInfoWindow();
}
//構建自定義信息窗體   
function createInfoWindow(title, content) {
    var info = document.createElement("div");
    info.className = "info";
    // 定義頂部標題  
    var top = document.createElement("div");
    top.className = "info-top";
    var titleD = document.createElement("div");
    titleD.innerHTML = title;
    var closeX = document.createElement("img");
    closeX.src = "close2.gif";
    closeX.onclick = closeInfoWindow;

    top.appendChild(titleD);
    top.appendChild(closeX);
    info.appendChild(top);
    // 定義中部內容  
    var middle = document.createElement("div");
    middle.className = "info-middle";
    middle.innerHTML = content;
    info.appendChild(middle);

    // 定義底部內容  
    var bottom = document.createElement("div");
    bottom.className = "info-bottom";
    var sharp = document.createElement("img");
    sharp.src = "sharp.png";
    bottom.appendChild(sharp);
    info.appendChild(bottom);
    return info;
}
function myWindow() {
    infoWindow2.open(mapObj, new AMap.LngLat(116.373881, 39.907409));
}
function xmMap() {
    mapObj.setZoom(15);
    var bounds = new AMap.Bounds(new AMap.LngLat(118.055005, 24.435624), new AMap.LngLat(118.078351, 24.454299)),
            groundImageOpts = {
                opacity: 1,   //圖片透明度
                clickable: true,//圖片相應鼠標點擊事件，默認：false
                map: mapObj     //圖片疊加的地圖對象
            };
    //實例化一個圖片覆蓋物對象
    var groundImage = new AMap.GroundImage('gly.png', bounds, groundImageOpts);
    setTimeout(function () {
        mapObj.setCenter(new AMap.LngLat(118.067665, 24.443946));
    }, 500);
    //mapObj.setCenter(new AMap.LngLat(118.067665,24.443946));
}
</script>

</body>
</html>

 

 

頁面參考來源： http://zhaoziang.com/amap/zero_3_1.html

打點工具在上一章《控件》中已經詳細講解，控件：http://www.cnblogs.com/milkmap/p/3707711.html

來源： http://www.cnblogs.com/milkmap/p/3727842.html


免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。



猜您在找 高德地圖的簡單使用 高德地圖的標記使用 高德地圖API使用 vue使用高德地圖 Nuxt使用高德地圖 android使用高德地圖的 對於“高德地圖”的使用感受 iOS:高德地圖的使用 vue2使用高德地圖及高德地圖UI 高德地圖 使用 天地圖底圖
 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM