如何在Google地图的国家/地区名称中添加标签？

Question

I am looking to add a small label near each of the countries name that will show it's population (eg Brazil [200,0000] ). 我希望在每个国家/地区名称附近添加一个小标签，以显示其人口（例如，巴西[200,0000]）。 Is there a way to do this with Google maps JS api? 有没有办法用Google Maps JS API做到这一点？

My current code for map initialization: 我当前的地图初始化代码：

    // Define options
    var options = {
        center: {
            lat: 48.1250223,
            lng: 4.1264001
        },
        zoom: 3
    };

    // Init map
    map = new google.maps.Map( $container.get(0), options );

Any help would be appreciated! 任何帮助，将不胜感激！

Answer 1

Data for the population is not available in the Google Maps API v3. Google Maps API v3中没有人口数据。 You will need to import data from an external source. 您将需要从外部源导入数据。

You can check this example from Google API https://developers.google.com/maps/documentation/javascript/combining-data 您可以从Google API https://developers.google.com/maps/documentation/javascript/combining-data查看此示例

Full code 完整代码

 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> <title>Mashups with google.maps.Data</title> <style> html, body, #map { height: 100%; margin: 0; padding: 0; overflow: hidden; } .nicebox { position: absolute; text-align: center; font-family: "Roboto", "Arial", sans-serif; font-size: 13px; z-index: 5; box-shadow: 0 4px 6px -4px #333; padding: 5px 10px; background: rgb(255,255,255); background: linear-gradient(to bottom,rgba(255,255,255,1) 0%,rgba(245,245,245,1) 100%); border: rgb(229, 229, 229) 1px solid; } #controls { top: 10px; left: 110px; width: 360px; height: 45px; } #data-box { top: 10px; left: 500px; height: 45px; line-height: 45px; display: none; } #census-variable { width: 360px; height: 20px; } #legend { display: flex; display: -webkit-box; padding-top: 7px } .color-key { background: linear-gradient(to right, hsl(5, 69%, 54%) 0%, hsl(29, 71%, 51%) 17%, hsl(54, 74%, 47%) 33%, hsl(78, 76%, 44%) 50%, hsl(102, 78%, 41%) 67%, hsl(127, 81%, 37%) 83%, hsl(151, 83%, 34%) 100%); flex: 1; -webkit-box-flex: 1; margin: 0 5px; text-align: left; font-size: 1.0em; line-height: 1.0em; } #data-value { font-size: 2.0em; font-weight: bold } #data-label { font-size: 2.0em; font-weight: normal; padding-right: 10px; } #data-label:after { content: ':' } #data-caret { margin-left: -5px; display: none; font-size: 14px; width: 14px} </style> </head> <body> <div id="controls" class="nicebox"> <div> <select id="census-variable"> <option value="https://storage.googleapis.com/mapsdevsite/json/DP02_0066PE">Percent of population over 25 that completed high school</option> <option value="https://storage.googleapis.com/mapsdevsite/json/DP05_0017E">Median age</option> <option value="https://storage.googleapis.com/mapsdevsite/json/DP05_0001E">Total population</option> <option value="https://storage.googleapis.com/mapsdevsite/json/DP02_0016E">Average family size</option> <option value="https://storage.googleapis.com/mapsdevsite/json/DP03_0088E">Per-capita income</option> </select> </div> <div id="legend"> <div id="census-min">min</div> <div class="color-key"><span id="data-caret">&#x25c6;</span></div> <div id="census-max">max</div> </div> </div> <div id="data-box" class="nicebox"> <label id="data-label" for="data-value"></label> <span id="data-value"></span> </div> <div id="map"></div> <script> var mapStyle = [{ 'stylers': [{'visibility': 'off'}] }, { 'featureType': 'landscape', 'elementType': 'geometry', 'stylers': [{'visibility': 'on'}, {'color': '#fcfcfc'}] }, { 'featureType': 'water', 'elementType': 'geometry', 'stylers': [{'visibility': 'on'}, {'color': '#bfd4ff'}] }]; var map; var censusMin = Number.MAX_VALUE, censusMax = -Number.MAX_VALUE; function initMap() { // load the map map = new google.maps.Map(document.getElementById('map'), { center: {lat: 40, lng: -100}, zoom: 4, styles: mapStyle }); // set up the style rules and events for google.maps.Data map.data.setStyle(styleFeature); map.data.addListener('mouseover', mouseInToRegion); map.data.addListener('mouseout', mouseOutOfRegion); // wire up the button var selectBox = document.getElementById('census-variable'); google.maps.event.addDomListener(selectBox, 'change', function() { clearCensusData(); loadCensusData(selectBox.options[selectBox.selectedIndex].value); }); // state polygons only need to be loaded once, do them now loadMapShapes(); } /** Loads the state boundary polygons from a GeoJSON source. */ function loadMapShapes() { // load US state outline polygons from a GeoJson file map.data.loadGeoJson('https://storage.googleapis.com/mapsdevsite/json/states.js', { idPropertyName: 'STATE' }); // wait for the request to complete by listening for the first feature to be // added google.maps.event.addListenerOnce(map.data, 'addfeature', function() { google.maps.event.trigger(document.getElementById('census-variable'), 'change'); }); } /** * Loads the census data from a simulated API call to the US Census API. * * @param {string} variable */ function loadCensusData(variable) { // load the requested variable from the census API (using local copies) var xhr = new XMLHttpRequest(); xhr.open('GET', variable + '.json'); xhr.onload = function() { var censusData = JSON.parse(xhr.responseText); censusData.shift(); // the first row contains column names censusData.forEach(function(row) { var censusVariable = parseFloat(row[0]); var stateId = row[1]; // keep track of min and max values if (censusVariable < censusMin) { censusMin = censusVariable; } if (censusVariable > censusMax) { censusMax = censusVariable; } // update the existing row with the new data map.data .getFeatureById(stateId) .setProperty('census_variable', censusVariable); }); // update and display the legend document.getElementById('census-min').textContent = censusMin.toLocaleString(); document.getElementById('census-max').textContent = censusMax.toLocaleString(); }; xhr.send(); } /** Removes census data from each shape on the map and resets the UI. */ function clearCensusData() { censusMin = Number.MAX_VALUE; censusMax = -Number.MAX_VALUE; map.data.forEach(function(row) { row.setProperty('census_variable', undefined); }); document.getElementById('data-box').style.display = 'none'; document.getElementById('data-caret').style.display = 'none'; } /** * Applies a gradient style based on the 'census_variable' column. * This is the callback passed to data.setStyle() and is called for each row in * the data set. Check out the docs for Data.StylingFunction. * * @param {google.maps.Data.Feature} feature */ function styleFeature(feature) { var low = [5, 69, 54]; // color of smallest datum var high = [151, 83, 34]; // color of largest datum // delta represents where the value sits between the min and max var delta = (feature.getProperty('census_variable') - censusMin) / (censusMax - censusMin); var color = []; for (var i = 0; i < 3; i++) { // calculate an integer color based on the delta color[i] = (high[i] - low[i]) * delta + low[i]; } // determine whether to show this shape or not var showRow = true; if (feature.getProperty('census_variable') == null || isNaN(feature.getProperty('census_variable'))) { showRow = false; } var outlineWeight = 0.5, zIndex = 1; if (feature.getProperty('state') === 'hover') { outlineWeight = zIndex = 2; } return { strokeWeight: outlineWeight, strokeColor: '#fff', zIndex: zIndex, fillColor: 'hsl(' + color[0] + ',' + color[1] + '%,' + color[2] + '%)', fillOpacity: 0.75, visible: showRow }; } /** * Responds to the mouse-in event on a map shape (state). * * @param {?google.maps.MouseEvent} e */ function mouseInToRegion(e) { // set the hover state so the setStyle function can change the border e.feature.setProperty('state', 'hover'); var percent = (e.feature.getProperty('census_variable') - censusMin) / (censusMax - censusMin) * 100; // update the label document.getElementById('data-label').textContent = e.feature.getProperty('NAME'); document.getElementById('data-value').textContent = e.feature.getProperty('census_variable').toLocaleString(); document.getElementById('data-box').style.display = 'block'; document.getElementById('data-caret').style.display = 'block'; document.getElementById('data-caret').style.paddingLeft = percent + '%'; } /** * Responds to the mouse-out event on a map shape (state). * * @param {?google.maps.MouseEvent} e */ function mouseOutOfRegion(e) { // reset the hover state, returning the border to normal e.feature.setProperty('state', 'normal'); } </script> <script async defer src="https://maps.googleapis.com/maps/api/js?callback=initMap"> </script> </body> </html>

