如何使用JS和百度地图实现地图添加自定义地点标记功能

王林原创: 2023-11-21 11:58:59 496浏览

简介：百度地图是一款相当常用的地图服务，它提供了丰富的地图展示和交互功能，其中包括添加自定义地点标记。使用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="max-width:90%"></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文件，即可看到一个具有添加自定义地点标记功能的地图页面。点击地图上的任意位置，地图上将会出现一个新的地点标记。

注意事项：