需要Google地图的文字标签图钉

时间：2017-03-15 21:10:50

标签： javascript html css google-maps

我正在开发一个项目，需要一个位于地图上的项目列表 - 这将需要显示项目内容的图钉。之前尝试了许多不同的代码片段，但似乎无法获得正常工作的版本。任何帮助都会很棒。

以下链接是最好的 - 但在我的项目中实施它时遇到了问题。屏幕只是空白。

http://codepen.io/TheMarufm/pen/ywFDe 

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <title>Complex icons</title>

    <style>
    html, body, #map-canvas {
  height: 100%;
  margin: 0px;
  padding: 0px
}
    </style>

  </head>
  <body>


      <div id="map-canvas"></div>

    <script>
  var mapOptions = {
    zoom: 16,
    center: new google.maps.LatLng(-37.808846, 144.963435)
  };
  map = new google.maps.Map(document.getElementById('map-canvas'),
      mapOptions);


var pinz = [
    {
        'location':{
            'lat' : -37.807817,
            'lon' : 144.958377
        },
        'lable' : 2
    },
    {
        'location':{
            'lat' : -37.807885,
            'lon' : 144.965415
        },
        'lable' : 42
    },
    {
        'location':{
            'lat' : -37.811377,
            'lon' : 144.956596
        },
        'lable' : 87
    },
    {
        'location':{
            'lat' : -37.811293,
            'lon' : 144.962883
        },
        'lable' : 145
    },
    {
        'location':{
            'lat' : -37.808089,
            'lon' : 144.962089
        },
        'lable' : 999
    },
];



for(var i = 0; i <= pinz.length; i++){
   var image = 'data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2238%22%20height%3D%2238%22%20viewBox%3D%220%200%2038%2038%22%3E%3Cpath%20fill%3D%22%23808080%22%20stroke%3D%22%23ccc%22%20stroke-width%3D%22.5%22%20d%3D%22M34.305%2016.234c0%208.83-15.148%2019.158-15.148%2019.158S3.507%2025.065%203.507%2016.1c0-8.505%206.894-14.304%2015.4-14.304%208.504%200%2015.398%205.933%2015.398%2014.438z%22%2F%3E%3Ctext%20transform%3D%22translate%2819%2018.5%29%22%20fill%3D%22%23fff%22%20style%3D%22font-family%3A%20Arial%2C%20sans-serif%3Bfont-weight%3Abold%3Btext-align%3Acenter%3B%22%20font-size%3D%2212%22%20text-anchor%3D%22middle%22%3E' + pinz[i].lable + '%3C%2Ftext%3E%3C%2Fsvg%3E';


   var myLatLng = new google.maps.LatLng(pinz[i].location.lat, pinz[i].location.lon);
   var marker = new google.maps.Marker({
      position: myLatLng,
      map: map,
      icon: image
  });
}

    </script>


  </body>
</html>

如果有人有更好的版本或上面的代码有什么问题，请说。

2 个答案:

答案 0 :(得分：2)

好吧，你需要包含google-maps api脚本。

<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap"
async defer></script>

并将所有当前代码放在function initMap(){...}

中

另请注意，您需要从谷歌获取密钥才能获得此密钥。 （转到https://developers.google.com/maps/documentation/javascript/并按右上角的＆＃34; GET A KEY＆＃34;按钮）

＆＃13;
＆＃13; 
<!DOCTYPE html>
<html>

<head>
  <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
  <meta charset="utf-8">
  <title>Complex icons</title>

  <style>
    html,
    body,
    #map-canvas {
      height: 100%;
      margin: 0px;
      padding: 0px
    }
  </style>
  <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCDoaEePBvT1DihoTbun8NKSwWss7MzfgI&callback=initMap" async defer></script>
</head>

