android高德地图显示多点标记,高德地图多点标记自定义地图
直接代码吧:
自定义地图
html,body,#container{height:100%;100%;font-size:14px;font-family:"Chinese Quote",-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Hiragino Sans GB","Microsoft YaHei","Helvetica Neue",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol"}
.content-window-card{position:relative;box-shadow:none;bottom:0;left:0;auto;padding:0;border-radius:5px;overflow:hidden;}
.info-top{padding:10px 15px;position:relative;background:#fff;border-bottom:1px solid #ebebeb;}
.closeX{position:absolute;right:10px;top:2px;font-size:22px;cursor:pointer}
.info-middle{padding:15px 15px;border-radius:0 0 5px 5px;}
.info-bottom{height:12px;position:relative}
.sharp{0;height:0;border-left:7px solid transparent;border-right:7px solid transparent;border-top:12px solid #fff;position:absolute;left:50%;top:0;transform:translate(-50%,0)}
var map = new AMap.Map('container', {
resizeEnable: true,
zoom: 5,
center: [114.047614, 22.600735],
mapStyle: 'amap://styles/ac617ee5ac942dc438bc8ae1b99b7939',
viewMode: '3D', //开启3D视图,默认为关闭
buildingAnimation: true, //楼块出现是否带动画
//前往创建自定义地图样式:https://lbs.amap.com/dev/mapstyle/index
});
var capitals = [{
adcode: "",
center: [114.063185, 22.60495],
citycode: "1853",
name: "星河word",
text: '这是星河word小区',
content: "
"
}, {
adcode: "",
center: [114.384129, 30.508543],
citycode: "3803",
name: "保利华都",
text: '这是保利华都小区',
content: "
"
}]
//实例化信息窗体
var title = '提示';
var infoWindowArr = [],
facilities = [];
for (var i = 0; i < capitals.length; i++) {
var marker = new AMap.Marker({
position: new AMap.LngLat(capitals[i].center[0], capitals[i].center[1]),
offset: new AMap.Pixel(-10, -10),
icon: 'http://vdata.amap.com/icons/b18/1/2.png', // 添加 Icon 图标 URL
title: capitals[i].name,
});
facilities.push(marker);
var infoWindow = new AMap.InfoWindow({
isCustom: true, //使用自定义窗体
content: createInfoWindow(title, capitals[i].content),
offset: new AMap.Pixel(0, -20)
});
infoWindowArr.push(infoWindow);
}
map.add(facilities);
for (var i = 0; i < facilities.length; i++) {
(function(i) {
facilities[i].on('click', function(event) {
infoWindowArr[i].open(map, event.target.getPosition());
});
})(i)
}
//构建自定义信息窗体
function createInfoWindow(title, content) {
var info = document.createElement("div");
info.className = "custom-info input-card content-window-card";
//可以通过下面的方式修改自定义窗体的宽高
info.style.width = "300px";
// 定义顶部标题
var top = document.createElement("div");
var titleD = document.createElement("div");
var closeX = document.createElement("span");
top.className = "info-top";
titleD.innerHTML = title;
closeX.innerHTML = "×";
closeX.className = "closeX";
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";
var sharp = document.createElement("span");
sharp.className = "sharp";
bottom.appendChild(sharp);
info.appendChild(bottom);
return info;
}
//关闭信息窗体
function closeInfoWindow() {
map.clearInfoWindow();
}
android高德地图显示多点标记,高德地图多点标记自定义地图相关推荐
- 高德地图开发自定义地图样式
1.首先打开高都地图api自定义地图界面(自定义地图) 2.点进去,进行自定义地图配置 自定义样式 3.定义结束,点击发布 4.接下来点击使用自定义地图,会生成一串码 5.点击复制,在地图初始化调用这 ...
- php网页地图上自定义,网页嵌入百度地图和使用百度地图api自定义地图的详细步骤...
在网页中插入百度地图 如果想在自己的网页上面加入百度地图的话,可以用百度地图的api.具体使用方法如下: 第二步:设置地图,大家可以对网站显示地图的宽高进行设置,其余选项不动. 第三步:添加标注.点击 ...
- Android高德地图实现自定义地图样式
现在的应用中很多地方都会用到地图这个控件,但是地图提供给我们的样式有时可能不是我们想要的样式,这时候就需要用到第三方地图的自定义样式. 本文已高德地图为例,其他地图可自定查看官方文档 官方文档地址链接 ...
- DOTA无法加载服务器指定的地图,Dota2自定义地图工具怎么安装_Dota2自定义地图工具常见问题处理方法...
Dota 2 创意工坊工具的早期测试(Alpha)版本已经发布,如果你有新奇的想法可以使用工具开发制作自己的地图,为Dota 2再添砖瓦. 如果是抱着"玩"的心态小编建议就不要下载 ...
- 高德地图使用自定义地图无效问题
检查以下地方 1.地图样式id和key要再同一账号下 2.要发布 3.要再引入amap之前配置 window._AMapSecurityConfig 官方文档:准备-入门-教程-地图 JS API ...
- echarts r 地图_pyecharts自定义地图
echarts的地图包经纬度数值被压缩,暂时没找到还原的工具,所以采用finebi的地图包. 2.编辑地图文件: 打开json格式的地图文件 image image image image 4.对编辑 ...
- Android基于高德SDK的开发——自定义地图主题样式(悬浮按钮+底部弹窗)
日常的地图使用中,平台一般只会给我们提供地图的标准样式,造成了一定程度上的审美疲劳,那么如何实现地图的自定义样式呢?本文使用Android Studio 4.1,给开发者提供了一个基于高德地图SDK进 ...
- 如何在网中使用百度地图API自定义个性化地图
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...
- 手把手教你绘制自定义地图
1. 内容概述 自定义地图组件支持使用用户自己绘制的地图绑定和呈现数据. 我们可以直接在设计器中绘制自定义地图,只需导入底图图片,进行描边和调整标记点,即可使用. 如下图所示,我们根据一张商场的平面图 ...
- 【vue-baidu-map】自定义地图
目录 自定义地图 技术点 个性化地图配置 自定义地图 第一个坑:移动地图出现文字堆叠 第二个坑:地图瓦片不全 自定义地图 技术点 官网地址:Vue Baidu Map 百度指南:jspopularGL ...
最新文章
- 视频云王海华:关于移动短视频技术选型的那些事
- matlab与excel的交互
- JDk8的新特性-流和内部iteration
- Linux 线程与进程,以及通信
- 如何用计算机弹出ink sans,INKSANS模拟器PC
- EasyX实现俄罗斯方块游戏
- Web前端遍历对象应该如何操作呢?
- mysql 5.74安装教程_MySQL安装、基本账户安全(5.0以后版本)
- 从几个版本的memcpy的测速过程学习一点底层的东西
- node.js学习笔记之写文件
- 如果理解Javascript利用闭包循环绑定事件
- Swift 变量、常量、数据类型
- 手机移动端浏览器或PC端浏览器莫名出现计算错误或莫名返回到登录界面等问题的解决.
- 如何给Arduino项目添加音乐播放功能
- 针对IE安全控件的爬虫
- 【OD矩阵】《城市公交IC卡·数据分析方法及应用》利用公交运营时间和乘客刷卡时间特征识别上车点
- bib文件引用参考文献方法--心得
- 蛮力法的相关问题总结
- BMS(Battery Management System)是什么?
- java测试复盘2(2019.8.21)
热门文章
- eclipse安装反编译插件jd-eclipse
- jBPM4.4 no jBPM DB schema:
- 使用DRS的维护模式实现单个VM的测试
- 【转】POJ 1177 Picture(1)
- HP一年升两年保修实例!(附图片)
- java的for循环嵌套_优化Java的for循环嵌套的高效率方法
- 用标号跳出当前多重嵌套循环是否继续执行循环_4、在JAVA中如何跳出当前的多重嵌套循环?-Java面试题答案...
- hls fifo_【FCCM2020】HLS 高手对比 Verilog 高手,到底输哪了?
- c语言dll注入,教大家写一个远程线程的DLL注入,其实还是蛮简单的……………………...
- springaop事务逻辑原理_太狠了!阿里大牛手写的Spring核心面试笔记:IOC+AOP+MVC+事务...