google-maps - Google Maps API - 将任意数据添加到数据层中的点
问题描述
var schoolLayer = new google.maps.Data();
schoolLayer.setMap(map);
let latLng = new google.maps.LatLng(coords1, coords2);
let school = new google.maps.Data.Point(latLng);
schoolLayer.add({geometry: school});
我正在建立一个学校层。我通过向数据层添加点来做到这一点。我很容易加分。我的问题是,如何添加任意数据,例如学校名称?
我试着做,schoolLayer.add({geometry: school, school_name: 'Hello Elementary School'})
但它不起作用。
解决方案
将任意数据放在特征的属性字段中。
let latLng = new google.maps.LatLng(37.4419, -122.1419);
let school = new google.maps.Data.Point(latLng);
schoolLayer.add({
geometry: school,
properties: {
name: "school1"
}
});
然后你可以在这样的事件监听器中得到它:
google.maps.event.addListener(schoolLayer, 'click', function(e) {
infowindow.setContent(e.feature.getProperty("name"));
infowindow.setOptions({
pixelOffset: new google.maps.Size(0, -40)
})
infowindow.setPosition(e.latLng);
infowindow.open(map);
})
function initialize() {
var map = new google.maps.Map(
document.getElementById("map_canvas"), {
center: new google.maps.LatLng(37.4419, -122.1419),
zoom: 13,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var infowindow = new google.maps.InfoWindow();
var schoolLayer = new google.maps.Data();
schoolLayer.setMap(map);
let latLng = new google.maps.LatLng(37.4419, -122.1419);
let school = new google.maps.Data.Point(latLng);
schoolLayer.add({
geometry: school,
properties: {
name: "school1"
}
});
let latLng2 = new google.maps.LatLng(37.445, -122.145);
let school2 = new google.maps.Data.Point(latLng2);
schoolLayer.add({
geometry: school2,
properties: {
name: "school2"
}
});
google.maps.event.addListener(schoolLayer, 'click', function(e) {
infowindow.setContent(e.feature.getProperty("name"));
infowindow.setOptions({
pixelOffset: new google.maps.Size(0, -40)
})
infowindow.setPosition(e.latLng);
infowindow.open(map);
})
}
google.maps.event.addDomListener(window, "load", initialize);
html,
body,
#map_canvas {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px
}
<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map_canvas"></div>
推荐阅读
- c++ - 如何在 for 循环中使用促销访问所有 Qt 小部件?
- angular - 如何显示在浏览器上打开时正在下载的图像?
- matlab - 在 MATLAB 报告生成器中拆分表并设置有效数字
- javascript - 引导工具提示的定时隐藏不适用于快速光标移动
- javascript - 如何从 Firestore 获取数据到谷歌云功能?
- python - 使用 Pandas 计算的价格指标应该在哪里“放置”?
- c# - 如何在 Unity 3D 中实现与 Temple Run 完全一样的相机跟随?
- c# - 在 blazor 中发布会返回异常,指出“无法将 JSON 值转换为 System.Int32”。
- javascript - MODULE_NOT_FOUND 用于自适应卡片模板
- xml - 在 Oracle 中提取 XML 数据时总是出现空白