Javascript 带箭头的复杂多段线google map api v3_Javascript_Google Maps Api 3

Javascript 带箭头的复杂多段线google map api v3

javascript google-maps-api-3

Javascript 带箭头的复杂多段线google map api v3,javascript,google-maps-api-3,Javascript,Google Maps Api 3,我想用谷歌地图创建箭头指向的多段线。我可以通过电话线连接。但我想在箭头结束时画一条线我的代码是 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.ma

我想用谷歌地图创建箭头指向的多段线。我可以通过电话线连接。但我想在箭头结束时画一条线

我的代码是

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);

您尚未为多段线指定要遵循的路径。所以谷歌不知道该策划什么。在

polypoptions

变量中添加多个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>


带箭头的多段线
html{高度：100%}
正文{高度：100%；边距：0；填充：0}
#地图画布{宽度：100%；高度：100%}
函数初始化（）{
var latlng=新的google.maps.latlng（54.57723，-2.79748）；
变量myOptions={
缩放：9，
中心：拉特林，
mapTypeId:google.maps.mapTypeId.ROADMAP
};
var map=new google.maps.map（document.getElementById（“map_canvas”），myOptions）；
变量lineSymbol={
路径：google.maps.SymbolPath.FORWARD\u OPEN\u箭头，
strokeColor:“#FF0000”，
笔划不透明度：1.0
};
var polyline=新的google.maps.polyline({
路径：[latlng，new google.maps.latlng（54.60039，-3.13632），new google.maps.latlng（54.36897，-3.07561）]，
strokeColor:#000000“，
笔划不透明度：0.5，
冲程重量：4，
地图：地图，
图标：[{
图标：lineSymbol，
抵销：“100%”
}]
});
}
google.maps.event.addDomListener（窗口“加载”，初始化）；

还要注意，IconSequence对象中没有strokeColor或strokeOpacity属性。这些都在符号对象上。

我要关心的是在我画的每一行上使用箭头。var path=lineCoordinates.getPath（）；path.push（results2[0].geometry.location）；这里我添加了latlag。Like wise如何添加图标对象？