js谷歌地图

最新推荐文章于 2023-12-19 11:42:20 发布

Y_Pingg

最新推荐文章于 2023-12-19 11:42:20 发布

阅读量336

点赞数

本文链接：https://blog.csdn.net/Y_Pingg/article/details/103716745

版权

<html>
	<head>
		<script src="https://maps.googleapis.com/maps/api/js?key=">
		</script>

		<script>
			var myCenter = new google.maps.LatLng(39.839472,116.288262);
//模拟数据
var data = '[{"siteTreeNo":"1","siteName":"站点1","lat":39.839472,"lon":116.288262,"alarmCount":15,"alarmLevel":0},{"siteTreeNo":"2","siteName":"站点2","lat":39.844835,"lon":116.289155,"alarmCount":5,"alarmLevel":1},{"siteTreeNo":"3","siteName":"站点3","lat":39.9219731094,"lon":116.655365911,"alarmCount":23,"alarmLevel":2}]';

data = JSON.parse(data);
var markersArray = [];
var map;
function initialize(){
var mapProp = {
  center:myCenter,
  zoom:9,//缩放级数
  mapTypeId:google.maps.MapTypeId.ROADMAP
  };

	map = new google.maps.Map(document.getElementById("googleMap"),mapProp);
	// alert(mapProp)
	var latlngbounds = new google.maps.LatLngBounds();
	for(var p in data){
		console.info(data[p]);
		var position = new google.maps.LatLng(data[p].lat,data[p].lon);
		latlngbounds.extend(position);
		//告警图标
		var icon = data[p].alarmLevel == 0 ? 'images/marker0.png' : 'images/marker1.png';
		var marker = new google.maps.Marker({
			position : position,
			map : map,
			icon:icon
		});
		markersArray.push(marker);
		//marker.setMap(map);
		//将站点数据绑定，方便获取
		for(var s in data[p]){
			marker[s]= data[p][s];
		}
		addmessage(marker,p);//闭包
	}
	//绑定maps中心点，居中显示
	map.setCenter(latlngbounds.getCenter());
	map.fitBounds(latlngbounds); 
	//给地图绑定点击事件
	google.maps.event.addListener(map, 'click', function(event) {
		placeMarker(event.latLng);
	});
	
}
//消息框
var infowindow = new google.maps.InfoWindow();
function addmessage(marker, num) {
	google.maps.event.addListener(marker, 'click', function() {
		console.info(marker);
		var cotent = ['站点编号:'+marker.siteTreeNo,'站点名称:'+marker.siteName,'经度:'+marker.lon,'纬度:'+marker.lat,'告警总数:'+marker.alarmCount];
		infowindow.setContent(cotent.join('<br/>'));
		infowindow.open(marker.get('map'), marker);
	});
}

// 把叠加物从地图上清除
function clearOverlays() {  
  for (var i = 0; i < markersArray.length; i++ ) {  
    markersArray[i].setMap(null);  
  }  
  markersArray.length = 0;  
} 
function placeMarker(location) {
  clearOverlays();
  var marker = new google.maps.Marker({
    position: location,
    map: map,
  });
  markersArray.push(marker);
  var infowindow = new google.maps.InfoWindow({
    content: 'Latitude: ' + location.lat() + '<br>Longitude: ' + location.lng()
  });
  infowindow.open(map,marker);
}

google.maps.event.addDomListener(window, 'load', initialize);
// 
</script>
	</head>

	<body>
		<div id="googleMap" style="width:500px;height:380px;"></div>

		<input type="button" value="清除页面所有点" onclick="clearOverlays()" />

	</body>
</html>

Y_Pingg

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js谷歌地图

<html> <head> <script src="https://maps.googleapis.com/maps/api/js?key="> </script> <script> var myCenter = new google.maps.LatLng(39.839472,116.288262);//模拟数...
复制链接

扫一扫