Bing地圖2025年7月正式停服,原來使用它的簡站wordpress主題,也受到的影響,現推出用百度地圖替代Bing地圖的解決方案。

原來的Bing地圖用于聯系我們頁面,對應的模板文件為page-contact.php文件,修改這個文件即可具體方法如

一、百度地圖替換Bing地圖方案

在主題文件夾中找到page-contact.php文件,編輯這個文件找到

 <div id='printoutPanel'></div>
	<div id='myMap' style='width: 100vw; height: 63vh;'></div>
	<script type='text/javascript' src='https://cn.bing.com/api/maps/mapcontrol?branch=experimental&setmkt=en&setlang=en&key=AjgHVt3P4HudrbsWbcPbHEw6mYR30S75K_tEpYS47zR6C3voNIv0kAY6mDUH1dms&callback=loadMapScenario' async defer></script>
		<script type='text/javascript'>
            function loadMapScenario() {
                var map = new Microsoft.Maps.Map(document.getElementById('myMap'), {
                    /* No need to set credentials if already passed in URL */
                    center: new Microsoft.Maps.Location(<?php echo of_get_option( 'map', 'no entry' ); ?>)
                });
                var center = map.getCenter();
                var infobox = new Microsoft.Maps.Infobox(map.getCenter(), { title: '<?php bloginfo('name'); ?>', description: 'Address:<?php echo of_get_option( 'address', 'no entry' ); ?>' });
                infobox.setMap(map);
                
            }
        </script>

換這部分代碼整體替換為

<div id='map' style='width: 100vw; height: 60vh;'></div>
<script src="https://api.map.baidu.com/api?v=3.0&ak=這里錄入百度地圖AK"></script>
<script type="text/javascript"> 
var map = new BMap.Map("map");
var point = new BMap.Point(這里放地址對應的百度地圖的坐標值);
map.centerAndZoom(point, 15);
map.addControl(new BMap.NavigationControl());
map.addControl(new BMap.ScaleControl());
map.addControl(new BMap.OverviewMapControl());
var marker = new BMap.Marker(point);
map.addOverlay(marker);
marker.setAnimation(BMAP_ANIMATION_BOUNCE);
var sContent =
"<div>" + 
"<h4><?php bloginfo('name'); ?></h4>" + 
"<p>電話:<?php echo of_get_option( 'phone', 'no entry' ); ?><br>" + 
"地址:<?php echo of_get_option( 'address', 'no entry' ); ?></p>" + 
"</div>";
var infoWindow = new BMap.InfoWindow(sContent); 
marker.openInfoWindow(infoWindow);
marker.addEventListener("click", function(){          
   this.openInfoWindow(infoWindow);
   document.getElementById('imgDemo').onload = function (){
       infoWindow.redraw();
   }
});
</script>

說明:使用這個需要先到百度地圖開放平臺注冊帳號并申請自己的AK,具體操作教程如下

1、到百度地圖開放平臺官網 https://lbsyun.baidu.com 注冊帳號(如果已經有百度帳號,可用已經有的帳號直接登陸)

2、登陸平臺后找“我的應用”

3、在“我的應用”里創建應用,應用名稱隨便寫(如,簡站wordpress主題地圖),寫好了,點右下角的“提交”即可。

4、應用創建成功后,在“我的應用”下面,要看到創建好的應用,里面包含有AK,復制這個AK替換掉上面代碼中的“這里錄入百度地圖AK”

5、再用自己的地址到百度的坐標拾取系統 https://api.map.baidu.com/lbsapi/getpoint/index.html 獲取坐標值(如,116.361362,40.001635),復制這個坐標值替換掉上面代碼中的“這里放地址對應的百度地圖的坐標值”。

如果不想使用百度地圖,想其它其它地圖。把本文最上面提到page-contact.php文件中的這一段代碼刪除,在相應的位置,添加其它地圖(如,Google Maps)的代碼即可。

如圖不想顯示地圖了,整體刪除這段代碼,保存文件即可。