自定义地图怎么做成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;
}
自定义地图怎么做成html,自定义html为谷歌地图制作标记相关推荐
- php调用谷歌地图,在php mysql网站中使用谷歌地图api标记
据我所知,你陷入了想要从数据库中获取数据的部分,并根据纬度和经度呈现一个具有位置的地图..如果这是正确的,你可以尝试这个.. 基于此链接https://developers.google.com/ma ...
- python谷歌地图查找附近地铁站_如何在谷歌地图中可视化显示路线
在GPX/python/django方面我无能为力.但是,如果您可以大概地获得一组数据,其中包含路线沿线所有点的纬度和经度,则此代码将为您创建路线.在 Draw a polyline given ma ...
- googleMap 谷歌地图
一.谷歌地图主页 谷歌地图对应不同的地区都会有一些专门的主页,首次登陆时会显示这些地区.比如,香港的:http://maps.google.com.hk,台湾的:http://maps.google. ...
- GoogleMap——谷歌地图Api的使用
最近公司想要在国外也使用地图功能,而我们国内使用的是高德地图,国外客户需要用谷歌地图,所以去了解了一下谷歌地图的使用,这里记录一下. 准备工作 首先你得有一个谷歌账号,然后得用一点小魔法,去谷歌地图官 ...
- 基本农田卫星地图查询_发现谷歌地图替代网站,卫星地图街景功能都能用
众所周知,由于谷歌地图(Google Maps)在国内不能访问,很多人就没有办法通过谷歌地图来获得服务.谷歌地图是目前全球最受欢迎的世界地图网站,在2005年以前,谷歌地图就收录了美国.英国.加拿大三 ...
- uni-app 中如何使用谷歌地图 !?
最近在做uni-app的项目,由于是海外市场,所以在APP中需要使用到谷歌地图,本文主要是记录一下如何在uni-app中正确引入并使用我们的谷歌地图.(刨除微信小程序,微信小程序中还是使用uni.op ...
- 【收藏】亲测奥维互动地图如何导入2023谷歌地图
奥维谷歌地图是一款以高清为特色的卫星地图.用户们使用奥维谷歌地图就可以轻松的根据自己的出行计划来进行计划的定制,对奥维谷歌地图感兴趣那就快来下载吧. 快速导入 {$x}&y={$y}& ...
- 谷歌官方回应了,99 部手机行为艺术「捉弄」谷歌地图后续
_ By 超神经 内容导读:谷歌地图对于交通是否拥堵的判断依据是什么?它存在缺陷吗?一位叫 Simon Weckert 的艺术家,通过一个简单的实验,成功欺骗了谷歌地图的路况判断,在空旷的大马路上,制 ...
- 导航地图哪家强?谷歌地图超高分辨率完爆同类型对手
未来十年,移动互联终端设备愈来愈完善,智能机也会愈来愈智能化,互联网也伴随着之前的4G,发展到了现在的5G.导航软件变成大家日常生活不能缺乏的手机软件,现如今市场上百度地图.高德地图.谷歌地图.微软公 ...
最新文章
- gpg的一些常用操作
- Linux下执行.sh命令出现-bash: ./bin/start.sh: /bin/bash^M: bad interpreter: No such file or directory...
- RMAN backup validate database on databases in noarchivelog mode
- 怎么用git将本地代码上传到远程服务器_TortoiseGit将本地git仓库上传到远程git服务器方法...
- 使用airdrop进行文件共享
- 理解阻塞非阻塞与同步异步
- Laravel——通过邮件找回密码
- SSD6中Exercise4 (substitute.cpp) 答案解析
- pycharm用社区版还是专业版?看下两者的区别吧!
- SpringAOP底层API之代理对象执行流程
- 上海市建筑工程资料管理软件
- 树莓派USB摄像头使用
- 五种最火供应链金融模式分析(附详细案例)
- PWM的占空比、分辨率
- 这么多年你还在怕正则吗?
- 计算机英语os的全称,os是什么意思
- 通读cheerio API
- 英语新闻app——TagLayout+ViewPager+Fragment实现分类切页功能
- 2021年中国洋葱行业市场现状分析:洋葱价格创下近年新高[图]
- StageFright的滥用导致百万安卓设备受到威胁