自定义地图怎么做成html,自定义html为谷歌地图制作标记

好吧,似乎Custom Overlays会做我想要的。这是ping层:

function PingLayer(bounds, map) {

this.bounds = bounds;

this.setMap(map);

}

PingLayer.prototype = new google.maps.OverlayView();

PingLayer.prototype.onAdd = function() {

var div = document.createElement('DIV');

div.className = "ping";

this.getPanes().overlayLayer.appendChild(div);

div.appendChild(document.createElement("DIV"))

this.div = div;

setTimeout(function(){div.className += " startPing"}, 10);

}

PingLayer.prototype.draw = function() {

var overlayProjection = this.getProjection();

var sw = overlayProjection.fromLatLngToDivPixel(this.bounds.getSouthWest());

var ne = overlayProjection.fromLatLngToDivPixel(this.bounds.getNorthEast());

var div = this.div;

div.style.left = sw.x - 60 + 'px';

div.style.top = ne.y - 65 + 'px';

}这是将em添加到地图的方法:

var swBound = new google.maps.LatLng(lat, lng);

var neBound = new google.maps.LatLng(lat, lng);

var bounds = new google.maps.LatLngBounds(swBound, neBound);

new PingLayer(bounds, map);这是做动画的CSS:

.ping {

position: absolute;

width: 100px;

height: 100px;

}

.ping div {

top: 50px;

left: 50px;

position: relative;

width: 10px;

height: 10px;

border-radius: 50%;

-moz-border-radius: 50%;

-webkit-border-radius: 50%;

background: none;

border: solid 5px #000;

text-align: center;

font-size: 20px;

color: #fff;

-moz-transition-property: width, height, top, left, opacity;

-moz-transition-duration: 2s;

}

.ping.startPing div{

width: 100px;

height: 100px;

top: 0;

left: 0;

opacity: 0;

-moz-transition-duration: 2s;

}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/282759.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

HDU5248:序列变换(二分)

序列变换 Time Limit: 4000/2000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others) Total Submission(s): 1348 Accepted Submission(s): 593Problem Description给定序列A{A1,A2,...,An}, 要求改变序列A中的某些元素,形成一个严格单调的序列B&am…

微服务太分散?使用Fundebug集中式bug监控

摘要: 微服务日志分散,可以使用Fundebug的异常监控将它们集中起来。 当一个项目复杂到一定程度,功能越来越多,随之对应的模块也越来越多。 如果都放在一个大的项目下面,共同开发,整合发布,那么会…

html404页面怎么添加,网站要如何设置自定义404页面?

之前我们讲述过网站设置404页面对于优化或是用户体验的重要意义,大家可移步到《网站为什么要设置404页面》查看,今天我们讲解的是网站要如何设置自己的404页面。现在大多数空间商都有了404设置的功能,我们可将404页面上传至空间里面&#xff…

设计模式之——工厂方法模式

