我需要向谷歌地图 api 添加许多标记，并使用 prompt(） 为它们添加注释

I need to add many markers to Google maps api and add notes to them using prompt()

本文关键字：添加 prompt 注释 谷歌地图 api 许多标      更新时间：2023-09-26

我已经做了以下工作;我在点击时做了标记，prompt()我需要它来连接并保存到浏览器。现在，当我单击地图时，它会调用prompt("add your notes")，我需要保存标记并在再次单击标记时显示此注释。

 <!DOCTYPE html>
 <html>
<head lang="en">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="style.css" type="text/css" />
<link rel="script" href="script.js" />`
<script src="jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?                                         sensor=false"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet"  href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script async defer
        src="https://maps.googleapis.com/maps/api/js? key=AIzaSyDXhwWzYNap1UD89oL43dc725FZY_-98jw&callback=initMap">
</script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?   libraries=places&sensor=false"></script>
<script src="https://apis.google.com/js/platform.js" async defer></script>
<script>
    var xhttp = new XMLHttpRequest();
    var map;
    function initMap() {
        map = new google.maps.Map(document.getElementById('map'), {
            center: {lat: 51.0593325, lng: 15.1854451},
            zoom: 5

        });
        google.maps.event.addListener(map, 'click', function(event) {
            addMarker(event.latLng, map);
            var poznamka = prompt("Zadaj svoju poznámku k miestu.");
            var card = new map.card();
            card.getBody().innerHTML = poznamka;
            var naparsovane = JSON.parse(localStorage.getItem('map'));
            if(a == []){
                var index = 0;
            }
            else{
                var index = a.length;
            }
        });

        var infoWindow = new google.maps.InfoWindow({map: map});
        // geolocation
        if (navigator.geolocation) {
            navigator.geolocation.getCurrentPosition(function(position) {
                var pos = {
                    lat: position.coords.latitude,
                    lng: position.coords.longitude
                };
                infoWindow.setPosition(pos);
                infoWindow.setContent('Tvoja aktuálna poloha.');
                map.setCenter(pos);
            }, function() {
                handleLocationError(true, infoWindow, map.getCenter());
            });
        } else {
            // Browser doesn't support Geolocation
            handleLocationError(false, infoWindow, map.getCenter());
        }

        function handleLocationError(browserHasGeolocation, infoWindow, pos) {
            infoWindow.setPosition(pos);
            infoWindow.setContent(browserHasGeolocation ?
                    'Error: Určenie tvojej polohy zlyhalo.':
                    'Error: Tvoj prehliadač nepodporuje určenie polohy.');
        }
        // Ak uživatel klikne na mapu zobrazí sa marker, každému markru je pridelený prvý volný index
        var labels = 'ABCDEFGHIJKLMNOPQRSTUVXYZ';
        var labelIndex = 0;

        // Pridá marker do mapy
        function addMarker(location, map) {
            // Vyberie prvý voľný index, na ktorý uloží marker aby neprepísal už obsadený
            //
            var marker = new google.maps.Marker({
                position: location,
                label: labels[labelIndex++ % labels.length],
                map: map,
                draggable: true,
                editable: true
             });

        }
    }

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

我没有足够的观点来评论，所以在这里回答。

据我了解，当您单击地图时，当您单击创建的标记时，您应该显示您在提示中输入的文本。这是这样做的小提琴 - http://jsfiddle.net/pn992yy4/31/。当您单击标记信息窗口时，您在提示中输入的消息将显示在标记的信息窗口中。

基本上，我修改了addMarker函数以调用一个名为 attachNote 的函数，该函数将您在提示对话框中输入的标记和消息作为参数。addMarker函数将提供的消息附加到标记的信息窗口。

function attachNote(marker, note) {
   var infowindow = new google.maps.InfoWindow({
        content: note
   });
   marker.addListener('click', function() {
       infowindow.open(marker.get('map'), marker);
   });
}

在单击事件上调用的addMarker函数也应具有poznamka 。

addMarker(event.latLng, map, poznamka);

希望这个答案有帮助。如果没有，请告诉我。

相关文章：