Javascript 如何使用谷歌地图在设置间隔后保持缩放和刷新
您好，这里我正在使用angular web开发跟踪应用程序。每30秒，我就能够从服务器渲染数据。这里的问题是，每当我更新坐标时，它会刷新自动缩放。我的意思是，如果我在setinterval init之后通过放大查看zoom:16的地图，它会显示zoomlevel@10那我怎么能刷新后保持缩放和居中，并且是否有任何方法可以使用设置的间隔更新标记而不删除下面是我的代码Javascript 如何使用谷歌地图在设置间隔后保持缩放和刷新,javascript,angular,google-maps,google-maps-api-3,Javascript,Angular,Google Maps,Google Maps Api 3,您好，这里我正在使用angular web开发跟踪应用程序。每30秒，我就能够从服务器渲染数据。这里的问题是，每当我更新坐标时，它会刷新自动缩放。我的意思是，如果我在setinterval init之后通过放大查看zoom:16的地图，它会显示zoomlevel@10那我怎么能刷新后保持缩放和居中，并且是否有任何方法可以使用设置的间隔更新标记而不删除下面是我的代码 { "page": 2, "data": [ { "id": 4,
{
"page": 2,
"data": [
{
"id": 4,
"first_name": "Eve",
"last_name": "Holt",
"lat":"25.6599899",
"lng":"45.3664646",
"status":"0"
},
{
"id": 5,
"first_name": "Charles",
"last_name": "Morris",
"lat":"25.99899",
"lng":"45.4646",
"status":"1"
},
{
"id": 6,
"first_name": "Tracey",
"last_name": "Ramos",
"lat":"25.2339899",
"lng":"45.56664646",
"status":"1"
}
]
}
import {Component, OnDestroy, OnInit, ViewChild, ViewContainerRef} from '@angular/core';
import {DataService} from '../service/data.service';
import {Router} from '@angular/router';
import { NgxSpinnerService } from 'ngx-spinner';
import {Alert} from 'selenium-webdriver';
declare var google: any;
@Component({
selector: 'app-tracking',
templateUrl: './tracking.component.html',
styleUrls: ['./tracking.component.css']
})
export class TrackingComponent implements OnInit, OnDestroy {
public LocData: any;
public DriversData: any;
public location: any;
public drivers: any;
public mapObject: any;
public markers: any = [];
mapData: any;
markerName: any;
timer: any;
response: any;
public zoomlevel:any=13;
public latlng:any={lat:25.204849,lng:55.270783};
public locLatlng:any;
public loczoomlevel:any;
public getloclng:any;
public getzoomlevel:any;
public mapOptions:any;
public mapCenter:any;
constructor(public serv: DataService, private router: Router, public spinner: NgxSpinnerService) {
// this is for loading the locations data
this.spinner.show();
this.serv.LoadLocation().subscribe(res => {
this.spinner.hide();
this.LocData = res.Data;
// console.log(this.LocData);
this.location = this.LocData[0].Id;
this.onLoChange(this.location);
}, err => {
this.spinner.hide();
});
//
this.timer = setInterval(() => {this.getMapData(this.drivers, this.location); }, 30000);
this.getMapData(this.drivers, this.location);
}
onLoChange(data) {
// console.log('Location', data);
this.driverLoadData(data);
//this.location = event.target.value;
this.getMapData(this.drivers, this.location);
}
onDriverChange(event) {
//console.log('Driver Id', event.target.value);
this.drivers = event.target.value;
this.getMapData(this.drivers, this.location);
}
driverLoadData(data) {
this.spinner.show();
this.serv.LoadDrivers(data).subscribe(res => {
this.spinner.hide();
//console.log(res);
this.DriversData = res.Data;
this.drivers = this.DriversData[0].Id;
}, err => {
this.spinner.hide();
alert('Unable to load Driver Data');
});
}
getMapData(data, dataOne) {
// this.spinner.show();
this.serv.getMapData(data, dataOne).subscribe(res => {
//this.spinner.hide();
this.deleteMarkers();
debugger;
if (res.Data && res.Data.length > 0) {
// do something
this.mapData = res.Data;
// console.log(JSON.stringify(this.mapData));
// rendering markers
if (this.mapData != null && this.mapData.length > 0) {
for (let i = 0; i < this.mapData.length; i++) {
this.latlng = {lat: parseFloat(this.mapData[i].latitude), lng: parseFloat(this.mapData[i].longitude)};
this.addMarker(this.latlng, this.mapObject, this.mapData[i].Name);
this.markerName = this.mapData[i].Name;
}
}
} else {
// this.response = 'No Data Exist';
alert('No Data Exist');
}
}, err => {
//this.spinner.hide();
alert('Unalbe to display data');
});
}
addMarker(latlng, mapobj, markerLabel) {
var marker = new google.maps.Marker({
position: latlng,
label: '',
map: mapobj,
//animation: google.maps.Animation.DROP,
});
const infowindow = new google.maps.InfoWindow({
content: markerLabel
});
google.maps.event.addListener(marker, 'click', function() {
// infowindow.open(Map,marker);
});
infowindow.open(Map, marker);
const styless = [
{
"featureType": "poi.attraction",
"stylers": [
{
"visibility": "off"
}
]
},
{
"featureType": "poi.medical",
"stylers": [
{
"visibility": "off"
}
]
},
{
"featureType": "poi.park",
"elementType": "labels.text",
"stylers": [
{
"visibility": "off"
}
]
},
{
"featureType": "poi.place_of_worship",
"stylers": [
{
"visibility": "off"
}
]
},
{
"featureType": "poi.school",
"stylers": [
{
"visibility": "off"
}
]
},
{
"featureType": "poi.sports_complex",
"stylers": [
{
"visibility": "off"
}
]
}
]
mapobj.setOptions({styles: styless});
// This is for set postion for the marker after getting dynamic data it posittions to the point
mapobj.setZoom(14);
mapobj.panTo(marker.position);
this.markers.push(marker);
}
// Sets the map on all markers in the array.
setMapOnAll(map) {
for (let i = 0; i < this.markers.length; i++) {
this.markers[i].setMap(map);
this.markers[i].setPosition(this.markers[i].position);
}
}
// Removes the markers from the map, but keeps them in the array.
clearMarkers() {
this.setMapOnAll(null);
}
// Deletes all markers in the array by removing references to them.
deleteMarkers() {
this.clearMarkers();
this.markers = [];
}
ngOnInit() {
this.mapOptions ={
zoom:this.zoomlevel,
center: this.latlng,
gestureHandling: 'greedy'
}
this.mapObject = new google.maps.Map(document.getElementById('googleMap'),this.mapOptions );
var trafficLayer = new google.maps.TrafficLayer();
trafficLayer.setMap(this.mapObject);
this.addMarker(this.latlng, this.mapObject, 'Current Location');
}
ngOnDestroy() {
clearInterval(this.timer);
}
}
{
“第2页”，
“数据”：[
{
“id”：4，
“名字”：“夏娃”，
“姓氏”：“霍尔特”，
“lat”：“25.6599899”，
“液化天然气”：“45.36646”，
“状态”：“0”
},
{
“id”：5，
“名字”：“查尔斯”，
“姓”：“莫里斯”，
“lat”：“25.99899”，
“液化天然气”：“45.4646”，
“状态”：“1”
},
{
“id”：6，
“名字”：“特雷西”，
“姓氏”：“拉莫斯”，
“lat”：“25.2339899”，
“液化天然气”：“45.56664646”，
“状态”：“1”
}
]
}
从“@angular/core”导入{Component，OnDestroy，OnInit，ViewChild，ViewContainerRef}；
从“../service/data.service”导入{DataService}；
从'@angular/Router'导入{Router}；
从“ngx微调器”导入{NgxSpinnerService}；
从“selenium webdriver”导入{Alert}；
声明：任何；
@组成部分({
选择器：“应用程序跟踪”，
templateUrl:'./tracking.component.html'，
样式URL:['./tracking.component.css']
})
导出类TrackingComponent实现OnInit、OnDestroy{
公共数据：任何；
公共驾驶员数据：任何；
公共场所：任何；
公共司机：任何；
公共地图对象：任何；
公共标记：任意=[]；
地图数据：任何；
马克南：任何；
定时器：任意；
答复：任何；
公共zoomlevel:any=13；
公共latlng:any={lat:25.204849，lng:55.270783}；
公共场所：任何；
公共场所等级：任何；
公共场所：任何；
公共getzoomlevel:任何；
公共地图选项：任何；
公共地图中心：任何；
构造函数（公共服务：数据服务，专用路由器：路由器，公共微调器：NgxSpinnerService）{
//这用于加载位置数据
this.spinner.show（）；
this.serv.LoadLocation（）.subscribe（res=>{
this.spinner.hide（）；
this.LocData=res.数据；
//console.log（this.LocData）；
this.location=this.LocData[0].Id；
this.onLoChange（this.location）；
}，err=>{
this.spinner.hide（）；
});
//
this.timer=setInterval（（）=>{this.getMapData（this.drivers，this.location）；}，30000）；
this.getMapData（this.drivers，this.location）；
}
onLoChange（数据）{
//console.log（'位置'，数据）；
此.driverLoadData（数据）；
//this.location=event.target.value；
this.getMapData（this.drivers，this.location）；
}
变化（事件）{
//日志（'Driver Id'，event.target.value）；
this.drivers=event.target.value；
this.getMapData（this.drivers，this.location）；
}
driverLoadData（数据）{
this.spinner.show（）；
this.serv.LoadDrivers（data.subscribe）（res=>{
this.spinner.hide（）；
//控制台日志（res）；
this.DriversData=res.Data；
this.drivers=this.DriversData[0].Id；
}，err=>{
this.spinner.hide（）；
警报（“无法加载驱动程序数据”）；
});
}
getMapData（数据，数据一）{
//this.spinner.show（）；
this.serv.getMapData（data，dataOne）.subscribe（res=>{
//this.spinner.hide（）；
这个.deleteMarkes（）；
调试器；
如果（res.Data&&res.Data.length>0）{
//做点什么
this.mapData=分辨率数据；
//log（JSON.stringify（this.mapData））；
//渲染标记
if（this.mapData！=null&&this.mapData.length>0）{
for（设i=0；i{
//this.spinner.hide（）；
警报（“无法显示数据”）；
});
}
添加标记（latlng、mapobj、markerLabel）{
var marker=new google.maps.marker({
位置：latlng，
标签：“”，
地图：mapobj，
//动画：google.maps.animation.DROP，
});
const infowindow=new google.maps.infowindow({
内容：markerLabel
});
google.maps.event.addListener（标记'click'，函数（）{
//信息窗口。打开（地图、标记）；
});
信息窗口。打开（地图、标记）；
常量styless=[
{
“特色类型”：“景点吸引力”，
“造型师”：[
{
“可见性”：“关闭”
}
]
},
{
“特征类型”：“poi.medical”，
“造型师”：[
{
“可见性”：“关闭”
}
]
},
{
“功能类型”：“poi.park”，
“elementType”：“labels.text”，
“造型师”：[
{
“可见性”：“关闭”
}
]
},
{
“特征类型”：“崇拜地点”，
“造型师”：[
{
“可见性”：“关闭”
}
]
},
{
“特色类型”：“重点学校”，
“造型师”：[
{
“可见性”：“关闭”
}
]
},
{
“功能类型”：“poi.sports_complex”，
“造型师”：[
{
“可见性”：“关闭”
}
]
}
]
setOptions（{styles:styless}）；
//这用于在获取标记定位到该点的动态数据后设置标记的位置
mapobj.setZoom（14）；
mapobj.panTo（标记位置）；
这个。标记。推（标记）；
}
//将地图设置为
addMarker(latlng, mapobj, markerLabel,zoomLevel){
var marker = new google.maps.Marker({
position: latlng,
label: '',
map: mapobj,
zoom:zoomLevel,
//animation: google.maps.Animation.DROP,
});
}
if (this.mapData != null && this.mapData.length > 0) {
this.zoomlevel=this.mapObject.getZoom();
for (let i = 0; i < this.mapData.length; i++) {
this.latlng = {
lat: parseFloat(this.mapData[i].latitude),
lng: parseFloat(this.mapData[i].longitude)
};
this.addMarker(this.latlng, this.mapObject, this.mapData[i].Name,this.zoomlevel);
this.markerName = this.mapData[i].Name;
}
}
this.addMarker(this.latlng, this.mapObject, 'Current Location',this.zoomlevel);