高德地图 使用案例

<!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

时间： 2024-10-14 12:53:44

高德地图 使用案例的相关文章

android利用GPS和高德地图获取定位案例

一.main.xml <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="fill_parent" android:layout_height="fill_parent" an

高德地图百度地图导航坐标转换

项目中的定位商家服务搜索用的是高德地图,毕竟高德在地图这块做的比百度好(个人认为).这里吐槽下百度的开发平台,上面开发文档及案例写的真不好,想找某个问题点很难找到和定位,希望百度改善下. 高德转百度(火星坐标gcj02ll–>百度坐标bd09ll) private double[] gaoDeToBaidu(double gd_lon, double gd_lat) { double[] bd_lat_lon = new double[2]; double PI = 3.141592653589

高德地图之定位篇-----&gt;定位、预测天气、围栏、搜索周边、行踪轨迹

跟集成百度地图一样,首先获取KEY,获取方式(官方的截图) 这篇主要是讲解高德地图定位篇,高德地图定位篇跟高德地图篇是不同的sdk,分离开了... 来看下配置流程吧,配置是第一位的 1.从网站下载并解压得到定位包"Android_Location_V1.xx.jar". 2.开发工程中新建"libs"文件夹,将定位包拷贝到 libs 的根目录下.拷贝完成后的工程目录(以 V1.0.4 为例)如图所示: image 注意:若您在 Eclipse 上使用 adt22 版

【高德地图开发】---地图显示

地图显示 地图显示的关键类是 AMap 类.在您的应用程序中,AMap 是地图的对象.AMap 地图将会通过 MapFragment 或 MapView 容器类来表现. AMap 类自动处理以下操作: 1.连接到高德地图服务 2.下载地图数据 3.在设备屏幕上显示地图 4.显示各种控件,如缩放控件 5.支持各种手势,如平移和缩放手势 下面以 MapView 显示地图为例进行说明: MapView 是 Android View 类的一个子类,它可以帮助您在 Android View 中放置地图,它

代码笔记：使用高德地图API创建地图以及获取当前地址经纬度

创建API地图带有点标记 <script src="http://webapi.amap.com/maps?v=1.4.1&key=bcf87f3263f98cc37309298bca20c622"></script> <script type="text/javascript"> // 实例化点标记 function addMarker() { marker = new AMap.Marker({ icon: "

HTML5创建高德地图

创建高德地图 功能真的很好很强大,有图有证据! 1.申请key值 去官网2.https://webapi.amap.com/maps?v=1.4.11&key=e22196035aaa10db3b0b6eb1ab64619e <script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.11&key=e22196035aaa10db3b0b6eb1ab64619e"

【API】高德地图API JS实现获取坐标和回显点标记

1.搜索+选择+获取经纬度和详细地址 2.回显数据并点标记 3.实现 第一步:引入资源文件 <!--引入高德地图JSAPI --><script src="//webapi.amap.com/maps?v=1.3&key=在官网申请一个key"></script><!--引入UI组件库(1.0版本) --><script src="//webapi.amap.com/ui/1.0/main.js">

js中实现高德地图坐标经纬度转百度地图坐标

1 function tobdMap(x, y) { 2 var x_pi = 3.14159265358979324 * 3000.0 / 180.0; 3 var z = Math.sqrt(x * x + y * y) + 0.00002 * Math.sin(y * x_pi); 4 var theta = Math.atan2(y, x) + 0.000003 * Math.cos(x * x_pi); 5 var bd_lon = z * Math.cos(theta) + 0.00

使用高德地图api导入行政区域及经纬度

高德地图提供了行政区域及经纬度查询api 参考如下链接 高德地图行政区域api 具体实现代码如下 package com.test; import java.util.HashMap;import java.util.Map; import org.json.JSONArray;import org.json.JSONObject; import jvc.util.DBUtils;import jvc.util.NetUtils;import jvc.util.db.Insert; public