JSFiddle - React, Tailwind, and code Playground
HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Street View Overlay</title>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false&libraries=geometry"></script>
<!--這一行先註解掉
<script type="text/javascript" src="streetviewoverlay.js"></script>
-->
<script type="text/javascript">
google.maps.event.addDomListener(window, 'load', loadPage);
// 這一部分是直接將streetviewoverlay.js的程式碼複製在此
var svo = null;
// the main application object
function SVO()
{
// Trafalgar Square
this.lat = 24.123375;
this.lng = 120.678040;
this.zoom = 16;
this.slat = 24.123433;
this.slng = 120.67848900000001;
this.image = "https://4.bp.blogspot.com/-nwoxmIWxrNk/V3DRa35Pv6I/AAAAAAAAEQo/vCyQrCmAUkE2oFJRfafbYahaYwyN-LzlgCKgB/s1600/6962389-2764590.jpg";
this.pt = new google.maps.LatLng(this.lat, this.lng);
this.streetPt = new google.maps.LatLng(this.slat, this.slng);
// initial POV
this.sheading = 250.2857142857143;
this.spitch = -1.9285714285714255;
this.szoom = 1;
this.distance = 0; // distance in metres from street view to marker
this.maximumDistance = 200; // distance beyond which marker is hidden
// dimensions of street view container (fixed)
this.panWidth = 420;
this.panHeight = 315;
// dimensions of marker container (resized according to current pov)
this.markerWidth = 180;
this.markerHeight = 125;
}
// create map
SVO.prototype.m_initMap = function ()
{
var mapDiv = eid("mapDiv");
var mapOptions =
{
center: this.pt,
zoom: this.zoom,
mapTypeId: google.maps.MapTypeId.ROADMAP,
scaleControl: true,
mapTypeControl: false
};
map = new google.maps.Map(mapDiv, mapOptions);
}
// create street view
SVO.prototype.m_initPanorama = function ()
{
var visible =...