如何在Google Map上添加标记以标注目标地点

你已引入的地图组件代码如下：

<google-map id="map-container" width="100%" height="100%" class="maps"></google-map>

前置准备 #

提前获取你要标注的目标地点的经纬度坐标，可通过地址解析工具转换得到。

具体实现步骤 #

• 第一步：获取地图组件实例

const mapEle = document.getElementById('map-container');

• 第二步：初始化地图基础属性（将中心点默认定位到目标地点）

// 示例经纬度为北京天安门坐标，可替换为你自己的目标地点经纬度
const targetLat = 39.9042;
const targetLng = 116.4074;
mapEle.lat = targetLat;
mapEle.lng = targetLng;
mapEle.zoom = 16; // 缩放级别可根据需求调整，数值越大放大比例越高

• 第三步：创建标记点并添加到地图

// 创建标记点组件实例
const marker = document.createElement('google-map-marker');
// 绑定标记点经纬度
marker.lat = targetLat;
marker.lng = targetLng;
// 可选配置：鼠标悬浮显示的提示文本
marker.title = "你的目标地点名称";
// 可选配置：点击标记点弹出的信息窗内容
marker.innerHTML = `<div>
  <h4>目标地点</h4>
  <p>地点详细介绍内容</p>
</div>`;
// 将标记点添加到地图容器中
mapEle.appendChild(marker);

注意事项 #

• 确保你已经在项目中正确加载Google Maps JavaScript API，且配置了有效的API密钥，已经开启了Maps JavaScript API相关权限
• 如果需要批量标注多个地点，只需要循环创建google-map-marker实例，分别绑定不同经纬度后加入地图即可
• 标记点的样式、图标可以通过组件的icon属性自定义替换

内容的提问来源于stack exchange，提问作者VolkanUstekidag