Форум программистов, компьютерный форум, киберфорум
Наши страницы
C#: ASP.NET MVC
Войти
Регистрация
Восстановить пароль
 
Sierra
0 / 0 / 0
Регистрация: 23.08.2017
Сообщений: 41
1

Не прогружается полностью карта Google

03.01.2019, 19:56. Просмотров 292. Ответов 1
Метки mvc (Все метки)

Здравствуйте!
Проблема такая. Не прогружается полностью карта Google карта. У меня есть идеи по поводу того, что не хватает ключа API в скрипте представления.
Прошу помощи! Заранее благодарен за любые подсказки!
Код представления
C#
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
@* Страница с картой *@
@{
    //Layout = null;
    Layout = "~/Views/Shared/_Layout.cshtml";
}
<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width" />
    @*<title>Карта навигации</title>*@
    @*<script src="http://maps.google.com/maps/api/js?sensor=true" type="text/javascript"></script>*@
    <style>
        .stationInfo {
            height: 150px;
            width: 250px;
        }
    </style>
</head>
<body>
    <div id="canvas" style="height: 600px; width:600px;">&nbsp;</div>
    <!--Устанавливаем секцию scripts, которая затем будет рендериться на мастер-странице -->
    @section scripts {
        <script type="text/javascript">
    $(document).ready(function () {
        GetMap();
    });
    //функция загрузки
    function GetMap() {
        google.maps.visualRefresh = true;
        //установка основных координат
        var Moscow = new google.maps.LatLng(55.752622, 37.617567);
        //установка общих параметров отображения карты, как масштаб, центральная точка и тип карты
        var mapOptions = {
            zoom: 15,
            center: Moscow,
            mapTypeId: google.maps.MapTypeId.G_NORMAL_MAP
        };
        //встраиваем гугл-карты в элемент на странице и получаем объект карты
        var map = new google.maps.Map(document.getElementById("canvas"), mapOptions);
        //настраиваем красный маркер, который будет использоваться для центральной точки
        var myLatlng = new google.maps.LatLng(55.752622, 37.617567);
        var marker = new google.maps.Marker({
            position: myLatlng,
            map: map,
            title: 'Станции метро'
        });
        //берем для маркера иконку с сайта google
        marker.setIcon('http://maps.google.com/mapfiles/ms/icons/red-dot.png')
        //получаем данные
        $.getJSON('@Url.Action("getData", "Home")', function (data) {
            //проходим по всем данным и устанавливаем для них маркеры
            $.each(data, function (i, item) {
                var marker = new google.maps.Marker({
                    'position': new google.maps.LatLng(item.GeoLong, item.GeoLat),
                    'map': map,
                    'title': item.PlaceName
                });
                //берем для этих маркеров синие иконки с сайта google
                marker.setIcon('http://maps.google.com/mapfiles/ms/icons/blue-dot.png')
                //для каждого объекта добавляем доп. информацию, выводимую в отдельном окне
                var infowindow = new google.maps.InfoWindow({
                    content: "<div class='stationInfo'><h2>Станция " + item.PlaceName + "</h2><div><h4>Линия метро: "
                        + item.Line + "</h4></div><div><h4>Пассажиропоток: " + item.Traffic + " млн. человек</h4></div></div>"
                });
                //обработчик нажатия на маркер объекта
                google.maps.event.addListener(marker, 'click', function () {
                    infowindow.open(map, marker);
                });
            })
        });
    }
        </script>
    }
</body>
</html>
Код модели
C#
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
 
namespace myMobileApp.Models {
    public class Cars {
        public int Id { get; set; }
        public string PlaceName { get; set; }   //название места
        public double Traffic { get; set; } //трафик
        public string Line { get; set; }    //станция метро
        //эти свойства нужны нам, чтобы API Google связывал станцию с определенным местом на карте по долготе и широте
        public double Geolong { get; set; } //долгота - для карт Google
        public double GeoLat { get; set; }  //широта - для карт Google
    }
}
Код контроллера
C#
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using System.Windows.Forms;
using myMobileApp.Models;
 
namespace myMobileApp.Controllers {
    public class HomeController : Controller {
        public ActionResult Index() {
            return View("StartLoginPage");
        }
        public ActionResult About() {
            ViewBag.Message = "Your application description page.";
 
            return View("About");
        }
        public ActionResult Contact() {
            ViewBag.Message = "Your contact page.";
 
            return View();
        }
        [HttpPost]
        //метод перехода на следующую форму после проверки данных
        public ActionResult checkLogAndPass(string login = "admin", int password = 12345) {
            //проверяем правильность зполнения полей
            if ((login != "admin") || (password != 12345)) {
                MessageBox.Show("Логин или пароль не верен");
                return View("StartLoginPage");
            }
            //переходим на следующую страницу
            return View("MainPage");
        }
        //метод по работе с картой, в котором определяем весь необходимый список объектов 
        public JsonResult getData() {
            //создаем список данных в коллекции класса Cars
            List<Cars> cars = new List<Cars>();
            //добавляем данные в коллекцию
            cars.Add(new Cars() {
                Id = 1, PlaceName = "Библиотека имени Ленина", GeoLat = 37.610489,
                Geolong = 55.752308, Line = "Сокольническая", Traffic = 1.0
            });
            cars.Add(new Cars() {
                Id = 2, PlaceName = "Александровский сад", GeoLat = 37.608644,
                Geolong = 55.75226, Line = "Арбатско-Покровская", Traffic = 1.2
            });
            cars.Add(new Cars() {
                Id = 3, PlaceName = "Боровицкая", GeoLat = 37.609073,
                Geolong = 55.750509, Line = "Серпуховско-Тимирязевская", Traffic = 1.0
            });
            //возвращаем объекты коллекции cars в формате JSON
            return Json(cars, JsonRequestBehavior.AllowGet);
        }
    }
}
И код главного представления. Я из своего представления ссылаюсь на него.
C#
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    @*<title>@ViewBag.Title – приложение ASP.NET</title>*@
    @Styles.Render("~/Content/css")
    @Scripts.Render("~/bundles/modernizr")
    <script src="http://maps.google.com/maps/api/js?sensor=true" type="text/javascript"></script>
    @*<style>
        .stationInfo {
            height: 150px;
            width: 250px;
        }
    </style>*@
