将标记标签添加到Google地图标记

Question

 <!DOCTYPE html> <html> <head> <title>Geolocation</title> <meta name="viewport" content="initial-scale=1.0, user-scalable=no"> <meta charset="utf-8"> <style> /* Always set the map height explicitly to define the size of the div * element that contains the map. */ #map { height: 100%; } /* Optional: Makes the sample page fill the window. */ html, body { height: 100%; margin: 0; padding: 0; } </style> <!-- Place this inside the HTML head; don't use async defer for now --> <script src="https://www.gstatic.com/firebasejs/4.12.1/firebase.js"></script> <script src="https://cdn.firebase.com/libs/geofire/4.1.2/geofire.min.js"></script> <script> var config = { apiKey: "AIzaSyCWZjRe2CK8Hu2VN35AgZOQ7lQZKcI-UWM", authDomain: "carrier-35d7c.firebaseapp.com", databaseURL: "https://carrier-35d7c.firebaseio.com", projectId: "carrier-35d7c", storageBucket: "carrier-35d7c.appspot.com", messagingSenderId: "827792028763" }; if (!firebase.apps.length) { firebase.initializeApp(config); } //Create a node at firebase location to add locations as child keys var locationsRef = firebase.database().ref("locations"); // Create a new GeoFire key under users Firebase location var geoFire = new GeoFire(locationsRef.push()); </script> </head> <body> <div id="map"></div> <script> // Note: This example requires that you consent to location sharing when // prompted by your browser. If you see the error "The Geolocation service // failed.", it means you probably did not give permission for the browser to // locate you. var map, infoWindow; var lat, lng; function initMap() { map = new google.maps.Map(document.getElementById('map'), { center: {lat: -34.397, lng: 150.644}, zoom: 18 }); infoWindow = new google.maps.InfoWindow; // Try HTML5 geolocation. if (navigator.geolocation) { navigator.geolocation.getCurrentPosition(function(position) { lat = position.coords.latitude; lng = position.coords.longitude; var pos = {lat: lat, lng: lng }; _setGeoFire(); var locationsRef = firebase.database().ref("locations"); locationsRef.on('child_added', function(snapshot) { var data = snapshot.val(); var markerLabel = 'Go'; var marker = new google.maps.Marker({ position: { lat: data.User.l[0], lng: data.User.l[1] }, map: map label: markerLabel }); bounds.extend(marker.getPosition()); marker.addListener('click', (function(data) { return function(e) { infowindow.setContent(this.getPosition().toUrlValue(6) + "<br>" + data.User.g); infowindow.open(map, this); } }(data))); map.fitBounds(bounds); }); infoWindow.setPosition(pos); infoWindow.setContent('Current Location'); infoWindow.open(map); 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: The Geolocation service failed.' : 'Error: Your browser doesn\\'t support geolocation.'); infoWindow.open(map); } function _setGeoFire(){ geoFire.set("User", [lat, lng]).then(()=>{ console.log("Location added"); }).catch(function(error) { console.log(error); }); } </script> <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyD2nPlSt_nM7PSKD8So8anbUbBYICFWcCA&callback=initMap"> </script> </body> </html>

I need help with adding a label to a google map marker. 我需要将标签添加到Google地图标记的帮助。 It keeps coming up with an error that says unexpected identifier. 它不断提出一个错误，指出意外的标识符。 https://medium.com/@barvysta/google-marker-api-lets-play-level-1-dynamic-label-on-marker-f9b94f2e3585 . https://medium.com/@barvysta/google-marker-api-lets-play-level-1-dynamic-label-on-marker-f9b94f2e3585 。 I used this website tutorial to make the marker label. 我使用此网站教程制作标记标签。 I dont know if there was an error in the tutorial or something If anyone could help me with this that would be great 我不知道教程中是否有错误或其他内容，如果有人可以帮助我，那将是很好的

Answer 1

var marker = new google.maps.Marker({
  position: {
    lat: data.User.l[0],
    lng: data.User.l[1]
  },
  map: map,
  label: markerLabel
});

