高德地图自定义地图实例

最新推荐文章于 2024-06-06 09:28:03 发布

sunsineq

最新推荐文章于 2024-06-06 09:28:03 发布

阅读量982

点赞数

分类专栏：地图api 文章标签：地图api

本文链接：https://blog.csdn.net/sunsineq/article/details/116705785

版权

地图api 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<meta name="viewport" content="initial-scale=1.0, user-scalable=no"> 
	<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=xxxxxxxxxxxxxxxxxxxx"></script> 
</head>
<style>
	#container {width:100%; height: 480px; }  
</style>
<body>
<div id="container"></div> 
<div class="info">
	<h4>获取地图级别与中心点坐标</h4>
	<p>当前级别：<span id="map-zoom">11</span></p>
	<p>当前中心点：<span id="map-center">121.498586,31.239637</span></p>
</div>
  <script src="https://a.amap.com/jsapi_demos/static/demo-center/js/demoutils.js"></script>
<script>
	var map = new AMap.Map('container', {
	    
	    mapStyle: 'amap://styles/fa0b27ea5a7be99827d41cc0c7063586', //设置地图的显示样式
	    center: [116.397428, 39.90923],//中心点坐标
    	//viewMode:'3D',//使用3D视图
    	
    	layers: [//使用多个图层
            new AMap.TileLayer.Satellite(),
            new AMap.TileLayer.RoadNet()
        ],
        zooms: [4,28],//设置地图级别范围
        zoom: 13,//设置地图缩放比例
        heightFactor:2//2倍于默认高度，3D下有效

	});
// -----------------------------------------------------------------------------
	//实时路况图层
    var trafficLayer = new AMap.TileLayer.Traffic({
        zIndex: 10
    });
    map.add(trafficLayer);//添加图层到地图



// -----------------------------------------------------------------------------
     //显示地图层级与中心点信息
    function logMapinfo(){
      var zoom = map.getZoom(); //获取当前地图级别
      var center = map.getCenter(); //获取当前地图中心位置

      document.querySelector("#map-zoom").innerText = zoom;
      document.querySelector("#map-center").innerText = center.toString();
    };
     //绑定地图移动与缩放事件
    map.on('moveend', logMapinfo);
    map.on('zoomend', logMapinfo);

// --------------创建信息窗体---------------------------------------------------------------
	var infoWindow = new AMap.InfoWindow({ //创建信息窗体
        isCustom: true,  //使用自定义窗体
        content:'<div>信息窗体</div>', //信息窗体的内容可以是任意html片段
        offset: new AMap.Pixel(16, -45)
    });
    var onMarkerClick  =  function(e) {
        infoWindow.open(map, e.target.getPosition());//打开信息窗体
        //e.target就是被点击的Marker
    } 
    var marker = new AMap.Marker({
         position: [116.397428, 39.90923]
    })
    map.add(marker);
    marker.on('click',onMarkerClick);//绑定click事件


// -------------自定义信息窗体---------------------------------------------------------------

addMarker();

//添加marker标记
function addMarker() {
    map.clearMap();
    var marker1 = new AMap.Marker({
        map: map,
        position: [116.355199,39.91476],

 
    });
    //鼠标点击marker弹出自定义的信息窗体
    AMap.event.addListener(marker1, 'click', function () {
        infoWindow.open(map, marker1.getPosition());
    });
}

//实例化信息窗体
var title = '方恒假日酒店<span style="font-size:11px;color:#F00;">价格:318</span>',
    content = [];
content.push("<img src='http://tpc.googlesyndication.com/simgad/5843493769827749134'>地址：北京市朝阳区阜通东大街6号院3号楼东北8.3公里");
content.push("电话：010-64733333");
content.push("<a href='https://ditu.amap.com/detail/B000A8URXB?citycode=110105'>详细信息</a>");
var infoWindow = new AMap.InfoWindow({
    isCustom: true,  //使用自定义窗体
    content: createInfoWindow(title, content.join("<br/>")),
   // offset: new AMap.Pixel(16, -45)
});

//构建自定义信息窗体
function createInfoWindow(title, content) {
    var info = document.createElement("div");
    info.className = "custom-info input-card content-window-card";

    //可以通过下面的方式修改自定义窗体的宽高
    //info.style.width = "400px";
    // 定义顶部标题
    var top = document.createElement("div");
    var titleD = document.createElement("div");
    var closeX = document.createElement("img");
    top.className = "info-top";
    titleD.innerHTML = title;
    closeX.src = "https://webapi.amap.com/images/close2.gif";
    closeX.onclick = closeInfoWindow;

    top.appendChild(titleD);
    top.appendChild(closeX);
    info.appendChild(top);

    // 定义中部内容
    var middle = document.createElement("div");
    middle.className = "info-middle";
    middle.style.backgroundColor = 'white';
    middle.innerHTML = content;
    info.appendChild(middle);

    // 定义底部内容
    var bottom = document.createElement("div");
    bottom.className = "info-bottom";
    bottom.style.position = 'relative';
    bottom.style.top = '0px';
    bottom.style.left = '160px';
    bottom.style.margin = '0 auto';
    var sharp = document.createElement("img");
    sharp.src = "https://webapi.amap.com/images/sharp.png";
    bottom.appendChild(sharp);
    info.appendChild(bottom);
    return info;
}

//关闭信息窗体
function closeInfoWindow() {
    map.clearInfoWindow();
}



// ==========放大缩小工具=======================================================
AMap.plugin('AMap.ToolBar',function(){
   var toolbar = new AMap.ToolBar();
   map.addControl(toolbar)
})

// ==========缩略图=======================================================
AMap.plugin('AMap.OverView',function(){
   var overview = new AMap.OverView();
   map.addControl(overview)
})

</script>
<script type="text/javascript" src="https://webapi.amap.com/demos/js/liteToolbar.js"></script>
</body>
</html>

sunsineq

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
高德地图自定义地图实例

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <meta name="viewport" content="initial-scale=1.0, user-scalable=no"> <script type="text/javascript" src="https://webap.
复制链接

扫一扫

专栏目录