javascript - 如何在 JS 中使用 google API 在 asp.net 中创建多边形？

Question

我有一个用书签保存地址的小程序，所有数据都保存在 SQL 服务器数据库中，我想做的是通过 Javascrip，创建一个多边形，我已经尝试了 google 文档，但我无法理解和它会产生一个错误，这是在 asp.net 的 windows 形式中完成的。 在此处输入图像描述

这将是制作我拥有的各种标记的脚本，现在我不知道如何添加带有颜色的多边形

    <script>
   //Variable global para trabajar con el MAPA
   let map;

   //Funcion para inicializar el mapa con un centro definido
   function initMap(lat, long) {
       map = new google.maps.Map(document.getElementById("ModalMapPreview"), {
           center: { lat: lat, lng: long },
           zoom: 15,
       });
   }



   //Funcion encargada de ejecutarse una vez termine la carga de la pagina
   $(document).ready(function () {

       (function ($) {

           //Función para convertir Tabla de datos en JSON
           var convertTableToJson = function () {
               //Se inicializa un arreglo para almacenar los regisros
               var rows = [];

               //Recorre cada una de las filas de la tabla gvUbicaciones o gridview
               $('table#gvUbicaciones tr').each(function (i, n) {
                   //Se asigna fila para incertarala en arreglo
                   var $row = $(n);
                   //condición para omitir primera fila - encabezado
                   if (i !== 0) {
                       //Se incerta registro en arreglo tipado
                       rows.push({
                           idubi: $row.find('td:eq(1)').text(),
                           Ubicacion: $row.find('td:eq(2)').text(),
                           Lat: $row.find('td:eq(3)').text(),
                           Long: $row.find('td:eq(4)').text()
                       });
                   }
               });
               return rows;
           };

           //Función para crear los marcadores
           $(function () {
               //Obtenemos arreglo de registros
               var markers = convertTableToJson();

               //Validamos que existan registros para crear marcadores, de lo contrario inicializamos mapa sin marcadores
               if (markers[0]) {

                   //Inicializamos mapa y centramos en el primer marcador del arreglo
                   //  initMap(parseFloat(markers[0].Lat), parseFloat(markers[0].Long));
                   //initMap(parseFloat(-17.783851), parseFloat(-63.182580));
                   initMap(parseFloat($("#txtLat").val()), parseFloat($("#txtLong").val()));


                   //Recorremos la lista de marcadores y los establecemos en el mapa
                   $.each(markers, function (key, val) {

                       //Se crea un objeto con las propiedades latitud y longitud para establecerlo en la configuración del marcador

                   
                       const myLatLng = { lat: parseFloat(val.Lat), lng: parseFloat(val.Long) };

                       //Se crea marcador con el API de google y se establece en el mapa
                       var marker = new google.maps.Marker({

                          
                           map,
                           position: myLatLng,
                           draggable: true,
                           title: val.Ubicacion
                       });

                       //Plantilla para ventana de información del marcador
                       const contentString =
                           '<div id="content">' +
                           '<h4 >' + val.Ubicacion + '</h4>' +
                           '<div id="bodyContent">' +
                           "<p><b>idubi: </b>" + val.idubi + "<br/>" +
                           "<b>Ubicacion: </b>" + val.Ubicacion + "<br/>" +
                           "<b>Latitud: </b>" + val.Lat + "<br/>" +
                           "<b>Longitud: </b>" + val.Long +
                           "</p>" +
                           "</div>" +
                           "</div>";

                       //Se crea ventana de información del marcador con el API de google
                       const infowindow = new google.maps.InfoWindow({
                           content: contentString,
                       });

                       //Se establece evento para que cada vez que se haga click en el marcador se muestre la ventana de información 
                       marker.addListener("click", () => {
                           infowindow.open(map, marker);
                       });


                       google.maps.event.addListener(marker, 'dragend', function (evt) {

                           $("#txtLat").val(evt.latLng.lat().toFixed(6));
                           $("#txtLong").val(evt.latLng.lng().toFixed(6));
                           map.panTo(evt.latLng);
                       });

                   });
               } else {
                   //Se inicializa mapa cuando no hay registros
                   initMap(parseFloat(-17.783851), parseFloat(-63.182580));
               }

           });
       })(jQuery);

   });

标签： javascriptasp.netapi