html5 调佣地图展示街景

最新推荐文章于 2025-08-22 18:28:10 发布

原创最新推荐文章于 2025-08-22 18:28:10 发布 · 378 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#html5 #javascript

这篇博客展示了如何使用HTML5和JavaScript调用腾讯地图API来创建地图，并在地图上标记多个位置。点击标记可以弹出信息窗口，展示街景模式或接入摄像头功能。通过getUserMedia接口获取摄像头流，并提供关闭摄像头的选项。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>

<html>

<head>

html,body{

width:100%;

height:100%;

}

.div2{

background-color: blue;

width: 100px;

height: 100px;

float: left;

margin-left:300px;

margin-top:-400px;

}

#container{

width:100%;

height:90%;

}

margin:0px;

padding:0px;

}

body, button, input, select, textarea {

font: 12px/16px Verdana, Helvetica, Arial, sans-serif;

}

</style>

function init() {

var center = new qq.maps.LatLng(22.53291,113.93029);

var map = new qq.maps.Map(document.getElementById("container"), {

center: center,

zoom: 13

});

var infoWin0 = new qq.maps.InfoWindow({

map: map

});

var infoWin1 = new qq.maps.InfoWindow({

map: map

});

var infoWin2 = new qq.maps.InfoWindow({

map: map

});

var latlngs = [

new qq.maps.LatLng(22.53113,113.90650),

new qq.maps.LatLng(22.53086,113.92653),

new qq.maps.LatLng(22.52523,113.9)

];

for(var i = 0;i < latlngs.length; i++) {

(function(n){

var marker = new qq.maps.Marker({

position: latlngs[n],

map: map

});

qq.maps.event.addListener(marker, 'click', function() {

if(n==0)

{

infoWin0.open();

getMedia();

/* infoWin.setContent('<div style="text-align:center;white-space:'+

'nowrap;margin:10px;"> ' +

n + '接入摄像头</div>'); */

infoWin.setPosition(latlngs[n]);

}

if(n==1)

{

infoWin.open();

infoWin.setContent('<div style="text-align:center;white-space:'+

'nowrap;margin:10px;">接入街景模式 ' +

n +'<img src="3.png">' +' </div>');

infoWin.setPosition(latlngs[n]);

}

if(n==2)

{

infoWin.open();

infoWin.setContent('<div style="text-align:center;white-space:'+

'nowrap;margin:10px;">这 ' +

n + ' 是前海保税区！</div>');

infoWin.setPosition(latlngs[n]);

}

});

})(i);

}

function getMedia() {

let constraints = {

//参数

video: {width: 500, height: 500},

audio: true

};

//获得video摄像头区域

let video = document.getElementById("video");

//返回的Promise对象

let promise = navigator.mediaDevices.getUserMedia(constraints);

//then()异步，调用MediaStream对象作为参数

promise.then(function (MediaStream) {

video.srcObject = MediaStream;

video.play();

});

}

function takePhoto() {

//获得Canvas对象

//let video = document.getElementById("video");

let canvas = document.getElementById("canvas");

let ctx = canvas.getContext('2d');

//绘图

ctx.drawImage(video, 0, 0, 300, 300);

}

function stopMedia(videoElem) {

const stream = videoElem.srcObject;

const tracks = stream.getTracks();

tracks.forEach(function(track) {

track.stop(); //停止视频流

});

videoElem.srcObject = null;

}

</script>

</head>

</div>

</body>

</html>

html5 调佣地图 展示街景

html5 调佣地图展示街景