1、工厂方法模式(Factory Method)工厂方法模式分为三种:11、普通工厂模式,就是建立一个工厂类,对实现了同一接口的一些类进行实例的创建。首先看下关系图:举例如下:(我们举一个发送邮…

记一次性能故障排查

最近一次公司服务出了一些性能的问题,主要是内存不释放。领到任务后就开始展开工作。项目是用.net core 6写的,在框上应该不会有什么问题,这是大背景。另外服务是部署在k8s上的,于是就和性能测试人员,开发人员搭测试环…

html单选框 点击取消选中,radio单选框再点击取消选中

html:html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">单选框选项a选项b选项c选项dcheckradio.js://参数:obj为当前点击的radio对象function onClickRadioStyle(obj){var…

开启AngularJS 1.X的学习之路(1)

概念(1) AngularJS 应用 AngularJS 模块&#xff08;Module&#xff09; 定义了 AngularJS 应用。AngularJS 控制器&#xff08;Controller&#xff09; 用于控制 AngularJS 应用。ng-app指令定义了应用, ng-controller 定义了控制器。eg: <div ng-app"myApp" ng-…

Hello boke!

Hello boke&#xff01;转载于:https://www.cnblogs.com/yikuan-919/p/9319071.html

ASP.NET Core在.NET 7 RC1中的更新

原文链接&#xff1a;https://devblogs.microsoft.com/dotnet/asp-net-core-updates-in-dotnet-7-rc-1/[1]原文作者&#xff1a;Daniel Roth翻译&#xff1a;沙漠尽头的狼(谷歌翻译加持).NET 7 Release Candidate 1 (RC1) 现已推出[2]&#xff0c;其中包括对 ASP.NET Core 的许…

html5 tab菜单切换页面,11个常用的jQuery TAB切换菜单源码及制作教程

11个常用的jQuery TAB切换菜单源码及制作教程SponsorTAB切换式菜单可以方便为我们减少很多网页布局空间&#xff0c;而且用jQuery的话可以加入一些动画效果&#xff0c;比如渐变&#xff0c;向左右滑动等&#xff0c;提升一定的用户体验&#xff0c;所以TAB菜单目前来说是很流行…

7.16 10.19-10.22

10.19 iptables规则备份和恢复[roothyc-01-01 ~]# service iptables save 保存iptables规则该命令会将规则保存在/etc/sysconfig/iptables将iptables规则备份到一个文件中[roothyc-01-01 ~]# iptables-save>/tmp/ipt.txt将iptables规则备份到ipt.txt文件中从备份规则的文件恢…

走进javascript——不起眼的基础,值和分号

值 有时我很想知道javascript解析引擎是如何区分一个变量的值&#xff0c;比如下面这段代码。 var x javascript; //javascript x "hello"; // hello x 555; //555 x null; //null x a; //a is not defined x true; //true 对于数字是直接赋值的&#xff0c;因…

ConcurrentDictionary字典操作竟然不全是线程安全的?

好久不见&#xff0c;马甲哥封闭居家半个月&#xff0c;记录之前遇到的一件小事。ConcurrentDictionary<TKey,TValue>绝大部分api都是线程安全的[1]&#xff0c;唯二的例外是接收工厂函数的api&#xff1a;AddOrUpdate、GetOrAdd&#xff0c;这两个api不是线程安全的&…

码农小汪-Hibernate学习8-hibernate关联关系注解表示@OneToMany mappedBy @ManyToMany @JoinTable...

近期我也是有点郁闷&#xff0c;究竟是程序中处理关联关系。还是直接使用外键处理关联关系呢&#xff1f;这个的说法不一致&#xff01;程序中处理这样的关联关系的话。自己去维护这样的约束。这样的非常乐观的一种做法&#xff01;或者是直接在数据库中处理这样的直接的外键关…

HTML中弹窗中加入图片,javascript里怎么实现点击图片弹出对话框?

JavaScript中可以使用document.getElementsByTagName方法后去img标签&#xff0c;然后遍历所有img标签并为其添加点击事件实现点击弹出对话框。JavaScript实现点击图片弹出对话框&#xff1a;img {width: 500px;height: 300px;}//获取所有的img标签var imgObjs document.getEl…

Java学习优秀网站

各类程序员学习路线图&#xff1a; http://www.runoob.com/coder-learn-path 博学谷&#xff1a; http://v.itcast.cn/map/22.html 慕课网&#xff1a; http://www.imooc.com/course/programdetail/pid/31 转载于:https://www.cnblogs.com/Arsene/p/6441831.html

Dcloud课程2 什么是Dcloud

Dcloud课程2 什么是Dcloud 一、总结 一句话总结&#xff1a;DCloud提供了一套快速开发应用的跨平台技术方案。 1、DCloud的产品架构&#xff1f; MUI(H5)HBuilder 2、什么是MUI&#xff1f; 最接近原生体验的移动App的UI框架。 3、什么是H5&#xff1f; html5功能增强标准 二、…

html5 轮询自动刷新数据,后台调用exe,前端定时轮询调用结果

前提使用asp.net core 2.1前端使用vueui使用element-ui前端发送请求用Axios新建asp.net core程序1.jpg修改Index.html{Layout null;}test{{ msg }}发送请求打开记事本// 创建 Vue 实例&#xff0c;得到 ViewModelvar vm new Vue({el: #app,data: {msg: 准备发送请求打开exe},…

洛谷 P2951 [USACO09OPEN]捉迷藏Hide and Seek

题目描述 Bessie is playing hide and seek (a game in which a number of players hide and a single player (the seeker) attempts to find them after which various penalties and rewards are assessed; much fun usually ensues). She is trying to figure out in which…

使用ssh免密码登录Linux服务器

频繁登录Linux服务器时&#xff0c;使用ssh <username><host>的方式登录&#xff0c;但是每次都需要输入密码是件很麻烦的事。我们还可以使用私钥/公钥对的方式在免密码登录服务器。首先需要在远程服务器中安装ssh-server服务&#xff0c;才可以使用ssh登录。如果没…