Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 14.05.2020, 09:42
Аспирант
Отправить личное сообщение для misha.korolcov Посмотреть профиль Найти все сообщения от misha.korolcov
 
Регистрация: 05.09.2019
Сообщений: 84

гугл карты создание полигона
Привет всем пробую создать полигон свободной формы на гугл картах , что бы его можно было растягивать в любую сторону, но никак не могу

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
	<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
	<style>
    #map {
        height: 400px;
    }
</style>
<body>

<?php
$servername = "localhost";
$username = "root";
$password = "";
$link = mysqli_connect($servername,$username, $password, 'task');
// var_dump($link);
$result = mysqli_query($link,"SELECT  `lat`,`lng`,`field_pult_number`,`field_client`,`field_adress`,`field_summ_in_month`,`field_dogovor` FROM montazh_calendar WHERE  `delete` = 0 AND  `lat` > 0");
$points = [];
$pointsTwo = [];
while($row = mysqli_fetch_assoc($result)){
    $points[] = $row;
    $pointsTwo[] = $row;
}
// var_dump($points);
$points = json_encode($points);


// SELECT * FROM montazh_calendar WHERE  `delete` = 0 AND `status` = 1
// SELECT * FROM montazh_calendar WHERE  `delete` = 0 AND  `lat` > 0
// SELECT  `lat`,`lng` FROM montazh_calendar WHERE  `delete` = 0 AND  `lat` > 0
// SELECT  `lat`,`lng` FROM montazh_calendar WHERE  `delete` = 0 AND  `lat` != ''
// SELECT  `lat`,`lng`,`field_pult_number`,`field_client`,`field_adress`,`field_summ_in_month`,`field_dogovor` FROM montazh_calendar WHERE  `delete` = 0 AND  `lat` > 0
?>


<div id="map"></div>
<div class="container mt-4">
	<h2 class="text-center mb-3">Test</h2>
	<table class="table">
  <thead>
    <tr>
      <th scope="col"></th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>
  <tbody>
  	<?php 
  	for ($i=0; $i < count($pointsTwo); $i++) { ?>
  		<tr>
      <th scope="row">1</th>
      <td><?php echo $pointsTwo[$i]['field_pult_number'];?> </td>
      <td><?php echo $pointsTwo[$i]['field_client'];?></td>
      <td>@mdo</td>
    </tr>
  	<?php } ?>
  	 
    
    
  </tbody>
</table>
</div>
<script>
	var map;
	function initMap() {
  	 map = new google.maps.Map(document.getElementById('map'), {
                center: {
                    lat: 50.475713,
                    lng: 30.516879
                },
                zoom: 5
            });
  	initMarkers();
  	 function initMarkers() {
  	 	// var dots =[{lat: 50.475713, lng: 30.516879 }]
  	  var dots = '<?=$points?>';
//		var dots = [
//new google.maps.LatLng(50.405440,30.469319),
//new google.maps.LatLng(50.019486,29.841963),
//new google.maps.LatLng(51.545427,29.534346),
//new google.maps.LatLng(51.073035,29.490401),
//new google.maps.LatLng(55.430602,29.841963),
//new google.maps.LatLng(51.485365,31.336104),
//new google.maps.LatLng(51.403195,31.643721),
//new google.maps.LatLng(50.740502,31.555830),
//new google.maps.LatLng(50.040081,31.072432),
//new google.maps.LatLng(49.898754,30.369307),
//new google.maps.LatLng(50.040081,30.017744)
//];

var myLatlng = {lat: -25.363, lng: 131.044};

marker = new google.maps.Marker({
    position: myLatlng,
    map: map,
    title: 'Click to zoom'
  });


 marker.addListener('click', function() {
 	alert(1);
    map.setZoom(8);
    map.setCenter(marker.getPosition());

  });

var polyOptions = {
path: dots,
strokeColor: "#FF0000",
strokeOpacity: 1,
strokeWeight: 3
}
var it = new google.maps.Polyline(polyOptions);
it.setMap(map);


  	 dots = JSON.parse(dots);
  	 console.log(dots);
  	 for (var i = 0; i < dots.length; i++) {
                var coords = dots[i];
                var latLng = new google.maps.LatLng(coords.lat, coords.lng);
                var marker = new google.maps.Marker({
                    position: latLng,
                    map: map,
                    title: coords.field_pult_number 
                    + ' [' + (coords.field_client) + '] '
                    + ' [' + (coords.field_adress) + '] '
                    + ' [' + (coords.field_summ_in_month) + '] '
                    + ' [' + (coords.field_field_dogovor) + '] '
                    
                    

                   
                });
            }	
  	 } 
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDyAnMcgQ4TqGttyFKA5hxWYxIkzZpo3V8&callback=initMap" async defer></script>
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
</body>
</html>
Ответить с цитированием
  #2 (permalink)  
Старый 14.05.2020, 11:33
Аватар для Vlasenko Fedor
Профессор
Отправить личное сообщение для Vlasenko Fedor Посмотреть профиль Найти все сообщения от Vlasenko Fedor
 
Регистрация: 13.03.2013
Сообщений: 1,572

https://jsfiddle.net/3L140cg3/16/
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Гугл карты и стили поиска mazahaler Элементы интерфейса 1 26.01.2019 15:58
Создание карты по требованию spinastr Общие вопросы Javascript 16 25.01.2017 20:17
Как отобразить созданный маршрут в api google maps на Гугл карты Yaros111 Events/DOM/Window 1 20.03.2015 07:42
Создание карты nekofly Элементы интерфейса 1 16.04.2013 14:49
Создание интерактивной карты Veligur Элементы интерфейса 3 24.08.2010 23:28