</head>
<body>
    @section scripts {
        <script type="text/javascript">
    $(document).ready(function () {
        GetMap();
    });
    //функция загрузки
    function GetMap() {
        google.maps.visualRefresh = true;
        //установка основных координат
        var Moscow = new google.maps.LatLng(55.752622, 37.617567);
        //установка общих параметров отображения карты, как масштаб, центральная точка и тип карты
        var mapOptions = {
            zoom: 15,
            center: Moscow,
            mapTypeId: google.maps.MapTypeId.G_NORMAL_MAP
        };
        //встраиваем гугл-карты в элемент на странице и получаем объект карты
        var map = new google.maps.Map(document.getElementById("canvas"), mapOptions);
        //настраиваем красный маркер, который будет использоваться для центральной точки
        var myLatlng = new google.maps.LatLng(55.752622, 37.617567);
        var marker = new google.maps.Marker({
            position: myLatlng,
            map: map,
            title: 'Станции метро'
        });
        //берем для маркера иконку с сайта google
        marker.setIcon('http://maps.google.com/mapfiles/ms/icons/red-dot.png')
        //получаем данные
        $.getJSON('@Url.Action("getData", "Home")', function (data) {
            //проходим по всем данным и устанавливаем для них маркеры
            $.each(data, function (i, item) {
                var marker = new google.maps.Marker({
                    'position': new google.maps.LatLng(item.GeoLong, item.GeoLat),
                    'map': map,
                    'title': item.PlaceName
                });
                //берем для этих маркеров синие иконки с сайта google
                marker.setIcon('http://maps.google.com/mapfiles/ms/icons/blue-dot.png')
                //для каждого объекта добавляем доп. информацию, выводимую в отдельном окне
                var infowindow = new google.maps.InfoWindow({
                    content: "<div class='stationInfo'><h2>Станция " + item.PlaceName + "</h2><div><h4>Линия метро: "
                        + item.Line + "</h4></div><div><h4>Пассажиропоток: " + item.Traffic + " млн. человек</h4></div></div>"
                });
                //обработчик нажатия на маркер объекта
                google.maps.event.addListener(marker, 'click', function () {
                    infowindow.open(map, marker);
                });
            })
        });
    }
        </script>
    }
    @RenderBody()
    @Scripts.Render("~/bundles/jquery")
    @Scripts.Render("~/bundles/bootstrap")
    @RenderSection("scripts", required: false)
</body>
</html>
Результат скрина привожу ниже.
0
Миниатюры
Не прогружается полностью карта Google  
Similar
Эксперт
41792 / 34177 / 6122
Регистрация: 12.04.2006
Сообщений: 57,940
03.01.2019, 19:56
Ответы с готовыми решениями:

Почему страница прогружается два раза?
Здравствуйте. Может кто сможет помочь? Сделал сайт foliant.comch.ru ...

Не полностью прогружается сайт на ресурсе
Добрый день. Столкнулся с проблемой на работе, на локальном диске делал сайт-портал, все сделал все...

Карта Карно, полностью из нулей
Здравствуйте. Есть карта карно, состоящая полностью из нулей. Очевидно, что МДНФ этой функции равна...

видео карта драйвер не полностью садится
что делать ? т.к в программе CPU-Z информация по видео карте должно быть полностью описано, а тут...

Карта Google
Начальство поставило задачу, чтоб на карте гугл отображались наши объекты выборочно. Например...

1
lvlkoo
.NET C#,ASP.NET MVC
Эксперт .NET
533 / 459 / 208
Регистрация: 16.10.2010
Сообщений: 1,838
Завершенные тесты: 2
03.01.2019, 20:35 2
Цитата Сообщение от Sierra Посмотреть сообщение
У меня есть идеи по поводу того, что не хватает ключа API в скрипте представления.
Вы же сами ответили на свой вопрос)
0
MoreAnswers
Эксперт
37091 / 29110 / 5898
Регистрация: 17.06.2006
Сообщений: 43,301
03.01.2019, 20:35

Карта google
Здравствуйте, уважаемые форумчане! На одном из сайтов пытаюсь разместить схему проезда как на...

Google карта не показывает
идея такая пользователь может указать свое место положение нажав на кнопку google спрятана в...

Карта как у Google и Яндекс
Добрый день, существует ли готовое решение, нужна мировая карта с возможностью получения координат...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
2
Ответ Создать тему
Опции темы

КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin® Version 3.8.9
Copyright ©2000 - 2019, vBulletin Solutions, Inc.
Рейтинг@Mail.ru