作者热门文章
- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我正在使用 Angular 组件@agm/core https://github.com/SebastianM/angular-google-maps我最新的 Angular 5 项目显示谷歌地图。它工作得很好,现在我想从可视化库添加谷歌地图热图图层。我不知道该怎么做。请帮忙
最佳答案
以下步骤对我有用(注意,经过长时间搜索后我还没有找到其他示例)。
1.安装 agm 和 googlemaps 类型:
npm install @agm/core --save
npm install @types/googlemaps --save-dev
2.将“google”添加到 tsconfig.json 中的 compilerOptions 内的类型数组中。例如:
"types": [
"google"
]
3.配置 agm 模块时,将可视化附加到您的 api key 。例如:
AgmCoreModule.forRoot({
apiKey: '...' + '&libraries=visualization'
})
4.在你的组件 html 中:
<agm-map [latitude]="..." [longitude]="..." (mapReady)="onMapLoad($event)">
</agm-map>
5.在您的组件 ts 中:
private map: google.maps.Map = null;
private heatmap: google.maps.visualization.HeatmapLayer = null;
...
onMapLoad(mapInstance: google.maps.Map) {
this.map = mapInstance;
// here our in other method after you get the coords; but make sure map is loaded
const coords: google.maps.LatLng[] = ...; // can also be a google.maps.MVCArray with LatLng[] inside
this.heatmap = new google.maps.visualization.HeatmapLayer({
map: this.map,
data: coords
});
}
首先确保您的 map 在没有热图代码(例如设置高度、API key 等)的情况下正常工作。
关于angular - 如何使用 Angular agm 来使用谷歌地图热图功能,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48919237/
leaflet:一个开源并且对移动端友好的交互式地图 JavaScript 库 中文文档: https://leafletjs.cn/reference.html 官网(英文): ht
我是一名优秀的程序员,十分优秀!