如何使用JS和百度地圖實現地圖添加自定義地點標記功能
簡介：百度地圖是一款相當常用的地圖服務，它提供了豐富的地圖展示和交互功能，其中包括添加自定義地點標記。使用JS和百度地圖API，我們可以輕松實現在地圖上添加自定義地點標記的功能，以下是具體的代碼示例：
步驟一：準備工作
首先，在你的HTML文件中導入百度地圖的API文件，如下所示：
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=您的百度地圖API密鑰"></script>
登錄后復制
在頁面中創建一個地圖容器的div元素，指定寬度和高度，如下所示：
<div id="map" style="width:800px;height:600px;"></div>
登錄后復制
添加一個按鈕或者其他觸發事件的元素，用于觸發添加地點標記的功能，如下所示：
<button id="addMarkerBtn">添加標記</button>
登錄后復制
步驟二：添加地圖和標記功能
在JS中初始化地圖對象，如下所示：
var map = new BMap.Map("map"); // 創建地圖實例
var point = new BMap.Point(116.404, 39.915); // 創建一個初始坐標點
map.centerAndZoom(point, 15); // 初始化地圖，設置中心點和縮放級別
map.addControl(new BMap.NavigationControl()); // 添加平移縮放控件
map.addControl(new BMap.ScaleControl()); // 添加比例尺控件
登錄后復制
添加地圖點擊事件，用于在地圖上點擊添加地點標記，如下所示：
map.addEventListener("click", function(e) {
var point = e.point; // 獲取點擊的坐標點
var marker = new BMap.Marker(point); // 創建新的地點標記
map.addOverlay(marker); // 將標記添加到地圖上
});
登錄后復制
添加按鈕點擊事件，用于觸發地圖點擊事件，如下所示：
var addMarkerBtn = document.getElementById("addMarkerBtn");
addMarkerBtn.addEventListener("click", function() {
map.addEventListener("click", function(e) {
var point = e.point; // 獲取點擊的坐標點
var marker = new BMap.Marker(point); // 創建新的地點標記
map.addOverlay(marker); // 將標記添加到地圖上
});
});
登錄后復制
步驟三：測試效果
保存以上代碼并在瀏覽器中打開HTML文件，即可看到一個具有添加自定義地點標記功能的地圖頁面。點擊地圖上的任意位置，地圖上將會出現一個新的地點標記。
注意事項：
在使用百度地圖API之前，需要去百度地圖開放平臺申請一個API密鑰，替換掉代碼中的”您的百度地圖API密鑰”。上述代碼只是一個簡單的示例，實際應用中還需要對地點標記進行樣式和信息內容的自定義。
總結：
通過以上的步驟，我們可以使用JS和百度地圖API實現地圖添加自定義地點標記的功能。這對于需要標記特定地點的網站或者應用程序非常有用。希望本文的代碼示例能夠幫助到你！
