將標記標簽添加到Google地圖標記
[英]Add Marker Label to google maps marker
問題描述
<!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>
2 個解決方案
解決方案1
1 2018-04-30 23:12:57
var marker = new google.maps.Marker({
position: {
lat: data.User.l[0],
lng: data.User.l[1]
},
map: map,
label: markerLabel
});
您忘了在地圖后加上逗號：地圖，
解決方案2
0 2018-04-30 23:52:20
您在第93行有錯字：
92: map: map // <------------- missing comma
93 label: markerLabel //<----- unexpected identifier
Uncaught SyntaxError: Unexpected identifier js:93
代碼段：
<!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>
有沒有一種方法可以將位置添加到使用JavaScript隨機放置在Google地圖中的標記的標簽上？
[英]Is there a way to add location to the label of a marker that is randomly placed in google maps with javascript?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.