最近,全球疫情形勢嚴峻,為了更好地防疫,很多網站都推出了疫情地圖。那么,在HTML中該如何編寫疫情地圖呢?下面就來介紹一下。
<html><head><title>疫情地圖</title><metacharset="UTF-8"/><style>/*定義地圖容器*/#map{width: 100%;height: 800px; }</style><scripttype="text/javascript"src="http://api.map.baidu.com/api?v=2.0&ak=[你的百度地圖API密鑰]"></script></head><body><divid="map"></div><script>//百度地圖API功能var map = new BMap.Map("map"); // 創建地圖實例 var point = new BMap.Point(116.404, 39.915); // 創建點坐標 map.centerAndZoom(point, 5); // 初始化地圖,設置中心點坐標和地圖縮放級別 map.enableScrollWheelZoom(true); // 允許滾輪縮放//添加標記點var marker = new BMap.Marker(point); map.addOverlay(marker); marker.setAnimation(BMAP_ANIMATION_BOUNCE); //跳動的動畫</script></body></html>
在以上代碼中,首先定義了一個id為map的div容器,用于存放地圖。然后在JavaScript中調用百度地圖API創建地圖實例和標記點,最后將標記點添加到地圖中。同時,通過樣式設置了地圖容器的大小和位置。
由于在創建地圖實例時調用了百度地圖API,因此需要注冊并獲取百度地圖API密鑰。
以上就是HTML編寫疫情地圖的代碼,通過以上代碼,我們能夠輕松地實現一個簡單的疫情地圖。