如何在谷歌地图上添加图像答案

【问题标题】：How to add image on google map如何在谷歌地图上添加图像
【发布时间】：2015-09-25 17:56:46
【问题描述】：

我是新手。我想制作基于google-map的网络应用程序。我已经成功编写了一个显示google地图的代码。这是我的html代码。

<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <style>
      html, body, #map-canvas {
        height: 100%;
        margin: 0px;
        padding: 0px
      }
      .controls {
        margin-top: 16px;
        border: 1px solid transparent;
        border-radius: 2px 0 0 2px;
        box-sizing: border-box;
        -moz-box-sizing: border-box;
        height: 32px;
        outline: none;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
      }

      #pac-input {
        background-color: #fff;
        font-family: Roboto;
        font-size: 15px;
        font-weight: 300;
        margin-left: 12px;
        padding: 0 11px 0 13px;
        text-overflow: ellipsis;
        width: 400px;
      }

      #pac-input:focus {
        border-color: #4d90fe;
      }

      .pac-container {
        font-family: Roboto;
      }

      #type-selector {
        color: #fff;
        background-color: #4d90fe;
        padding: 5px 11px 0px 11px;
      }

      #type-selector label {
        font-family: Roboto;
        font-size: 13px;
        font-weight: 300;
      }

    </style>
    <title>Places search box</title>
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&signed_in=true&libraries=places"></script>
    <script>

function initialize() {

  var markers = [];
  var map = new google.maps.Map(document.getElementById('map-canvas'), {
    mapTypeId: google.maps.MapTypeId.ROADMAP
  });

  var defaultBounds = new google.maps.LatLngBounds(
      new google.maps.LatLng(-33.8902, 151.1759),
      new google.maps.LatLng(-33.8474, 151.2631));
  map.fitBounds(defaultBounds);

  var input = (
      document.getElementById('pac-input'));
  map.controls[google.maps.ControlPosition.TOP_LEFT].push(input);

  var searchBox = new google.maps.places.SearchBox(
    (input));

  google.maps.event.addListener(searchBox, 'places_changed', function() {
    var places = searchBox.getPlaces();

    if (places.length == 0) {
      return;
    }
    for (var i = 0, marker; marker = markers[i]; i++) {
      marker.setMap(null);
    }
    markers = [];
    var bounds = new google.maps.LatLngBounds();
    for (var i = 0, place; place = places[i]; i++) {
      var image = {
        url: place.icon,
        size: new google.maps.Size(71, 71),
        origin: new google.maps.Point(0, 0),
        anchor: new google.maps.Point(17, 34),
        scaledSize: new google.maps.Size(25, 25)
      };

      var marker = new google.maps.Marker({
        map: map,
        icon: image,
        title: place.name,
        position: place.geometry.location
      });

      markers.push(marker);

      bounds.extend(place.geometry.location);
    }

    map.fitBounds(bounds);
  });

  google.maps.event.addListener(map, 'bounds_changed', function() {
    var bounds = map.getBounds();
    searchBox.setBounds(bounds);
  });
}

google.maps.event.addDomListener(window, 'load', initialize);

    </script>
    <style>
      #target {
        width: 345px;
      }
    </style>
  </head>
  <body>
    <input id="pac-input" class="controls" type="text" placeholder="Search your location here">
    <div id="map-canvas"></div>
  </body>
</html>

现在我想把图片图标放在街道上。请给你有用的建议，怎么做？

【问题讨论】：

你所说的“随意在街上”是什么意思？你只想要街上的明星，却不在乎他们的位置在哪里？什么是“明星”？你有一个特定的图标吗？你想要几颗“随机”的星星？
抱歉给我的问题带来不便。我想在街道的不同位置放置 100 个相似的图像图标。

标签： javascript html google-maps web-applications asp.net-web-api

【解决方案1】：

在您的场景中，您可以向地图添加图像标记。

用图像绘制标记：

var marker = new google.maps.Marker({
        position: new google.maps.LatLng(lat,lng),
        map: map,
        icon: '/path/to/image.png',
        zIndex: 1
});

您只需要指定要绘制到地图上的每个图像的坐标，您可以在其中随机生成它们。请记住，您必须为要绘制的每个星星创建一个标记对象。不要重复使用标记对象。

【讨论】：

当然。对于要绘制的每个图标，您都需要new google.maps.Marker。对于它们中的每一个，您都需要指定要绘制的坐标的(lat,lng)。您可以先尝试在特定的lat,lng 处绘制，然后尝试向其添加位移以查看位置分布。
我想在地图的不同坐标处显示相似的图像图标“image.png”。是否需要声明我想在地图上绘制的每个图像的坐标？
谢谢，你的回答对我很有用。