如何在具有多边形的同一地图上显示自定义标记

How do I Display a Custom Marker on the same map that has Polygons?

本文关键字:地图 显示 自定义 多边形      更新时间:2024-02-29

这是我当前的代码。在这个例子中,我试图让自定义标记显示在地图上,地图上也突出显示了一个多边形。下面的脚本是javascript。

<script>
function initialize() {
var mapOptions = {
zoom: 10,
center: new google.maps.LatLng(48.545936,-122.765734),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var bermudaTriangle;
var marker1 = new google.maps.Marker({
      map: map,
      position: new google.maps.LatLng(48.3544181, -123.138301),
      draggable: false,
      title: 'Troll Fishing2',
      icon: "/images/fish.png"
    });

 var map = new google.maps.Map(document.getElementById('map-canvas'),
  mapOptions);
 // Define the LatLng coordinates for the polygon's path. Note that there's
 // no need to specify the final coordinates to complete the polygon, because
 // The Google Maps JavaScript API will automatically draw the closing side.
 var triangleCoords = [
 new google.maps.LatLng(48.7286, -122.8688),
 new google.maps.LatLng(48.677, -122.7733),
 new google.maps.LatLng(48.6901, -122.7507)
 ];
 bermudaTriangle = new google.maps.Polygon({
  paths: triangleCoords,
  strokeColor: '#FF0000',
  strokeOpacity: 0.8,
  strokeWeight: 3,
  fillColor: '#FF0000',
  fillOpacity: 0.35
 });
 bermudaTriangle.setMap(map);
 }
 google.maps.event.addDomListener(window, 'load', initialize);
 </script>

如有任何建议,我们将不胜感激。

在初始化映射后将标记1的定义移动到(或在映射初始化后调用其上的.setMap(map))。

 var map = new google.maps.Map(document.getElementById('map-canvas'),
  mapOptions);
var marker1 = new google.maps.Marker({
      map: map,
      position: new google.maps.LatLng(48.3544181, -123.138301),
      draggable: false,
      title: 'Troll Fishing2',
      icon: "/images/fish.png"
    });