由于百度的API是基于Javascript的，無法直接在WinCC V7.5的環境中調用。

這里采用了一個變通的方式來實現，架構如下圖，在WinCC本機部署一個Web服務器，由其向百度地圖API服務器索取地圖，同時獲取WinCC的數據，將地圖和數據在HTML頁面合成，Zui后在WinCC中采用WebBrowser控件呈現在畫面中。

具體的過程

1. 進入百度地圖進入百度地圖API官網,申請一個密鑰（AK），并在html文件中使用AK碼，引入地圖API文件。

1. html中創建一個<div>元素，作為地圖的容器：<div id="container"></div>

1. 在html中創建自己的自 定義的元素

2. 將自定義的元素添加至地圖中。

   自定義一個構造函數，關鍵一步需將其prototype屬性設為地圖API提供的Overlay的實例，其它細節如下：
   

1. 利用上一步定義的類（構造函數） ，將自定義的元素添加至地圖中

1. 編寫獲取WinCC數據的Javascript代碼，此例的數據源為txt文件。將獲取的數據，處理，給相應的標簽元素賦值 

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

1. 將前面編寫好的前端代碼（ index.html+myjs.js等）放到該views文件夾下。

   此時，當啟動webserver后，此前端代碼的URL被定義為：

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

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前端與Web Server后端相結合，可實現更廣泛的應用可能，如：在WinCC中調用上圖的儀表盤（E-Chart），甚至加載3D容器。