将标签和标题添加到geoJSON中的点(标记),一旦加载就会显示在谷歌地图上,可以通过以下步骤实现:
以下是一个示例代码,演示如何将标签和标题添加到geoJSON中的点,并在谷歌地图上显示:
// 创建一个geoJSON对象
var geoJSON = {
"type": "FeatureCollection",
"features": [
{
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [longitude, latitude] // 坐标信息
},
"properties": {
"label": "标签内容", // 标签信息
"title": "标题内容" // 标题信息
}
}
]
};
// 加载谷歌地图
var map = new google.maps.Map(document.getElementById('map'), {
center: {lat: latitude, lng: longitude}, // 地图中心点坐标
zoom: 10 // 缩放级别
});
// 将geoJSON对象加载到地图上
map.data.addGeoJson(geoJSON);
// 自定义标记的样式
map.data.setStyle(function(feature) {
return {
icon: {
url: 'marker.png', // 自定义图标
scaledSize: new google.maps.Size(32, 32) // 图标大小
}
};
});
// 添加事件监听器,显示标签和标题信息
map.data.addListener('click', function(event) {
var label = event.feature.getProperty('label');
var title = event.feature.getProperty('title');
// 在谷歌地图上显示标签和标题信息
var infoWindow = new google.maps.InfoWindow({
content: '<div><strong>' + title + '</strong><br>' + label + '</div>'
});
infoWindow.setPosition(event.latLng);
infoWindow.open(map);
});
这样,当加载地图时,标签和标题信息将显示在对应的点上,用户点击标记时,将弹出包含标签和标题信息的信息窗口。
腾讯云相关产品和产品介绍链接地址:
领取专属 10元无门槛券
手把手带您无忧上云