自定义和路标标记在谷歌地图

Custom and waypoint markers in Google Maps

本文关键字：谷歌地图 路标 自定义      更新时间：2023-09-26

我正在寻找一些帮助。我有下面的谷歌地图代码这是工作良好。我唯一需要的是在起点上的自定义标记:(51.943382,6.463116)，而在路点上没有标记。这能做到吗?我已经从Stackoverflow尝试了几个解决方案，但是我对gm代码和编程技能的理解不足以让我得到我想要的。谢谢!

<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="initial-scale=1.0, user-scalable=no"/>
        <meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
        <title>Google Maps JavaScript API v3 Example: Directions Waypoints</title>
        <link href="http://code.google.com/apis/maps/documentation/javascript/examples/default.css" rel="stylesheet" type="text/css" />
        <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false">
        </script>
        <script type="text/javascript">
          var directionDisplay;
          var directionsService = new google.maps.DirectionsService();
          var map;
          function initialize() {
              directionsDisplay = new google.maps.DirectionsRenderer({
              });

              var myOptions = {
                  zoom: 10,
                  mapTypeId: google.maps.MapTypeId.ROADMAP,
              }

              map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
              directionsDisplay.setMap(map);
              calcRoute();
          }
          function calcRoute() {
              var waypts = [];

              stop = new google.maps.LatLng(51.943571, 6.463856)
                      waypts.push({
                          location:stop,
                          stopover:true});
              stop = new google.maps.LatLng(51.945032, 6.465776)
                      waypts.push({
                          location:stop,
                          stopover:true});
              stop = new google.maps.LatLng(51.945538, 6.469413)
                      waypts.push({
                          location:stop,
                          stopover:true});
              stop = new google.maps.LatLng(51.947462, 6.467941)
                      waypts.push({
                          location:stop,
                          stopover:true});
              stop = new google.maps.LatLng(51.945409, 6.465562)
                      waypts.push({
                          location:stop,
                          stopover:true});
              stop = new google.maps.LatLng(51.943700, 6.462096)
                      waypts.push({
                          location:stop,
                          stopover:true});
              start  = new google.maps.LatLng(51.943382, 6.463116);
              end = new google.maps.LatLng(51.943382, 6.463116);
              var request = {
                  origin: start,
                  destination: end,
                  waypoints: waypts,
                  optimizeWaypoints: true,
                  travelMode: google.maps.DirectionsTravelMode.WALKING
              };
              directionsService.route(request, function(response, status) {
                  if (status == google.maps.DirectionsStatus.OK) {
                      directionsDisplay.setDirections(response);
                      var route = response.routes[0];
                  }
              });
          }
        </script>
    </head>
    <body onLoad="initialize()">
        <div id="map_canvas" style="width:70%;height:80%;"></div>
    </body>
</html>

我认为只有一个解决方案。使用下面的代码删除所有标记:

directionsDisplay = new google.maps.DirectionsRenderer({
    suppressMarkers: true
});

并在起始点手动添加标记。

这里有一个JSFiddle来说明。

希望这对你有帮助!

随方向自行添加标记即可。

var marker = new google.maps.Marker({
    position: start,
    map: map
});

这是假设您要将This添加到初始化函数中，以便访问map。否则，您需要将map变量设置为全局变量，以便在calcRoute函数中访问它。

在你的directionsDisplay对象中，将suppressMarkers设置为true:

directionsDisplay = new google.maps.DirectionsRenderer({
    suppressMarkers : true
});

看到https://developers.google.com/maps/documentation/javascript/reference DirectionsRendererOptions

相关文章：