README.md · long.chen/AS-Panorama - Gitee.com

forked from 孤傲/AS-Panorama

加入 Gitee

与超过 1200万开发者一起发现、参与优秀开源项目，私有仓库也完全免费：）

文件

克隆/下载

README.md 1.64 KB

# AS-Panorama

vue全景图组件，渲染全景图，切换全景图，全景图内根据经纬度添加标记点；
该组件使用options Api写法，vue2.x与vue3.x都可以使用

demo：[https://was666.gitee.io/as-panorama](https://was666.gitee.io/as-panorama)
## 组件使用示例：

```js
<template>
  <div class="home">
    <viewer
      ref="Viewer"
      :init="init"
      @click="viewerClick"
      @marker="markerClick"
    />
  </div>
</template>

<script setup>
import viewer from '@/components/Viewer.vue'
import { ref, reactive } from 'vue'
const Viewer = ref('Viewer')
const init = reactive({
  // 全景图
  imgurl: require('../assets/bg-0.webp'),
  // 是否显示底部操作栏
  navbar: false,
  // 底部title
  caption: '',
  // 标记点
  marker: [
    {
      id: 'image1',
      image: require('../assets/pin-blue.png'),
      width: 35,
      height: 35,
      longitude: 100,
      latitude: 100,
      anchor: 'bottom center',
      className: 'markers',
      tooltip: 'A circle of radius 30'
    }
  ]
})
const viewerClick = data => {
  console.log(data, '点击非标记位置')
}
const markerClick = data => {
  console.log(data, '点击标记位置')
}
// 切换全景图 imgUrl: 全景图   marker：标记点
const handelChangeViewer = (imgUrl, marker) => {
  Viewer.value.handelChangeViewer(imgUrl, marker)
}
</script>

```

## Project setup

```cmd
npm install
```

### Compiles and hot-reloads for development

```cmd
npm serve
```

### Compiles and minifies for production

```cmd
npm build
```

### Lints and fixes files

```cmd
npm lint
```

### Customize configuration

See [Configuration Reference](https://cli.vuejs.org/config/).

一键复制编辑原始数据按行查看历史

提交于 2023-04-04 01:10 . update README.md.

# AS-Panorama

vue全景图组件，渲染全景图，切换全景图，全景图内根据经纬度添加标记点；
该组件使用options Api写法，vue2.x与vue3.x都可以使用

demo：[https://was666.gitee.io/as-panorama](https://was666.gitee.io/as-panorama)
## 组件使用示例：

```js
<template>
  <div class="home">
    <viewer
      ref="Viewer"
      :init="init"
      @click="viewerClick"
      @marker="markerClick"
    />
  </div>
</template>

<script setup>
import viewer from '@/components/Viewer.vue'
import { ref, reactive } from 'vue'
const Viewer = ref('Viewer')
const init = reactive({
  // 全景图
  imgurl: require('../assets/bg-0.webp'),
  // 是否显示底部操作栏
  navbar: false,
  // 底部title
  caption: '',
  // 标记点
  marker: [
    {
      id: 'image1',
      image: require('../assets/pin-blue.png'),
      width: 35,
      height: 35,
      longitude: 100,
      latitude: 100,
      anchor: 'bottom center',
      className: 'markers',
      tooltip: 'A circle of radius 30'
    }
  ]
})
const viewerClick = data => {
  console.log(data, '点击非标记位置')
}
const markerClick = data => {
  console.log(data, '点击标记位置')
}
// 切换全景图 imgUrl: 全景图   marker：标记点
const handelChangeViewer = (imgUrl, marker) => {
  Viewer.value.handelChangeViewer(imgUrl, marker)
}
</script>

```

## Project setup

```cmd
npm install
```

### Compiles and hot-reloads for development

```cmd
npm serve
```

### Compiles and minifies for production

```cmd
npm build
```

### Lints and fixes files

```cmd
npm lint
```

### Customize configuration

See [Configuration Reference](https://cli.vuejs.org/config/).

马建仓 AI 助手

尝试更多

代码解读

代码找茬

代码优化

JavaScript

1

https://gitee.com/chenshi_long/as-panorama.git

git@gitee.com:chenshi_long/as-panorama.git

chenshi_long

as-panorama

AS-Panorama

master