高德地图使用案例 - 资江河畔

公告

<!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
posted on 2015-02-12 17:16 资江河畔阅读(2699) 评论(0) 编辑收藏举报
会员力量，点亮园子希望
刷新页面返回顶部