自定義地圖怎么做成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.pswp.cn/news/282759.shtml
繁體地址,請注明出處:http://hk.pswp.cn/news/282759.shtml
英文地址,請注明出處:http://en.pswp.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登錄。如果沒…