You forgot to put a comma after map: map, 您忘了在地图后加上逗号：地图，

Answer 2

You have a typo on line 93: 您在第93行有错字：

92:     map: map   // <------------- missing comma
93      label: markerLabel  //<----- unexpected identifier

Uncaught SyntaxError: Unexpected identifier js:93

code snippet: 代码段：

 <!DOCTYPE html> <html> <head> <title>Geolocation</title> <meta name="viewport" content="initial-scale=1.0, user-scalable=no"> <meta charset="utf-8"> <style> /* Always set the map height explicitly to define the size of the div * element that contains the map. */ #map { height: 100%; } /* Optional: Makes the sample page fill the window. */ html, body { height: 100%; margin: 0; padding: 0; } </style> <!-- Place this inside the HTML head; don't use async defer for now --> <script src="https://www.gstatic.com/firebasejs/4.12.1/firebase.js"></script> <script src="https://cdn.firebase.com/libs/geofire/4.1.2/geofire.min.js"></script> <script> var config = { apiKey: "AIzaSyCWZjRe2CK8Hu2VN35AgZOQ7lQZKcI-UWM", authDomain: "carrier-35d7c.firebaseapp.com", databaseURL: "https://carrier-35d7c.firebaseio.com", projectId: "carrier-35d7c", storageBucket: "carrier-35d7c.appspot.com", messagingSenderId: "827792028763" }; if (!firebase.apps.length) { firebase.initializeApp(config); } //Create a node at firebase location to add locations as child keys var locationsRef = firebase.database().ref("locations"); // Create a new GeoFire key under users Firebase location var geoFire = new GeoFire(locationsRef.push()); </script> </head> <body> <div id="map"></div> <script> // Note: This example requires that you consent to location sharing when // prompted by your browser. If you see the error "The Geolocation service // failed.", it means you probably did not give permission for the browser to // locate you. var map, infoWindow; var lat, lng; function initMap() { map = new google.maps.Map(document.getElementById('map'), { center: { lat: -34.397, lng: 150.644 }, zoom: 18 }); infoWindow = new google.maps.InfoWindow; // Try HTML5 geolocation. if (navigator.geolocation) { navigator.geolocation.getCurrentPosition(function(position) { lat = position.coords.latitude; lng = position.coords.longitude; var pos = { lat: lat, lng: lng }; _setGeoFire(); var locationsRef = firebase.database().ref("locations"); locationsRef.on('child_added', function(snapshot) { var data = snapshot.val(); var markerLabel = 'Go'; var marker = new google.maps.Marker({ position: { lat: data.User.l[0], lng: data.User.l[1] }, map: map, label: markerLabel }); bounds.extend(marker.getPosition()); marker.addListener('click', (function(data) { return function(e) { infowindow.setContent(this.getPosition().toUrlValue(6) + "<br>" + data.User.g); infowindow.open(map, this); } }(data))); map.fitBounds(bounds); }); infoWindow.setPosition(pos); infoWindow.setContent('Current Location'); infoWindow.open(map); 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: The Geolocation service failed.' : 'Error: Your browser doesn\\'t support geolocation.'); infoWindow.open(map); } function _setGeoFire() { geoFire.set("User", [lat, lng]).then(() => { console.log("Location added"); }).catch(function(error) { console.log(error); }); } </script> <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyD2nPlSt_nM7PSKD8So8anbUbBYICFWcCA&callback=initMap"> </script> </body> </html>

将标记标签添加到Google地图标记

问题描述

2 个解决方案

解决方案1
1 2018-04-30 23:12:57

解决方案2
0 2018-04-30 23:52:20

将标记标签添加到Google地图标记

问题描述

2 个解决方案

解决方案1 1 2018-04-30 23:12:57

解决方案2 0 2018-04-30 23:52:20

解决方案1
1 2018-04-30 23:12:57

解决方案2
0 2018-04-30 23:52:20