我在我的angular项目中创建了一个google地图,我想把地图类型改成HYBRID,我怎么做呢.我已经按照官方文档,但我没有找到改变地图视图的方法我已经尝试了AGM地图,但网站本身是不工作的不知道是什么问题.我想删除工具提示,我怎么能做到这一点。
我的代码。
Typescript:
@ViewChild("mapContainer", { static: false }) gmap: ElementRef;
map: google.maps.Map;
lat = 40.73061;
lng = -73.935242;
markers = [
{
position: new google.maps.LatLng(40.73061, 73.935242),
map: this.map,
title: "Marker 1"
},
{
position: new google.maps.LatLng(32.06485, 34.763226),
map: this.map,
title: "Marker 2"
}
];
//Coordinates to set the center of the map
coordinates = new google.maps.LatLng(this.lat, this.lng);
mapOptions: google.maps.MapOptions = {
center: this.coordinates,
zoom: 8,
streetViewControl:false
};
//Default Marker
marker = new google.maps.Marker({
position: this.coordinates,
map: this.map,
title: '<div class="info-window">'+
'<h3>Info Window Content</h3>'+
'</div>'
});
ngAfterViewInit(): void {
this.mapInitializer();
}
mapInitializer(): void {
this.map = new google.maps.Map(this.gmap.nativeElement, this.mapOptions);
//Adding Click event to default marker
this.marker.addListener("click", () => {
const infoWindow = new google.maps.InfoWindow({
content: this.marker.getTitle()
});
infoWindow.open(this.marker.getMap(), this.marker);
});
//Adding default marker to map
this.marker.setMap(this.map);
//Adding other markers
this.loadAllMarkers();
}
loadAllMarkers(): void {
this.markers.forEach(markerInfo => {
//Creating a new marker object
const marker = new google.maps.Marker({
...markerInfo
});
//creating a new info window with markers info
const infoWindow = new google.maps.InfoWindow({
content: marker.getTitle()
});
//Add click event to open info window on marker
marker.addListener("click", () => {
infoWindow.open(marker.getMap(), marker);
});
//Adding marker to google map
marker.setMap(this.map);
});
}
你可以在地图选项中使用google.maps.MapTypeId枚举提供默认的mapType。
mapOptions: google.maps.MapOptions = {
center: this.coordinates,
zoom: 8,
streetViewControl:false,
mapTypeId:google.maps.MapTypeId.HYBRID
};
this.map.setMapTypeId(GoogleMapsMapTypeId['HYBRID']);