【百度、高德】模仿房产酒店网站——自定义标注窗口

最新推荐文章于 2024-01-03 16:10:58 发布
最新推荐文章于 2024-01-03 16:10:58 发布
阅读量1.1k 收藏
点赞数
分类专栏： 地图应用开发 文章标签： 地图应用
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wdxzkp/article/details/9881315
版权

功能亮点：

  1. 自定义标注
  2. 地理坐标
  3. 批量marker
  4. 支持高德，百度
  5. 无Key也能用

 

发表点拙见。

高德的地图跟随移动不够好。但是窗体阴影效果很炫。

百度的移动很合理。窗体界面功能单一。

 

贴上高德代码，百度的代码具体实现参考酸奶小妹的博客

http://www.cnblogs.com/milkmap/archive/2011/08/04/2127663.html

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta name="viewport" content="initial-scale=1.0,user-scalable=no">
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<title>KK-高德地图</title>
<link rel="icon" href="favicon.ico" type="image/x-icon" />
<style type="text/css">
html{height:100%}
#container{height:100%}
a{text-decoration:none;color:#6ce;font-size:14px;}
a:hover{text-decoration:underline;}
div.map {
	width: 800px;
	height: 500px;
}
div.info {
	position: relative;
	z-index: 100;
	border: 1px solid #BCBCBC;
	box-shadow: 0 0 10px #B7B6B6;
	border-radius: 8px;
	background-color: rgba(255,255,255,0.9);
	transition-duration: 0.25s;
}
div.info:hover {
	box-shadow: 0px 0px 15px #0CF;
}

div.info-top {
	position: relative;
	background: none repeat scroll 0 0 #F9F9F9;
    border-bottom: 1px solid #CCC;
	border-radius:5px 5px 0 0;
}
div.info-top div {
	display: inline-block;
    color: #333333;
	font-size:14px;
	font-weight:bold;
	line-height:31px;
	padding:0 10px;
}
div.info-top img {
	position: absolute;
	top: 10px;
	right: 10px;
	transition-duration: 0.25s;
}
div.info-top img:hover{
	box-shadow: 0px 0px 5px #000;
}
div.info-middle {
	font-size:12px;
	padding:10px;
	line-height:21px;
}
div.info-bottom {
	height:0px;
	width:100%;
	clear:both;
	text-align:center;
}
div.info-bottom img{
	position: relative;
	z-index:104;
}

</style>
<script type="text/javascript"
src="http://webapi.amap.com/maps?v=1.2">
</script>
<script type="text/javascript">
    function initialize() {
        var position = new AMap.LngLat(116.404, 39.915); //创建中心点坐标
//        var mapObj = new AMap.Map("container", { center: position }); //创建地图实例
    }
</script>
    <script language="javascript">

        var obj, tool, view;
        
        var point = [new AMap.LngLat(116.411776, 39.942833), new AMap.LngLat(116.320791, 40.003682), new AMap.LngLat(116.275186, 39.896095), new AMap.LngLat(116.425098, 39.946249), new AMap.LngLat(116.359823, 39.984761), new AMap.LngLat(116.316479, 39.98323), new AMap.LngLat(116.385986, 39.946124), new AMap.LngLat(116.427545, 40.00796), new AMap.LngLat(116.446965, 39.911603), new AMap.LngLat(116.454579, 39.946652)];   //10个坐标点

        var marker1 = new AMap.Marker({ map: obj, position: point[1], offset: new AMap.Pixel(-8, -34), icon: "http://webapi.amap.com/images/marker_sprite.png", draggable: false });
        var marker2 = new AMap.Marker({ map: obj, position: point[2], offset: new AMap.Pixel(-8, -34), icon: "http://webapi.amap.com/images/marker_sprite.png", draggable: false });
        var marker3 = new AMap.Marker({ map: obj, position: point[3], offset: new AMap.Pixel(-8, -34), icon: "http://webapi.amap.com/images/marker_sprite.png", draggable: false });
        var marker4 = new AMap.Marker({ map: obj, position: point[4], offset: new AMap.Pixel(-8, -34), icon: "http://webapi.amap.com/images/marker_sprite.png", draggable: false });
        var marker5 = new AMap.Marker({ map: obj, position: point[5], offset: new AMap.Pixel(-8, -34), icon: "http://webapi.amap.com/images/marker_sprite.png", draggable: false });
        var marker6 = new AMap.Marker({ map: obj, position: point[6], offset: new AMap.Pixel(-8, -34), icon: "http://webapi.amap.com/images/marker_sprite.png", draggable: false });
        var marker7 = new AMap.Marker({ map: obj, position: point[7], offset: new AMap.Pixel(-8, -34), icon: "http://webapi.amap.com/images/marker_sprite.png", draggable: false });
        var marker8 = new AMap.Marker({ map: obj, position: point[8], offset: new AMap.Pixel(-8, -34), icon: "http://webapi.amap.com/images/marker_sprite.png", draggable: false });
        var marker9 = new AMap.Marker({ map: obj, position: point[9], offset: new AMap.Pixel(-8, -34), icon: "http://webapi.amap.com/images/marker_sprite.png", draggable: false });
        var marker0 = new AMap.Marker({ map: obj, position: point[0], offset: new AMap.Pixel(-8, -34), icon: "http://webapi.amap.com/images/marker_sprite.png", draggable: false });

//        var infoWindow1 = new AMap.InfoWindow({
//            isCustom: true,
//            content: InfoWindow('方恒假日酒店  <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"),
//            size: new AMap.Size(300, 0),
//            offset: new AMap.Pixel(0, -50)//-113, -140
//        });

//        var infoWindow2 = new AMap.InfoWindow({
//            isCustom: true,
//            content: InfoWindow('这里是标题123', "<div>4567ssdfdf:分析师们认为，iPhone5缺货是苹果股价最近下跌的主要原因用的新显示屏供应不足。</div>"),
//            size: new AMap.Size(300, 0),
//            offset: new AMap.Pixel(0, -50)//-113, -140
        //        });

        var infoWindow1 = new AMap.InfoWindow({ isCustom: true, content: InfoWindow('<span style="font-size:14px;color:#0A8021">如家快捷酒店 </span><span style="font-size:11px;color:#F00;">价格:120</span>', "<div style='line-height:1.8em;font-size:12px;'><b>地址:</b>北京市朝阳区高碑店小学旁</br><b>电话:</b>010-59921010</br><b>口碑：</b><img src='http://cdn2.iconfinder.com/data/icons/diagona/icon/16/031.png' /><img src='http://cdn2.iconfinder.com/data/icons/diagona/icon/16/031.png' /><img src='http://cdn2.iconfinder.com/data/icons/diagona/icon/16/031.png' /><img src='http://cdn2.iconfinder.com/data/icons/diagona/icon/16/031.png' /><img src='http://cdn2.iconfinder.com/data/icons/diagona/icon/16/031.png' /><a style='text-decoration:none;color:#2679BA;float:right' href='#'>详情>></a></div>"), size: new AMap.Size(300, 0), offset: new AMap.Pixel(0, -50) });
        var infoWindow2 = new AMap.InfoWindow({ isCustom: true, content: InfoWindow('<span style="font-size:14px;color:#0A8021">昆仑大厦</span>', "<div style='line-height:1.8em;font-size:12px;'><b>地址:</b>北京市朝阳区高碑店小学旁</br><b>电话:</b>010-59921010</br><b>口碑：</b><img src='http://cdn2.iconfinder.com/data/icons/diagona/icon/16/031.png' /><img src='http://cdn2.iconfinder.com/data/icons/diagona/icon/16/031.png' /><img src='http://cdn2.iconfinder.com/data/icons/diagona/icon/16/031.png' /><img src='http://cdn2.iconfinder.com/data/icons/diagona/icon/16/031.png' /><img src='http://cdn2.iconfinder.com/data/icons/diagona/icon/16/031.png' /><a style='text-decoration:none;color:#2679BA;float:right' href='#'>详情>></a></div>"), size: new AMap.Size(300, 0), offset: new AMap.Pixel(0, -50) });
        var infoWindow3 = new AMap.InfoWindow({ isCustom: true, content: InfoWindow('<span style="font-size:14px;color:#0A8021">华夏银行</span>', "<div style='line-height:1.8em;font-size:12px;'><b>地址:</b>北京市朝阳区高碑店小学旁</br><b>电话:</b>010-59921010</br><b>口碑：</b><img src='http://cdn2.iconfinder.com/data/icons/diagona/icon/16/031.png' /><img src='http://cdn2.iconfinder.com/data/icons/diagona/icon/16/031.png' /><img src='http://cdn2.iconfinder.com/data/icons/diagona/icon/16/031.png' /><img src='http://cdn2.iconfinder.com/data/icons/diagona/icon/16/031.png' /><img src='http://cdn2.iconfinder.com/data/icons/diagona/icon/16/031.png' /><a style='text-decoration:none;color:#2679BA;float:right' href='#'>详情>></a></div>"), size: new AMap.Size(300, 0), offset: new AMap.Pixel(0, -50) });
        var infoWindow4 = new AMap.InfoWindow({ isCustom: true, content: InfoWindow('<span style="font-size:14px;color:#0A8021">成都小吃</span>', "<div style='line-height:1.8em;font-size:12px;'><b>地址:</b>北京市朝阳区高碑店小学旁</br><b>电话:</b>010-59921010</br><b>口碑：</b><img src='http://cdn2.iconfinder.com/data/icons/diagona/icon/16/031.png' /><img src='http://cdn2.iconfinder.com/data/icons/diagona/icon/16/031.png' /><img src='http://cdn2.iconfinder.com/data/icons/diagona/icon/16/031.png' /><img src='http://cdn2.iconfinder.com/data/icons/diagona/icon/16/031.png' /><img src='http://cdn2.iconfinder.com/data/icons/diagona/icon/16/031.png' /><a style='text-decoration:none;color:#2679BA;float:right' href='#'>详情>></a></div>"), size: new AMap.Size(300, 0), offset: new AMap.Pixel(0, -50) });
        var infoWindow5 = new AMap.InfoWindow({ isCustom: true, content: InfoWindow('<span style="font-size:14px;color:#0A8021">锦绣大饭店</span>', "<div style='line-height:1.8em;font-size:12px;'><b>地址:</b>北京市朝阳区高碑店小学旁</br><b>电话:</b>010-59921010</br><b>口碑：</b><img src='http://cdn2.iconfinder.com/data/icons/diagona/icon/16/031.png' /><img src='http://cdn2.iconfinder.com/data/icons/diagona/icon/16/031.png' /><img src='http://cdn2.iconfinder.com/data/icons/diagona/icon/16/031.png' /><img src='http://cdn2.iconfinder.com/data/icons/diagona/icon/16/031.png' /><img src='http://cdn2.iconfinder.com/data/icons/diagona/icon/16/031.png' /><a style='text-decoration:none;color:#2679BA;float:right' href='#'>详情>></a></div>"), size: new AMap.Size(300, 0), offset: new AMap.Pixel(0, -50) });
        var infoWindow6 = new AMap.InfoWindow({ isCustom: true, content: InfoWindow('<span style="font-size:14px;color:#0A8021">七天快捷酒店</span>', "<div style='line-height:1.8em;font-size:12px;'><b>地址:</b>北京市朝阳区高碑店小学旁</br><b>电话:</b>010-59921010</br><b>口碑：</b><img src='http://cdn2.iconfinder.com/data/icons/diagona/icon/16/031.png' /><img src='http://cdn2.iconfinder.com/data/icons/diagona/icon/16/031.png' /><img src='http://cdn2.iconfinder.com/data/icons/diagona/icon/16/031.png' /><img src='http://cdn2.iconfinder.com/data/icons/diagona/icon/16/031.png' /><img src='http://cdn2.iconfinder.com/data/icons/diagona/icon/16/031.png' /><a style='text-decoration:none;color:#2679BA;float:right' href='#'>详情>></a></div>"), size: new AMap.Size(300, 0), offset: new AMap.Pixel(0, -50) });
        var infoWindow7 = new AMap.InfoWindow({ isCustom: true, content: InfoWindow('<span style="font-size:14px;color:#0A8021">中央民族大学</span>', "<div style='line-height:1.8em;font-size:12px;'><b>地址:</b>北京市朝阳区高碑店小学旁</br><b>电话:</b>010-59921010</br><b>口碑：</b><img src='http://cdn2.iconfinder.com/data/icons/diagona/icon/16/031.png' /><img src='http://cdn2.iconfinder.com/data/icons/diagona/icon/16/031.png' /><img src='http://cdn2.iconfinder.com/data/icons/diagona/icon/16/031.png' /><img src='http://cdn2.iconfinder.com/data/icons/diagona/icon/16/031.png' /><img src='http://cdn2.iconfinder.com/data/icons/diagona/icon/16/031.png' /><a style='text-decoration:none;color:#2679BA;float:right' href='#'>详情>></a></div>"), size: new AMap.Size(300, 0), offset: new AMap.Pixel(0, -50) });
        var infoWindow8 = new AMap.InfoWindow({ isCustom: true, content: InfoWindow('<span style="font-size:14px;color:#0A8021">昌平汽车专修学院</span>', "<div style='line-height:1.8em;font-size:12px;'><b>地址:</b>北京市朝阳区高碑店小学旁</br><b>电话:</b>010-59921010</br><b>口碑：</b><img src='http://cdn2.iconfinder.com/data/icons/diagona/icon/16/031.png' /><img src='http://cdn2.iconfinder.com/data/icons/diagona/icon/16/031.png' /><img src='http://cdn2.iconfinder.com/data/icons/diagona/icon/16/031.png' /><img src='http://cdn2.iconfinder.com/data/icons/diagona/icon/16/031.png' /><img src='http://cdn2.iconfinder.com/data/icons/diagona/icon/16/031.png' /><a style='text-decoration:none;color:#2679BA;float:right' href='#'>详情>></a></div>"), size: new AMap.Size(300, 0), offset: new AMap.Pixel(0, -50) });
        var infoWindow9 = new AMap.InfoWindow({ isCustom: true, content: InfoWindow('<span style="font-size:14px;color:#0A8021">百度大厦</span>', "<div style='line-height:1.8em;font-size:12px;'><b>地址:</b>北京市朝阳区高碑店小学旁</br><b>电话:</b>010-59921010</br><b>口碑：</b><img src='http://cdn2.iconfinder.com/data/icons/diagona/icon/16/031.png' /><img src='http://cdn2.iconfinder.com/data/icons/diagona/icon/16/031.png' /><img src='http://cdn2.iconfinder.com/data/icons/diagona/icon/16/031.png' /><img src='http://cdn2.iconfinder.com/data/icons/diagona/icon/16/031.png' /><img src='http://cdn2.iconfinder.com/data/icons/diagona/icon/16/031.png' /><a style='text-decoration:none;color:#2679BA;float:right' href='#'>详情>></a></div>"), size: new AMap.Size(300, 0), offset: new AMap.Pixel(0, -50) });
        var infoWindow0 = new AMap.InfoWindow({ isCustom: true, content: InfoWindow('方恒假日酒店  <span style="font-size:11px;color:#F00;">价格:318</span>', "<div style='line-height:1.8em;font-size:12px;'><b>地址:</b>北京市朝阳区高碑店小学旁</br><b>电话:</b>010-59921010</br><b>口碑：</b><img src='http://cdn2.iconfinder.com/data/icons/diagona/icon/16/031.png' /><img src='http://cdn2.iconfinder.com/data/icons/diagona/icon/16/031.png' /><img src='http://cdn2.iconfinder.com/data/icons/diagona/icon/16/031.png' /><img src='http://cdn2.iconfinder.com/data/icons/diagona/icon/16/031.png' /><img src='http://cdn2.iconfinder.com/data/icons/diagona/icon/16/031.png' /><a style='text-decoration:none;color:#2679BA;float:right' href='#'>详情>></a></div>"), size: new AMap.Size(300, 0), offset: new AMap.Pixel(0, -50) });

        function mapInit() {
            obj = new AMap.Map("iCenter");

            obj.plugin(["AMap.ToolBar", "AMap.OverView"], function () {
                //加载工具条
                tool = new AMap.ToolBar({ autoPosition: false });
                obj.addControl(tool);
                //加载鹰眼
                view = new AMap.OverView();
                obj.addControl(view);

            });

            obj.addOverlays(marker1);
            obj.addOverlays(marker2);
            obj.addOverlays(marker3);
            obj.addOverlays(marker4);
            obj.addOverlays(marker5);
            obj.addOverlays(marker6);
            obj.addOverlays(marker7);
            obj.addOverlays(marker8);
            obj.addOverlays(marker9);
            obj.addOverlays(marker0);


            AMap.event.addListener(marker1, 'mouseover', function () { infoWindow1.open(obj, marker1.getPosition()); });
            AMap.event.addListener(marker2, 'mouseover', function () { infoWindow2.open(obj, marker2.getPosition()); });
            AMap.event.addListener(marker3, 'mouseover', function () { infoWindow3.open(obj, marker3.getPosition()); });
            AMap.event.addListener(marker4, 'mouseover', function () { infoWindow4.open(obj, marker4.getPosition()); });
            AMap.event.addListener(marker5, 'mouseover', function () { infoWindow5.open(obj, marker5.getPosition()); });
            AMap.event.addListener(marker6, 'mouseover', function () { infoWindow6.open(obj, marker6.getPosition()); });
            AMap.event.addListener(marker7, 'mouseover', function () { infoWindow7.open(obj, marker7.getPosition()); });
            AMap.event.addListener(marker8, 'mouseover', function () { infoWindow8.open(obj, marker8.getPosition()); });
            AMap.event.addListener(marker9, 'mouseover', function () { infoWindow9.open(obj, marker9.getPosition()); });
            AMap.event.addListener(marker0, 'mouseover', function () { infoWindow0.open(obj, marker0.getPosition()); });

            //调整视野到合适的位置及级别                  
            obj.setFitView();

        }

        function openMyWin(robj, p) {
            robj.open(obj, p);
        }

        window.onload = function () {
            mapInit();
        };

        function closeInfoWindow() {
            obj.clearInfoWindow();
        }

        // 自定义信息窗体实现
        function InfoWindow(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 = "http://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.innerHTML = content;
            info.appendChild(middle);

            // 定义底部内容
            var bottom = document.createElement("div"), sharp;
            bottom.className = "info-bottom";
            sharp = document.createElement("img");
            sharp.src = "http://webapi.amap.com/images/sharp.png";
            bottom.appendChild(sharp);
            info.appendChild(bottom);
            return info;
        }



    </script>  

</head>
<body οnlοad="mapInit()">
<div id="iCenter" style="float:left;width:520px;height:340px;border:1px solid gray"> </div>
<div style="float:left;width:200px;height:340px;border:1px solid gray;border-width:1px 1px 1px 0;padding:0 10px 0 0;line-height:1.8em;">
    <ul>
        <li><span style="float:right;">120元</span><a οnmοuseοver="openMyWin(infoWindow1,point[1])" href="#">如家快捷酒店</a></li>
        <li><span style="float:right;">2370元</span><a οnmοuseοver="openMyWin(infoWindow2,point[2])" href="#">昆仑大厦</a></li>
        <li><span style="float:right;">50元</span><a οnmοuseοver="openMyWin(infoWindow3,point[3])" href="#">华夏银行</a></li>
        <li><span style="float:right;">16元</span><a οnmοuseοver="openMyWin(infoWindow4,point[4])" href="#">成都小吃</a></li>
        <li><span style="float:right;">300元</span><a οnmοuseοver="openMyWin(infoWindow5,point[5])" href="#">锦绣大饭店</a></li>
        <li><span style="float:right;">180元</span><a οnmοuseοver="openMyWin(infoWindow6,point[6])" href="#">七天快捷酒店</a></li>
        <li><span style="float:right;">9元</span><a οnmοuseοver="openMyWin(infoWindow7,point[7])" href="#">中央民族大学</a></li>
        <li><span style="float:right;">3300元</span><a οnmοuseοver="openMyWin(infoWindow8,point[8])" href="#">昌平汽车专修学院</a></li>
        <li><span style="float:right;">20元</span><a οnmοuseοver="openMyWin(infoWindow9,point[9])" href="#">百度大厦</a></li>
        <li><span style="float:right;">1000元</span><a οnmοuseοver="openMyWin(infoWindow0,point[0])" href="#">海尔电器销售点</a></li>
    </ul>
</div>
 <div id="Div1" style="float:bottom;width:275px;height:155px;border:0px solid gray">
 <img src="signature.png" />
 </div>
</body>
</html>


 

 

wdxzkp
关注
专栏目录
一页代码实现高德地图显示自己定位，以及Marker标记点显示
夏沫的博客
06-20 7980
import android.Manifest; import android.content.pm.PackageManager; import android.location.Location; import android.os.Bundle; import android.support.annotation.NonNull; import android.support.design...
百度 地图和高德地图 单击标注打开完全自定义的悬浮窗口
weixin_42215711的博客
08-22 3031
&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta http-equiv="Content-Type" content="text/html; charset=UTF-8"&gt; &lt;!-- Meta, title, CSS, favicons, etc. --&
高德地图开发
qq_14993591的博客
01-27 2993
1、原生js使用 1.1、引入js 去高德开发者平台创建一个自己key，具体步骤官网有。 <script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=您申请的key值"></script> 1.2、设置地图容器 <div id="container"></div> 这是个全屏地图 html, body{ width:100%; hei
swift-iOS仿链家地图找房-高德地图找房-需要自行用pod集成地图api
08-15
iOS仿链家地图找房-高德地图找房-需要自行用pod集成地图api
原生开发引入高德地图
全易
10-14 946
高德地图：应用到哪里就点哪个，有应用到安卓端的、IOS端的、WEB端等… 举个例子：WEB端 注册账号： 申请Key： 拿到Key之后就是 1. 开始引入高德地图： <script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=你的Key粘到这里"></scrip...
仿链家地图找房的简单实现
weixin_34376562的博客
06-08 3805
本篇目录： 使用入门 简单使用流程 链家地图找房效果 区域点位气泡 数据结构 实现 addOverlay方法 区域边界 获取区域点位经纬度 获取区域边界 小结 最近由于项目需要，开始调研如何使用百度地图实现类似于链家的地图找房的功能，从而开始学习百度地图相关内容。后续会根据一些使用到的知识点进行整理记录，以备不时之...
Vue3使用高德地图，自定义InfoWindow窗口
最新发布
第⑦个前端
01-03 955
【代码】Vue3使用高德地图，自定义InfoWindow窗口。
IOS - Swift高德地图自定义标注、气泡
Jafer的博客
09-12 1802
高德地图官方文档：https://lbs.amap.com/api/ios-sdk/guide/draw-on-map/draw-marker 之前那些SDK导入就不做说明了，直接导入后，开始。 看高德地图官方文档基本都是OC语言写的，swift也就没这么详细说明了。 这种高度自定义，用的也是oc自定义，没有给出swift版本的demo出来，所以我们想做到后面这个效果来： 气泡在iOS中又...
百度高德地图信息弹窗——vue组件的形式——Vue.extend
xiaoququ的博客
12-13 2402
【代码】百度地图信息弹窗——vue组件的形式。
Android基于高德SDK的开发——自定义地图主题样式（悬浮按钮+底部弹窗）
ycsss的博客
12-30 1844
日常的地图使用中，平台一般只会给我们提供地图的标准样式，造成了一定程度上的审美疲劳，那么如何实现地图的自定义样式呢？本文使用Android Studio 4.1，给开发者提供了一个基于高德地图SDK进行地图样式设置的方法，在高德平台提供的自定义地图支持基础上，通过界面悬浮按钮+底部弹窗的方式，给用户更人性化的更换地图样式选择。 目录一、实现效果二、高德提供的自定义地图样式下载和使用2.1自定义地图样式下载2.2 在Android中的离线调用三、SuspendButtonLayout悬浮扩展按钮的使用3.1
高德地图实现绘制覆盖物，自定义右键菜单
02-26
本项目聚焦于利用高德地图js-api实现绘制覆盖物，以及自定义右键菜单的功能。 首先，我们来探讨“绘制覆盖物”这一概念。在高德地图API中，覆盖物是指可以在地图上绘制的各种图形，如点、线、面等。在这个项目中，...
安卓高德地图开发自定义线路规划(按着自己定义的经纬度规划线路)
07-09
本教程将深入探讨如何使用高德地图API来实现自定义线路规划，即根据用户提供的经纬度数据定制路线。这个过程涉及到地图API的调用、地理坐标处理以及路径算法等多个知识点。 首先，我们需要在项目中集成高德地图SDK...
高德地图自定义点聚合图片
04-26
在Android开发中，高德地图是一个广泛使用的地图API，提供了丰富的功能，如定位、路径规划、地图绘制等。本文将详细讲解如何在高德地图上实现自定义点聚合（Marker）图片以及Overlay的点击选中功能。 首先，点聚合...
高德地图API——信息窗体InfoWindow
热门推荐
chenjing928的博客
05-23 3万+
信息窗体包括InfoWindow和AdvancedInfoWindow两个类，InfoWindow可以实现默认信息窗体、自定义信息窗体，AdvancedInfoWindow是封装了周边搜索和三种路线规划的高级信息窗体。这篇文章只讲述InfoWindow。信息窗体是什么呢？先来看一个最简单的案例&lt;!doctype html&gt; &lt;html&gt; &lt;head&gt; &...
高德地图多个Marker标记自动缩放全部显示在屏幕中
我的博客
05-27 2万+
高德地图 Marker 自动缩放
百度——个人云存储pcs——Android使用百度云盘(1)——获取access token
wdxzkp的专栏
10-04 1万+
百度个人云存储主页http://developer.baidu.com/ms/pcs 使用百度云存储原因： 1.应用的图片需要同步 2.部分数据需要云端存储   基于百度PCS的基本开发流程包括（见下图）： 1. 注册百度账号。 2. 登录百度开发者中心，注册成为百度开发者。 3. 创建应用。 4. 开通PCS API权限。 5. 获取Access_Token。
百度——地图API——Android—应用集成离线地图
wdxzkp的专栏
09-28 9689
有离线地图，真的挺方便的。具体可以看看我的应用。 http://as.baidu.com/a/item?docid=4120392&pre=web_am_se 最近有网友不知道如何将离线的百度地图，打包在应用中发布。所以整理了这篇博客与大家分享。   1.使用离线地图。经过测试，首次必须在线验证百度的APIKey。 2.离线地图文件，放到res/raw目录下。参见下图。 3.编写代
Android高德地图自定义Marker实现教程与示例
本文将详细介绍如何在高德地图中实现完全自定义Marker，这不仅限于高德，对于使用百度地图等其他地图服务的开发者也有参考价值。 首先，理解官方提供的设置Marker图标的基础方法至关重要。高德地图API提供了`...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值