如何使用Google Maps API在Google Maps的標簽中添加樣式？

Question

我已經制作了一個地圖，從我的json文件中調用了多個數據點，我設法將圖像顯示為標記並顯示了標簽，但是我的問題是標簽如何在不破壞地圖的情況下為其添加樣式或弄亂坐標？

目前，第一個標簽有效並且在正確的位置，但是我嘗試初始化的第二種方法甚至都無效，而且據我的研究表明，必須對其進行布局以添加樣式。

• 嘗試為初始標簽添加樣式阻止了整個地圖的顯示。

• 嘗試在看到的格式中添加標簽甚至無法顯示文本

  //stores Google Map object and the JSON called from PHP
  var map;
  var locations;
  var markers;


  function initMap() {

      // creates the map and puts it in the html giving its zoom and position
      map = new google.maps.Map(document.getElementById('map'), 
          {
            center: {
                lat: 51.0590282, 
                lng: -1.3104568},
                zoom: 9
        });


    $.getJSON(

          //URL for my php script
          'http://up858296.ct.port.ac.uk/ParkRun/ParkrunJson.php', 

          function(jsonData) {   

              // putting jason data under variable location
              locations  = jsonData;

              locations.forEach(

                        function(loc) {


                            // gets objects which arent in my JSON
                            loc.map = map;  

                            if (loc.gender == "Male") {

                                loc.icon.url = 'Man.png';

                            } else {

                                loc.icon.url = 'Women.png';
                            }

                            loc.icon.scaledSize = new google.maps.Size(40, 40);
                            loc.icon.labelOrigin = new google.maps.Point(10, 50);
                            loc.title = "Parkrun: " + loc.parkrun + ", Runner: " + loc.name + ", Time: " + loc.duration;
                            //fist label that displays but cant add style

                            loc.label =  loc.name + ", Time:" + loc.duration;                                                                               


                            //creates marker on google map named "loc"
                            // "loc" stores lat, lng ect 
                            var marker = new google.maps.Marker(loc);

                            // Add listener for a click event upon which will open url for parkrun sites.
                            marker.addListener(

                                'click',

                                function() {
                                    window.open(loc.link);
                                }

                            );

                        //initialise styled map label overlay (second lable wont even display text)
                        /*var m = new google.maps.Marker({
                                           position: loc,
                                           label: {
                                            text: loc.name + ", Time:" + loc.duration,
                                            color: 'white',
                                            fontWeight: 'bold',

                                          },
                                        })*/                    
                        }
                  );
             }
        );

      };

Answer 1

這對我有用（將您第二次嘗試中的格式用於第一次定義的標簽）。

  loc.icon.scaledSize = new google.maps.Size(40, 40);
  loc.icon.labelOrigin = new google.maps.Point(10, 50);
  loc.title = "Parkrun: " + loc.parkrun + ", Runner: " + loc.name + ", Time: " + loc.duration;
  loc.label = {
    text: loc.name + ", Time:" + loc.duration,
    color: 'white',
    fontWeight: 'bold',
  };

概念證明

