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

时间:2013-12-04 15:44:03

标签: javascript google-maps-api-3 google-maps-markers

这是我此示例的当前代码,我试图让自定义标记显示在地图上,该标记也突出显示了多边形。以下脚本是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 个答案:

答案 0 :(得分:1)

在初始化地图后将marker1的定义移动到(或在初始化地图后调用.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"
    });