[英]How do I create a grid in google maps api v3
我是新手。 我想要做的是,创建 2 个标记(它们是可拖动的),它们之间会有网格,比如http://prntscr.com/4nx9f3 。 当我更改标记之一时,应该更改网格。 我正在尝试用折线绘制。 顺便说一句,我无法使用marker1.getPosition().lat()
获得纬度或marker1.getPosition().lat()
。 谢谢你的帮助...
我所有的代码:
<!DOCTYPE html>
<html>
<head>
<title>Simple Map</title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<style>
html, body, #map-canvas {
height: 100%;
margin: 0px;
padding: 0px
}
</style>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>
<script>
var map;
var marker1;
var marker2;
function initialize() {
var mapOptions = {
zoom: 10,
center: new google.maps.LatLng(50.3, 44.3)
};
map = new google.maps.Map(document.getElementById('map-canvas'),
mapOptions);
marker1 = new google.maps.Marker({
position: new google.maps.LatLng(50.1, 44.1),
map: map,
draggable: true,
title: 'marker1 '
});
marker2 = new google.maps.Marker({
position: new google.maps.LatLng(50.5, 44.5),
map: map,
draggable: true,
title: 'marker2'
});
var flightPlanCoordinates = [
marker1.getPosition(),
marker2.getPosition(),
];
// code below is not working
/*
google.maps.event.addListener(marker1, 'dragend', function () {
polyline.LatLngBounds(new google.maps.LatLng(marker1.getPosition(), marker2.getPosition()));
});
google.maps.event.addListener(marker2, 'dragend', function () {
polyline.LatLngBounds(new google.maps.LatLng(marker1.getPosition(), marker2.getPosition()));
*/
var polyline = new google.maps.Polyline(
{ path: flightPlanCoordinates,
geodesic: true,
strokeColor: '#FF0000',
strokeOpacity: 1.0,
strokeWeight: 2
});
var lat1 = marker1.getPosition().lat();
var lng1 = marker1.getPosition().lng();
var lat2 = marker2.getPosition().lat();
var lng2 = marker2.getPosition().lng();
// I tried to get distance between 2 markers but it did not work either
/* function distance(
lat1,
lng1,
lat2,
lng2
) {
var R = 6371;
var a =
0.5 - Math.cos((lat2 - lat1) * Math.PI / 180) / 2 +
Math.cos(lat1 * Math.PI / 180) * Math.cos(lat2 * Math.PI / 180) *
(1 - Math.cos((lon2 - lon1) * Math.PI / 180)) / 2;
return R * 2 * Math.asin(Math.sqrt(a));
}
*/
polyline.setMap(map);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map-canvas"></div>
</body>
</html>
我认为这就是你想要做的。 将您的 rectangleLng 数组更改为二维数组,并将 excLat/excLng 变量更改为不四舍五入(它们向后以及 extLat 想要向上/向下,excLng 应该并排)。
代码片段:
var map; var marker1; var marker2; var rectangle; var infowindow = new google.maps.InfoWindow(); function initialize() { var mapOptions = { zoom: 11, center: new google.maps.LatLng(38.4, 26.7) }; map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions); marker1 = new google.maps.Marker({ position: new google.maps.LatLng(38.3, 26.6), map: map, draggable: true, title: 'marker1' }); google.maps.event.addListener(marker1, 'click', function(evt) { infowindow.setContent(marker1.getPosition().toUrlValue(6)); infowindow.open(map, this); }); marker2 = new google.maps.Marker({ position: new google.maps.LatLng(38.5, 26.8), map: map, draggable: true, title: 'marker2' }); google.maps.event.addListener(marker2, 'click', function(evt) { infowindow.setContent(marker1.getPosition().toUrlValue(6)); infowindow.open(map, this); }); rectangle = new google.maps.Rectangle({ strokeColor: '#FF0000', strokeOpacity: 0.8, strokeWeight: 2, fillColor: '#FF0000', fillOpacity: 0.35, map: map, bounds: new google.maps.LatLngBounds( marker1.getPosition(), marker2.getPosition()) }); var leftSideDist = Math.round((marker2.getPosition().lng() - marker1.getPosition().lng()) * 10000) / 100; var belowSideDist = Math.round((marker2.getPosition().lat() - marker1.getPosition().lat()) * 10000) / 100; google.maps.event.addListener(marker1, 'dragend', function() { rectangle.setBounds(new google.maps.LatLngBounds(marker1.getPosition(), marker2.getPosition())); leftSideDist = Math.round((marker2.getPosition().lng() - marker1.getPosition().lng()) * 10000) / 100; makeGrid(); }); google.maps.event.addListener(marker2, 'dragend', function() { rectangle.setBounds(new google.maps.LatLngBounds(marker1.getPosition(), marker2.getPosition())); belowSideDist = Math.round((marker2.getPosition().lat() - marker1.getPosition().lat()) * 10000) / 100; makeGrid(); }); makeGrid(); } var rectangleLat = []; var rectangleLng = []; function makeGrid() { for (x in rectangleLng) { for (y in rectangleLng[x]) { if (rectangleLng[x][y].setMap) { rectangleLng[x][y].setMap(null) rectangleLng[x][y] = null; } } } var leftSideDist = marker2.getPosition().lng() - marker1.getPosition().lng(); var belowSideDist = marker2.getPosition().lat() - marker1.getPosition().lat(); var dividerLat = 5; var dividerLng = 5; //ilerde kullanıcıdan alınacak var excLat = belowSideDist / dividerLat; var excLng = leftSideDist / dividerLng; var m1Lat = marker1.getPosition().lat(); var m1Lng = marker1.getPosition().lng(); var m2Lat = marker2.getPosition().lat(); var m2Lng = marker2.getPosition().lng(); document.getElementById('info').innerHTML += "dividerLat=" + dividerLat + ", excLat=" + excLat + "<br>"; document.getElementById('info').innerHTML += "dividerLng=" + dividerLat + ", excLng=" + excLng + "<br>"; document.getElementById('info').innerHTML += "m1=" + marker1.getPosition().toUrlValue(6) + "<br>"; document.getElementById('info').innerHTML += "m2=" + marker2.getPosition().toUrlValue(6) + "<br>"; for (var i = 0; i < dividerLat; i++) { if (!rectangleLng[i]) rectangleLng[i] = []; for (var j = 0; j < dividerLng; j++) { if (!rectangleLng[i][j]) rectangleLng[i][j] = {}; rectangleLng[i][j] = new google.maps.Rectangle({ strokeColor: '#FFFFFF', strokeOpacity: 0.8, strokeWeight: 2, fillColor: '#FF0000', fillOpacity: 0.1, map: map, bounds: new google.maps.LatLngBounds( new google.maps.LatLng(m1Lat + (excLat * i), m1Lng + (excLng * j)), new google.maps.LatLng(m1Lat + (excLat * (i + 1)), m1Lng + (excLng * (j + 1)))) }); document.getElementById('info').innerHTML += "[i=" + i + ",j=" + j + "]:" + rectangleLng[i][j].getBounds() + "<br>"; } //for j Lng } //for i Lat document.getElementById('left').value = leftSideDist; document.getElementById('blw').value = belowSideDist; } google.maps.event.addDomListener(window, 'load', initialize);
html, body, #map-canvas { height: 100%; margin: 0px; padding: 0px } #panel { position: absolute; top: 5px; left: 50%; margin-left: -180px; z-index: 5; background-color: #fff; padding: 5px; /* border: 1px solid #999;*/ }
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script> <div id="map-canvas"></div> <div id="panel" style="margin-left:-320px">leftSideDist: <input type="text" readonly id="left">belowSideDist: <input type="text" readonly id="blw"> </div> <div id="info"></div>
要在拖动后获取标记的坐标,请更改:
google.maps.event.addListener(marker1, 'dragend', function() {
polyline.LatLngBounds(new google.maps.LatLng(marker1.getPosition(), marker2.getPosition()));
});
到:
google.maps.event.addListener(marker1, 'dragend', function(event) {
polyline.LatLngBounds(event.latLng);
});
但是,折线对象上没有LatLngBounds
函数。
As far as i done:
<!DOCTYPE html>
<html>
<head>
<title>Simple Map</title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<style>
html, body, #map-canvas {
height: 100%;
margin: 0px;
padding: 0px
}
#panel {
position: absolute;
top: 5px;
left: 50%;
margin-left: -180px;
z-index: 5;
background-color: #fff;
padding: 5px;
border: 1px solid #999;
}
</style>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&libraries=geometry"></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?
sensor=false&v=3&libraries=geometry"></script>
<script>
var map;
var marker1;
var marker2;
var rectangle;
function initialize() {
var mapOptions = {
zoom: 11,
center: new google.maps.LatLng(38.4, 26.7)
};
map = new google.maps.Map(document.getElementById('map-canvas'),
mapOptions);
marker1 = new google.maps.Marker({
position: new google.maps.LatLng(38.3, 26.6),
map: map,
draggable: true,
title: 'marker1'
});
marker2 = new google.maps.Marker({
position: new google.maps.LatLng(38.5, 26.8),
map: map,
draggable: true,
title: 'marker2'
});
rectangle = new google.maps.Rectangle({
strokeColor: '#FF0000',
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: '#FF0000',
fillOpacity: 0.35,
map: map,
bounds: new google.maps.LatLngBounds(
marker1.getPosition(),
marker2.getPosition())
});
var leftSideDist = Math.round((marker2.getPosition().lng() - marker1.getPosition().lng()) * 10000) / 100;
var belowSideDist = Math.round((marker2.getPosition().lat() - marker1.getPosition().lat()) * 10000) / 100;
google.maps.event.addListener(marker1, 'dragend', function () {
rectangle.setBounds(new google.maps.LatLngBounds(marker1.getPosition(), marker2.getPosition()));
leftSideDist = Math.round((marker2.getPosition().lng() - marker1.getPosition().lng()) * 10000) / 100;
});
google.maps.event.addListener(marker2, 'dragend', function () {
rectangle.setBounds(new google.maps.LatLngBounds(marker1.getPosition(), marker2.getPosition()));
belowSideDist = Math.round((marker2.getPosition().lat() - marker1.getPosition().lat()) * 10000) / 100;
});
var leftSideDist = Math.round((marker2.getPosition().lng() - marker1.getPosition().lng()) * 10000) / 100;
var belowSideDist = Math.round((marker2.getPosition().lat() - marker1.getPosition().lat()) * 10000) / 100;
var dividerLat = 5;
var dividerLng = 5; //ilerde kullanıcıdan alınacak
var excLat = leftSideDist / dividerLat;
var excLng = belowSideDist / dividerLng;
var rectangleLat[];
var rectangleLng[];
var m1Lat = marker1.getPosition().lat();
var m1Lng = marker1.getPosition().lng();
var m2Lat = marker2.getPosition().lat();
var m2Lng = marker2.getPosition().lng();
for (var i = 0; i < dividerLat; i++) {
for (var j = 0; j < dividerLng; j++) {
rectangleLng[i*5+j] = new google.maps.Rectangle({
strokeColor: '#FF0000',
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: '#FF0000',
fillOpacity: 0.35,
map: map,
bounds: new google.maps.LatLngBounds(
( m1Lat , (excLng*(j+1) ) ),
( m1Lat+excLat, m2Lng+(excLng*(j+1) ) ) )
});
}//for j Lng
}//for i Lat
document.getElementById('left').value = leftSideDist;
document.getElementById('blw').value = belowSideDist;
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map-canvas"></div>
<div id="panel" style="margin-left:-320px">
leftSideDist: <input type="text" readonly id="left">
belowSideDist: <input type="text" readonly id="blw">
</div>
</body>
</html>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.