Question

我设法让一个脚本适合我的Map需求，但我无法自定义标记。

这里有我的

HTML：

<div id="map_wrapper">
    <div id="map_canvas" class="mapping"></div>
</div>

CSS：

#map_wrapper {
    height: 400px;
}

#map_canvas {
    width: 100%;
    height: 100%;
}

JS：

jQuery(function($) {
  // Asynchronously Load the map API 
  var script = document.createElement('script');
  script.src = "http://maps.googleapis.com/maps/api/js?sensor=false&callback=initialize";
  document.body.appendChild(script);
});

function initialize() {
  var map;
  var bounds = new google.maps.LatLngBounds();
  var mapOptions = {
    mapTypeId: 'roadmap'
  };

  // Display a map on the page
  map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
  map.setTilt(45);

  // Multiple Markers
  var markers = [
    ['London Eye, London', 51.503454, -0.119562],
    ['Palace of Westminster, London', 51.499633, -0.124755]
  ];

  // Info Window Content
  var infoWindowContent = [
    ['<div class="info_content">' +
      '<h3>London Eye</h3>' +
      '<p>The London Eye is a giant Ferris wheel situated on the banks of the River Thames. The entire structure is 135 metres (443 ft) tall and the wheel has a diameter of 120 metres (394 ft).</p>' + '</div>'
    ],
    ['<div class="info_content">' +
      '<h3>Palace of Westminster</h3>' +
      '<p>The Palace of Westminster is the meeting place of the House of Commons and the House of Lords, the two houses of the Parliament of the United Kingdom. Commonly known as the Houses of Parliament after its tenants.</p>' +
      '</div>'
    ]
  ];

  // Display multiple markers on a map
  var infoWindow = new google.maps.InfoWindow(),
    marker, i;

  // Loop through our array of markers & place each one on the map  
  for (i = 0; i < markers.length; i++) {
    var position = new google.maps.LatLng(markers[i][1], markers[i][2]);
    bounds.extend(position);
    marker = new google.maps.Marker({
      position: position,
      map: map,
      title: markers[i][0]
    });

    // Allow each marker to have an info window    
    google.maps.event.addListener(marker, 'click', (function(marker, i) {
      return function() {
        infoWindow.setContent(infoWindowContent[i][0]);
        infoWindow.open(map, marker);
      }
    })(marker, i));

    // Automatically center the map fitting all markers on the screen
    map.fitBounds(bounds);
  }

  // Override our map zoom level once our fitBounds function runs (Make sure it only runs once)
  var boundsListener = google.maps.event.addListener((map), 'bounds_changed', function(event) {
    this.setZoom(14);
    google.maps.event.removeListener(boundsListener);
  });

}

所以一切都运作良好，但我需要自定义标记图像。有人可以帮我这个吗？

Answer 1

生成标记时，您可以设置图标。我不知道你在尝试这个，但你可以这样做：

定义图标：

         <a href="https://twitter.com/share" class="twitter-share-button" data-url="https://www.buddreambig.ie/" data-text="Share your dream" data-hashtags="DreamBig"><!-- <img src="images/submit-button.png"> --></a>
                <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');
                </script>

                <input type="image" src="images/submit-button.png" id="btn" class="twitter-share-button">

然后在创建标记时执行：

var icon = {
                url: "/myIcon.png", // url
                scaledSize: new google.maps.Size(30, 30), // scaled size
                origin: new google.maps.Point(0, 0), // origin
                anchor: new google.maps.Point(0, 0) // anchor
            };

您应该阅读文档：https://developers.google.com/maps/documentation/javascript/reference

请告诉我，如果这是你的预期。

无法在Google地图上设置自定义标记

1 个答案: