将默认标记更改为Google Maps API上的特定图像

Question

what this code does is, when a user inputs two cordinates , it setup the map with a two markers and a line to show the direction . 该代码的作用是，当用户输入两个坐标时 ，它会设置带有两个标记和一条线的地图以显示方向。 Is it possible to change the d* efault marker * to a specific image differently for both cordinate, lets say i want the first cordinate to represent " image1.jpeg " and second cordinate to represent " image2.jpeg ". 对于两个坐标，是否有可能将d * 缺陷标记 *更改为不同的特定图像 ，可以说我希望第一个坐标代表“ image1.jpeg ”，第二个坐标代表“ image2.jpeg ”。

<html>
  <head>
    <meta charset="utf-8">
    <title>Google Maps JavaScript API v3 Example: Marker Animations</title>
    <link href="/maps/documentation/javascript/examples/default.css" rel="stylesheet">
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
    <script>
    //  var center = new google.maps.LatLng(52.12, -3.2);                   //center of the map
    var center = new google.maps.LatLng(<?php echo $_Mylat?>, <?php echo $_Mylon?>);
      var a = [
         new google.maps.LatLng(<?php echo $_Mylat?>, <?php echo $_Mylon?>),
         new google.maps.LatLng(<?php echo $_Mylat2?>, <?php echo $_Mylon2?>)
        ];
      var marker;
      var map;

      function initialize() {
        var mapOptions = {
          zoom: 13,
          mapTypeId: google.maps.MapTypeId.ROADMAP,
          center: center
        };

        map = new google.maps.Map(document.getElementById('map_canvas'),
                mapOptions);

    for (var i=0; i<a.length;i++)
    {
        marker = new google.maps.Marker({
          map:map,
          draggable:true,
          animation: google.maps.Animation.DROP,
          position: a[i]
      });

    }   
     var flightPlanCoordinates = [
            new google.maps.LatLng(<?php echo $_Mylat?>, <?php echo $_Mylon?>),
            new google.maps.LatLng(<?php echo $_Mylat2?>, <?php echo $_Mylon2?>)
        ];

       var flightPath = new google.maps.Polyline({
          path: flightPlanCoordinates,
          strokeColor: '#FF0000',
          strokeOpacity: 1.0,
          strokeWeight: 2
        });

        flightPath.setMap(map);

      }


    </script>

  </head>
  <body onload="initialize()">
    <div id="map_canvas" style="width: 500px; height: 400px;">map div</div>
  </body>
</html>

where in this code can i change the marker to my specific image, thanks 在此代码中我可以将标记更改为我的特定图像的地方，谢谢

Answer 1

You'd want to do an IF statement to determine which image the marker should load. 您需要执行IF语句来确定标记应加载的图像。

if(i == 0) iconImage = "image1.jpeg";
else if(i == 1)  iconImage = "image2.jpeg";

Then simply add the custom icon and variable to the marker: 然后只需将自定义图标和变量添加到标记中：

marker = new google.maps.Marker({
          map:map,
          draggable:true,
          animation: google.maps.Animation.DROP,
          position: a[i],
          icon: iconImage
});

将默认标记更改为Google Maps API上的特定图像

问题描述

1 个解决方案

解决方案1
1 已采纳 2013-03-06 12:27:03

将默认标记更改为Google Maps API上的特定图像

问题描述

1 个解决方案

解决方案1 1 已采纳 2013-03-06 12:27:03

解决方案1
1 已采纳 2013-03-06 12:27:03