个人中心
gpt4 book ai didi

javascript - 需要谷歌地图的文本标签图钉

转载 作者：行者123 更新时间：2023-11-28 16:27:03 27 4
gpt4 key购买 nike

我正在开展一个元素，该元素需要 map 上的元素列表 - 这将需要显示元素内容的图钉。之前尝试过许多不同的代码片段，但似乎无法获得工作版本。任何帮助都会很棒。

下面的链接是最好的 - 但在我的元素中实现它时遇到了问题。屏幕是空白的。

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>

如果谁有更好的版本或者我上面的代码有什么问题，请指出。

最佳答案

那么，您需要包含 google-maps api 脚本。

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

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

另请注意，您需要为此从谷歌获取 key 。 (转到 https://developers.google.com/maps/documentation/javascript/ 并按右上角的“获取 key ”按钮)

<!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>

关于javascript - 需要谷歌地图的文本标签图钉，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/42820747/

27 4 0
文章推荐： html - CSS、HTML 居中问题
文章推荐： Python 2.7 : applying str to collections. 计数器和 collections.defaultdict
文章推荐： python - 如何使用 pyautogui 增加每秒的点击次数？
文章推荐： javascript - 我是否正确编写了这些 HTML img 标签？