<body>


  <div id="map-canvas"></div>

  <script>
    function initMap() {
      var mapOptions = {
        zoom: 16,
        center: new google.maps.LatLng(-37.808846, 144.963435)
      };
      map = new google.maps.Map(document.getElementById('map-canvas'),
        mapOptions);


      var pinz = [{
          'location': {
            'lat': -37.807817,
            'lon': 144.958377
          },
          'lable': 2
        },
        {
          'location': {
            'lat': -37.807885,
            'lon': 144.965415
          },
          'lable': 42
        },
        {
          'location': {
            'lat': -37.811377,
            'lon': 144.956596
          },
          'lable': 87
        },
        {
          'location': {
            'lat': -37.811293,
            'lon': 144.962883
          },
          'lable': 145
        },
        {
          'location': {
            'lat': -37.808089,
            'lon': 144.962089
          },
          'lable': 999
        },
      ];



      for (var i = 0; i < pinz.length; i++) {
        var image = 'data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2238%22%20height%3D%2238%22%20viewBox%3D%220%200%2038%2038%22%3E%3Cpath%20fill%3D%22%23808080%22%20stroke%3D%22%23ccc%22%20stroke-width%3D%22.5%22%20d%3D%22M34.305%2016.234c0%208.83-15.148%2019.158-15.148%2019.158S3.507%2025.065%203.507%2016.1c0-8.505%206.894-14.304%2015.4-14.304%208.504%200%2015.398%205.933%2015.398%2014.438z%22%2F%3E%3Ctext%20transform%3D%22translate%2819%2018.5%29%22%20fill%3D%22%23fff%22%20style%3D%22font-family%3A%20Arial%2C%20sans-serif%3Bfont-weight%3Abold%3Btext-align%3Acenter%3B%22%20font-size%3D%2212%22%20text-anchor%3D%22middle%22%3E' + pinz[i].lable + '%3C%2Ftext%3E%3C%2Fsvg%3E';


        var myLatLng = new google.maps.LatLng(pinz[i].location.lat, pinz[i].location.lon);
        var marker = new google.maps.Marker({
          position: myLatLng,
          map: map,
          icon: image
        });
      }
    }
  </script>


</body>

</html>
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：0)

Codepen正在使用谷歌地图的外部JavaScript文件。要查看它，请单击Javascript窗格左上角的cog图标：

enter image description here

然后你应该看到正在使用的脚本：

enter image description here

有关详细信息，请参阅Google Maps API指南Getting Started。特别是getting an API key。

为了让它快速运行（在短期内），在内联脚本标记之前在HTML中添加该网址的脚本标记（即{ {1}}）：

<script> var mapOptions = {

在下面的代码段中查看它的实际效果。但请关注您的网站that guide和get an API key。

＆＃13;
＆＃13; 
<script src="http://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
＆＃13; 
var mapOptions = {
  zoom: 16,
  center: new google.maps.LatLng(-37.808846, 144.963435)
};
map = new google.maps.Map(document.getElementById('map-canvas'),
  mapOptions);
var pinz = [{
    'location': {
      'lat': -37.807817,
      'lon': 144.958377
    },
    'lable': 2
  },
  {
    'location': {
      'lat': -37.807885,
      'lon': 144.965415
    },
    'lable': 42
  },
  {
    'location': {
      'lat': -37.811377,
      'lon': 144.956596
    },
    'lable': 87
  },
  {
    'location': {
      'lat': -37.811293,
      'lon': 144.962883
    },
    'lable': 145
  },
  {
    'location': {
      'lat': -37.808089,
      'lon': 144.962089
    },
    'lable': 999
  },
];
for (var i = 0; i <= pinz.length; i++) {
  var image = 'data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2238%22%20height%3D%2238%22%20viewBox%3D%220%200%2038%2038%22%3E%3Cpath%20fill%3D%22%23808080%22%20stroke%3D%22%23ccc%22%20stroke-width%3D%22.5%22%20d%3D%22M34.305%2016.234c0%208.83-15.148%2019.158-15.148%2019.158S3.507%2025.065%203.507%2016.1c0-8.505%206.894-14.304%2015.4-14.304%208.504%200%2015.398%205.933%2015.398%2014.438z%22%2F%3E%3Ctext%20transform%3D%22translate%2819%2018.5%29%22%20fill%3D%22%23fff%22%20style%3D%22font-family%3A%20Arial%2C%20sans-serif%3Bfont-weight%3Abold%3Btext-align%3Acenter%3B%22%20font-size%3D%2212%22%20text-anchor%3D%22middle%22%3E' + pinz[i].lable + '%3C%2Ftext%3E%3C%2Fsvg%3E';

  var myLatLng = new google.maps.LatLng(pinz[i].location.lat, pinz[i].location.lon);
  var marker = new google.maps.Marker({
    position: myLatLng,
    map: map,
    icon: image
  });
}
＆＃13; 
html,
body,
#map-canvas {
  height: 100%;
  margin: 0px;
  padding: 0px
}
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题