---
title: html、Vue、React应用
source: https://vjmap.com/guide/htmlVueReact.html
---

# html、Vue、React应用

::: tip 提示
vue2、vue3、React、Html[示例代码下载](https://vjmap.com/download/vjmap_demo.zip) ** 强烈建议下载参考，入门开发的简单示例 ** 
:::


## 安装

首先，确保您已安装 Node.js 和 npm、yarn 或 pnpm。然后在您的项目目录中运行以下命令来安装库：


### npm 安装
``` sh
npm install vjmap
```
### yarn 安装
``` sh
yarn add vjmap
```
### pnpm 安装
``` sh
pnpm add vjmap
```




## 引入

引入指定模块：

```js
import { Map } from 'vjmap';
// 引入样式
import "vjmap/dist/vjmap.min.css";
```

或引入全局模块：
```js
import vjmap from 'vjmap';
 // 引入样式
import "vjmap/dist/vjmap.min.css";
```

## 纯Html开发

对于不使用打包工具的纯 HTML 开发项目，您可以通过 `script` 标签引入库。
```html
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>vjmap</title>
	<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
	<link rel="stylesheet" type="text/css" href="https://vjmap.com/demo/js/vjmap/vjmap.min.css">
    <script type="text/javascript" src="https://vjmap.com/demo/js/vjmap/vjmap.min.js"></script>
</head>
<body>
	const env = {
            serviceUrl: "https://vjmap.com/server/api/v1",
            accessToken: "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJJRCI6MiwiVXNlcm5hbWUiOiJhZG1pbjEiLCJOaWNrTmFtZSI6ImFkbWluMSIsIkF1dGhvcml0eUlkIjoiYWRtaW4iLCJCdWZmZXJUaW1lIjo4NjQwMCwiZXhwIjoxOTQyMzg5NTc0LCJpc3MiOiJ2am1hcCIsIm5iZiI6MTYyNzAyODU3NH0.VQchVXxgjl5aCp3j3Uf5U2Mpk1NJNirH62Ys-8XOfnY"
    };
    // 新建地图服务对象，传入服务地址和token
    let svc = new vjmap.Service(env.serviceUrl, env.accessToken)
    // 打开地图
    let res = await svc.openMap({
        mapid: "sys_zp", // 地图ID 
        mapopenway: vjmap.MapOpenWay.GeomRender, // 以几何数据渲染方式打开
        style: vjmap.openMapDarkStyle() // 服务器渲染样式
    })
    if (res.error) {
        console.error(res.error)
    }
    // 根据地图范围建立几何投影坐标系
    let prj = new vjmap.GeoProjection(res.bounds);
    // 地图对象
    let map = new vjmap.Map({
        container: 'map', // DIV容器ID
        style: svc.vectorStyle(), // 样式，这里是矢量瓦片样式
        center: prj.toLngLat(prj.getMapExtent().center()), // 设置地图中心点
        zoom: 2, // 设置地图缩放级别
        pitch: 0, // 倾斜角度
        renderWorldCopies: false // 不显示多屏地图
    });
    // 关联服务对象和投影对象
    map.attach(svc, prj);
</body>
</html>
```


## Vue、React开发

Vue、React开发请下载示例工程参考开发

vue、React、Html[示例代码下载](https://vjmap.com/download/vjmap_demo.zip)



::: warning 提示
如果工程化开发时，提示如下错误
![image-20240923111147721](https://vjmap.com/blogimages/202409231111747.png)

这是由于 `webpack` 或 `vite` 等工具对 `vjmap` sdk 二次混淆所引起的。请查看相关文档把 `vjmap` 排查，不要二次打包。

或者在import时加上 !号

如
```js
import vjmap from "!vjmap"
```
:::