Answer 2

You could use the label of a marker without displaying the marker. 您可以使用标记的标签而不显示标记。 Attached a short example. 附上简短的示例。 Mmmmh, or use the country flag as icon and show the label over it. 嗯，或者使用国家标志作为图标，并在其上方显示标签。

 <!DOCTYPE html> <html> <head> <meta name="viewport" content="initial-scale=1.0, user-scalable=no"> <meta charset="utf-8"> <title>Marker with Label</title> <style> #map {height: 100%;} html, body {height: 100%;} </style> </head> <body> <div id="map"></div> <script> function initMap() { var map = new google.maps.Map(document.getElementById('map'), { zoom: 4, center: {lat: 48.1, lng: 4.1}, mapTypeId: 'terrain' }); //set the text as marker label without displayinge the marker var m = new google.maps.Marker({ position: {lat: 48.1, lng: 4.1}, label: { color: 'purple', fontWeight: 'bold', text: 'people: 67 Mio', }, icon: { url: 'none_marker.png', anchor: new google.maps.Point(10, -25), }, map: map }); } </script> <script async defer src="https://maps.googleapis.com/maps/api/js?callback=initMap"></script> </body> </html>

如何在Google地图的国家/地区名称中添加标签？

问题描述

2 个解决方案

解决方案1
0 2017-11-10 10:52:47

解决方案2
0 已采纳 2017-11-10 17:30:57

如何在Google地图的国家/地区名称中添加标签？

问题描述

2 个解决方案

解决方案1 0 2017-11-10 10:52:47

解决方案2 0 已采纳 2017-11-10 17:30:57

解决方案1
0 2017-11-10 10:52:47

解决方案2
0 已采纳 2017-11-10 17:30:57