Siemens肇庆西门子授权一级经销商---西门子V90伺服电机总代理

由于百度的API是基于Javascript的，无法直接在WinCC V7.5的环境中调用。

这里采用了一个变通的方式来实现，架构如下图，在WinCC本机部署一个Web服务器，由其向百度地图API服务器索取地图，获取WinCC的数据，将地图和数据在HTML页面合成，Zui后在WinCC中采用WebBrowser控件呈现在画面中。

具体的过程

• 编写前端代码

1. 进入百度地图进入百度地图API官网,申请一个密钥（AK），并在html文件中使用AK码，引入地图API文件。

1. html中创建一个<div>元素，作为地图的容器：<divid="container"></div>

1. 在html中创建自己的自 定义的元素

1. 将自定义的元素添加至地图中。

   自定义一个构造函数，关键一步需将其prototype属性设为地图API提供的Overlay的实例，其它细节如下：
   

1. 利用上一步定义的类（构造函数） ，将自定义的元素添加至地图中

1. 编写获取WinCC数据的Javascript代码，此例的数据源为txt文件。将获取的数据，处理，给相应的标签元素赋值 

• 部署web服务器

1. 本例为简化流程，采用node js，使用Express框架模版快速搭建Web服务器

1. 将前面编写好的前端代码（ index.html+myjs.js等）放到该views文件夹下。

   此时，当启动webserver后，此前端代码的URL被定义为：

   http://127.0.0.1:4000/views/index.html

• 组态WinCC

1. 组态WinCC画面，插入WebBrowser浏览器控件，并在控件的MyPage属性中链接到上面的URL。

1. 利用WinCC脚本，将变量值写入到一个txt文件中，作为地图数据的动态数据源。

1. 用记事本编写启动web服务器(加载前面的app.js)的批处理文件runNode.bat：

   cmd /k "cd /d 路径&&node app.js"

2. 在启动WinCC的启动web服务器

1. 运行WinCC，即如前面视频所示。

除地图外，可借鉴这个思路，通过Javascrip前端与WebServer后端相结合，可实现更广泛的应用可能，如：在WinCC中调用上图的仪表盘（E-Chart），甚至加载3D容器。