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);
// 取得網址裡的參數
function GetUrlVar(VarName)
{
name = name.replace(/[\[]/, "\\\[").replace(/[\]]/, "\\\]");
var regexS = "[\\?&]" + VarName + "=([^&#]*)";
var regex = new RegExp(regexS);
var results = regex.exec(window.location.href);
if (results == null)
return "";
else
return results[1];
}
// 這一部分是直接將streetviewoverlay.js的程式碼複製在此
var svo = null;
// the main application object
function SVO()
{
// Trafalgar Square
this.lat = Number(GetUrlVar('x1'));
this.lng = Number(GetUrlVar('y1'));
this.zoom = 16;
this.slat = Number(GetUrlVar('x2'));
this.slng = Number(GetUrlVar('y2'));
this.image = GetUrlVar('i');
this.pt = new google.maps.LatLng(this.lat, this.lng);
this.streetPt = new google.maps.LatLng(this.slat, this.slng);
// initial POV
this.sheading = Number(GetUrlVar('g'));
this.spitch = Number(GetUrlVar('p'));
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 = Number(GetUrlVar('w'));
this.markerHeight = Number(GetUrlVar('h'));
}
// create map
SVO.prototype.m_initMap = function ()
{
var mapDiv = eid("mapDiv");
var mapOptions =
{
...