代碼段：

 var map; var locations; var markers; function initMap() { // creates the map and puts it in the html giving its zoom and position map = new google.maps.Map(document.getElementById('map'), { center: { lat: 51.0590282, lng: -1.3104568 }, zoom: 9, mapTypeId: 'satellite' }); // putting jason data under variable location locations = jsonData; locations.forEach( function(loc) { // gets objects which arent in my JSON loc.map = map; if (loc.gender == "Male") { loc.icon.url = 'http://maps.google.com/mapfiles/ms/micons/blue.png'; } else { loc.icon.url = 'http://maps.google.com/mapfiles/ms/micons/red.png'; } loc.icon.scaledSize = new google.maps.Size(40, 40); loc.icon.labelOrigin = new google.maps.Point(10, 50); loc.title = "Parkrun: " + loc.parkrun + ", Runner: " + loc.name + ", Time: " + loc.duration; loc.label = { text: loc.name + ", Time:" + loc.duration, color: 'white', fontWeight: 'bold', }; var marker = new google.maps.Marker(loc); // Add listener for a click event upon which will open url for parkrun sites. marker.addListener('click', function() { window.open(loc.link); }); }); } jsonData = [{ "position": { "lat": 51.1699, "lng": -0.8371 }, "gender": "Male", "parkrun": "Alice Holt", "name": "James Baker", "duration": "16:57:00", "link": "https:\\/\\/www.parkrun.org.uk\\/aliceholt\\/", "icon": [] }, { "position": { "lat": 51.2193, "lng": -1.5052 }, "gender": "Male", "parkrun": "Andover", "name": "John Kane", "duration": "18:13:00", "link": "https:\\/\\/www.parkrun.org.uk\\/andover\\/", "icon": [] }, { "position": { "lat": 51.2599, "lng": -1.0824 }, "gender": "Male", "parkrun": "Basingstoke", "name": "Matthieu Marshall", "duration": "16:51:00", "link": "https:\\/\\/www.parkrun.org.uk\\/basingstoke\\/", "icon": [] }, { "position": { "lat": 50.8084, "lng": -1.6414 }, "gender": "Male", "parkrun": "Brockenhurst", "name": "James Bewley", "duration": "18:06:00", "link": "https:\\/\\/www.parkrun.org.uk\\/brockenhurst\\/", "icon": [] }, { "position": { "lat": 50.9705, "lng": -1.3731 }, "gender": "Male", "parkrun": "Eastleigh", "name": "Tom Bray", "duration": "18:06:00", "link": "https:\\/\\/www.parkrun.org.uk\\/eastleigh\\/", "icon": [] }, { "position": { "lat": 50.8483, "lng": -1.166 }, "gender": "Women", "parkrun": "Fareham", "name": "Leslie Ellul", "duration": "52:00:00", "link": "https:\\/\\/www.parkrun.org.uk\\/fareham\\/", "icon": [] }, { "position": { "lat": 50.8733, "lng": -0.9753 }, "gender": "Women", "parkrun": "Havant", "name": "Nicola Ellul", "duration": "26:10:00", "link": "https:\\/\\/www.parkrun.org.uk\\/havant\\/", "icon": [] }, { "position": { "lat": 51.1188, "lng": -0.8766 }, "gender": "Male", "parkrun": "Hogmoor Inclosure", "name": "James Kingston", "duration": "17:07:00", "link": "https:\\/\\/www.parkrun.org.uk\\/hogmoorinclosure\\/", "icon": [] }, { "position": { "lat": 50.8009, "lng": -1.2035 }, "gender": "Male", "parkrun": "Lee-on-the-Solent", "name": "Jack Porter", "duration": "18:24:00", "link": "https:\\/\\/www.parkrun.org.uk\\/leeonthesolent\\/", "icon": [] }, { "position": { "lat": 50.7506, "lng": -1.547 }, "gender": "Male", "parkrun": "Lyminghton Woodside", "name": "Callum Johnson", "duration": "18:39:00", "link": "https:\\/\\/www.parkrun.org.uk\\/lymingtonwoodside\\/", "icon": [] }, { "position": { "lat": 50.8685, "lng": -1.3427 }, "gender": "Male", "parkrun": "Netley Abbey", "name": "Samuel Skinner", "duration": "18:24:00", "link": "https:\\/\\/www.parkrun.org.uk\\/netleyabbey\\/", "icon": [] }, { "position": { "lat": 50.8405, "lng": -1.0776 }, "gender": "Male", "parkrun": "Portsmouth Lakeside", "name": "Liam Dunne", "duration": "16:18:00", "link": "https:\\/\\/www.parkrun.org.uk\\/portsmouthlakeside\\/", "icon": [] }, { "position": { "lat": 50.9651, "lng": -0.9754 }, "gender": "Male", "parkrun": "Queen Elizabeth", "name": "Grant Hopkins", "duration": "19:33:00", "link": "https:\\/\\/www.parkrun.org.uk\\/queenelizabeth\\/", "icon": [] }, { "position": { "lat": 51.265, "lng": -0.7547 }, "gender": "Male", "parkrun": "Rushmoor", "name": "Kim Bowling", "duration": "17:18:00", "link": "https:\\/\\/www.parkrun.org.uk\\/rushmoor\\/", "icon": [] }, { "position": { "lat": 50.9245, "lng": -1.4096 }, "gender": "Male", "parkrun": "Southampton", "name": "Peter Hart", "duration": "16:49:00", "link": "https:\\/\\/www.parkrun.org.uk\\/southampton\\/", "icon": [] }, { "position": { "lat": 50.7787, "lng": -1.082 }, "gender": "Male", "parkrun": "Southsea", "name": "Adam Barlow", "duration": "16:31:00", "link": "https:\\/\\/www.parkrun.org.uk\\/southsea\\/", "icon": [] }, { "position": { "lat": 50.8847, "lng": -1.2472 }, "gender": "Male", "parkrun": "Whiteley", "name": "Richard Waldron", "duration": "15:46:00", "link": "https:\\/\\/www.parkrun.org.uk\\/whiteley\\/", "icon": [] }, { "position": { "lat": 51.0662, "lng": -1.3126 }, "gender": "Male", "parkrun": "Winchester", "name": "Marley Godden", "duration": "17:59:00", "link": "https:\\/\\/www.parkrun.org.uk\\/winchester\\/", "icon": [] }]; 

 html, body, #map { height: 100%; margin: 0; padding: 0; } 

 <div id="map"></div> <!-- Replace the value of the key parameter with your own API key. --> <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap" async defer></script>