Question

我想使用谷歌地图创建箭头指向折线。我可以通过线路连接。但我想在箭头结束时绘制线条。

我的代码是

function initialize() {
  geocoder = new google.maps.Geocoder();
  var latlng = new google.maps.LatLng(-34.397, 150.644);
  var mapOptions = {
    zoom: 5
    //center: latlng
  }
  map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
   map.clearOverlays();
    // Define a symbol using a predefined path (an arrow)
    // supplied by the Google Maps JavaScript API.
    var lineSymbol = {
        path: google.maps.SymbolPath.FORWARD_OPEN_ARROW
    };

   var polyOptions = {
    strokeColor: '#000000',
    strokeOpacity: 1.0,
    icons: [{
          icon: lineSymbol,
          strokeColor: '#FF0000',
          strokeOpacity: 1.0,
          offset: '100%'
    }],
    strokeWeight: 3
  };

  lineCoordinates= new google.maps.Polyline(polyOptions);
      lineCoordinates.setMap(map);     

}


function placeMarker(mapLoc,address,infoDlgString){
    map.setCenter(mapLoc);
      var marker = new google.maps.Marker({
          map: map,
          animation: google.maps.Animation.DROP,
          title: address,
          position: mapLoc
      });

      var infowindow = new google.maps.InfoWindow({
        content:infoDlgString
      });
    infowindow.open(map,marker);
}



function getAddressDetail(address2,infoDlgString){
 geocoder.geocode( { 'address': address2}, function(results2, status2) {
    if (status2 == google.maps.GeocoderStatus.OK) {
         map.setCenter(results2[0].geometry.location);       
         placeMarker(results2[0].geometry.location,address2,infoDlgString);

         var path = lineCoordinates.getPath();
         path.push(results2[0].geometry.location);

    } else {
      alert('Geocode was not successful for the following reason: ' + status2);
    }
  });
}

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

Answer 1

您尚未指定折线的路径。因此谷歌不知道该绘制什么。在polyOptions变量中添加多个latlng的路径后，该行应显示正确的箭头头。这对我有用：

<!DOCTYPE html>
<html>
<head>
<title>Polyline with arrows</title>

<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0; padding: 0 }
#map_canvas { width:100%; height:100% }
</style>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>

<script type="text/javascript">
    function initialize() {
        var latlng = new google.maps.LatLng(54.57723, -2.79748);

        var myOptions = {
            zoom: 9,
            center: latlng,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

        var lineSymbol = {
            path: google.maps.SymbolPath.FORWARD_OPEN_ARROW,
            strokeColor: '#FF0000',
            strokeOpacity: 1.0  
        };

        var polyline = new google.maps.Polyline({
            path: [latlng, new google.maps.LatLng(54.60039,-3.13632), new google.maps.LatLng(54.36897,-3.07561)],
            strokeColor: "#000000",
            strokeOpacity: 0.5,
            strokeWeight: 4,
            map: map,
            icons: [{
                icon: lineSymbol,
                offset: '100%'
            }]
        });
    }

    google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
    <div id="map_canvas"></div>
</body>
</html>

另请注意，IconSequence对象中没有strokeColor或strokeOpacity属性。这些都在Symbol对象上。

复杂折线与箭头谷歌地图api v3

1 个答案: