直接代码吧:

自定义地图

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: "

星河word

"

}, {

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. 高德地图开发自定义地图样式

    1.首先打开高都地图api自定义地图界面(自定义地图) 2.点进去,进行自定义地图配置 自定义样式 3.定义结束,点击发布 4.接下来点击使用自定义地图,会生成一串码 5.点击复制,在地图初始化调用这 ...

  2. php网页地图上自定义,网页嵌入百度地图和使用百度地图api自定义地图的详细步骤...

    在网页中插入百度地图 如果想在自己的网页上面加入百度地图的话,可以用百度地图的api.具体使用方法如下: 第二步:设置地图,大家可以对网站显示地图的宽高进行设置,其余选项不动. 第三步:添加标注.点击 ...

  3. Android高德地图实现自定义地图样式

    现在的应用中很多地方都会用到地图这个控件,但是地图提供给我们的样式有时可能不是我们想要的样式,这时候就需要用到第三方地图的自定义样式. 本文已高德地图为例,其他地图可自定查看官方文档 官方文档地址链接 ...

  4. DOTA无法加载服务器指定的地图,Dota2自定义地图工具怎么安装_Dota2自定义地图工具常见问题处理方法...

    Dota 2 创意工坊工具的早期测试(Alpha)版本已经发布,如果你有新奇的想法可以使用工具开发制作自己的地图,为Dota 2再添砖瓦. 如果是抱着"玩"的心态小编建议就不要下载 ...

  5. 高德地图使用自定义地图无效问题

    检查以下地方 1.地图样式id和key要再同一账号下 2.要发布 3.要再引入amap之前配置  window._AMapSecurityConfig 官方文档:准备-入门-教程-地图 JS API ...

  6. echarts r 地图_pyecharts自定义地图

    echarts的地图包经纬度数值被压缩,暂时没找到还原的工具,所以采用finebi的地图包. 2.编辑地图文件: 打开json格式的地图文件 image image image image 4.对编辑 ...

  7. Android基于高德SDK的开发——自定义地图主题样式(悬浮按钮+底部弹窗)

    日常的地图使用中,平台一般只会给我们提供地图的标准样式,造成了一定程度上的审美疲劳,那么如何实现地图的自定义样式呢?本文使用Android Studio 4.1,给开发者提供了一个基于高德地图SDK进 ...

  8. 如何在网中使用百度地图API自定义个性化地图

    <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...

  9. 手把手教你绘制自定义地图

    1. 内容概述 自定义地图组件支持使用用户自己绘制的地图绑定和呈现数据. 我们可以直接在设计器中绘制自定义地图,只需导入底图图片,进行描边和调整标记点,即可使用. 如下图所示,我们根据一张商场的平面图 ...

  10. 【vue-baidu-map】自定义地图

    目录 自定义地图 技术点 个性化地图配置 自定义地图 第一个坑:移动地图出现文字堆叠 第二个坑:地图瓦片不全 自定义地图 技术点 官网地址:Vue Baidu Map 百度指南:jspopularGL ...

最新文章

  1. 视频云王海华:关于移动短视频技术选型的那些事
  2. matlab与excel的交互
  3. JDk8的新特性-流和内部iteration
  4. Linux 线程与进程,以及通信
  5. 如何用计算机弹出ink sans,INKSANS模拟器PC
  6. EasyX实现俄罗斯方块游戏
  7. Web前端遍历对象应该如何操作呢?
  8. mysql 5.74安装教程_MySQL安装、基本账户安全(5.0以后版本)
  9. 从几个版本的memcpy的测速过程学习一点底层的东西
  10. node.js学习笔记之写文件
  11. 如果理解Javascript利用闭包循环绑定事件
  12. Swift 变量、常量、数据类型
  13. 手机移动端浏览器或PC端浏览器莫名出现计算错误或莫名返回到登录界面等问题的解决.
  14. 如何给Arduino项目添加音乐播放功能
  15. 针对IE安全控件的爬虫
  16. 【OD矩阵】《城市公交IC卡·数据分析方法及应用》利用公交运营时间和乘客刷卡时间特征识别上车点
  17. bib文件引用参考文献方法--心得
  18. 蛮力法的相关问题总结
  19. BMS(Battery Management System)是什么?
  20. java测试复盘2(2019.8.21)

热门文章

  1. eclipse安装反编译插件jd-eclipse
  2. jBPM4.4 no jBPM DB schema:
  3. 使用DRS的维护模式实现单个VM的测试
  4. 【转】POJ 1177 Picture(1)
  5. HP一年升两年保修实例!(附图片)
  6. java的for循环嵌套_优化Java的for循环嵌套的高效率方法
  7. 用标号跳出当前多重嵌套循环是否继续执行循环_4、在JAVA中如何跳出当前的多重嵌套循环?-Java面试题答案...
  8. hls fifo_【FCCM2020】HLS 高手对比 Verilog 高手,到底输哪了?
  9. c语言dll注入,教大家写一个远程线程的DLL注入,其实还是蛮简单的……………………...
  10. springaop事务逻辑原理_太狠了!阿里大牛手写的Spring核心面试笔记:IOC+AOP+MVC+事务...