Google地图点击路线上的事件

问题描述

无论我点击哪条路线，我都想画一个圆圈。我寻找一个解决方案，如何使路由可点击，并找不到有用的东西...下面是我的代码。

  directionsDisplay = new google.maps.DirectionsRenderer（rendererOptions（））;我点击路线时没有错误，但没有创建圆圈。
 ）; 
 
 //在这里指示服务请求... 
 
 google.maps.event.addListener（directionsDisplay，'click'，function（event）{
 
 var routeClick = new google.maps.Circle（{
 center：event.latLng，// center你点击
半径：500，
 strokeColor：＃0000FF，
 strokeOpacity：0.8，
 strokeWeight：2，
 fillColor：＃0000FF，
 fillOpacity：0.4 
}）; 
 
 routeClick.setMap （地图）; 
 
}）; 
  

更新：

工作代码根据Geocodezip的脚本创建自己的方向折线和官方API示例

  //绘制路径
函数drawPath（path）{
 //显示高程路径的折线。 
 var pathOptions = {
 path：path，
 strokeColor：'＃0000CC'，
 strokeWeight：5，
 opacity：0.4，
 map：map 
} 
 routePolyline = new google.maps.Polyline（pathOptions）; 
} 
  

然后在我添加的directionService请求中

  directionService.route（request，function（result，status）{
 var path = result.routes [0] .overview_path; 
 drawPath（路径）; 
}）; 
  

解决方案

你可以自己渲染多段线，并为其添加单击事件侦听器或向地图添加单击侦听器。

$ b 代码段：

var infowindow = new google.maps.InfoWindow（）; var directions = new google.maps .DirectionsService（）; var renderer = new google.maps.DirectionsRenderer（{suppressPolylines：true，infoWindow：infowindow，}）; var map; function initialize（）{var mapOptions = {zoom：13，center：new google.maps.LatLng（40.7482333，-73.8681295）， mapTypeId：google.maps.MapTypeId.ROADMAP}; map = new google.maps.Map（document.getElementById（'map'），mapOptions）; google.maps.event.addDomListener（document.getElementById（'go'），'click'，route）; var input = document.getElementById（'from'）; var autocomplete = new google.maps.places.Autocomplete（input）; autocomplete.bindTo（'bounds'，map）; route（）;} function route（）{var request = {origin：document.getElementById（'from'）。value，destination：'51 St，New York，NY 10022，USA'，travelMode：google.maps.DirectionsTravelMode。步行 }; var panel = document.getElementById（'panel'）; panel.innerHTML =''; directions.route（request，function（response，status）{if（status == google.maps.DirectionsStatus.OK）{renderer.setDirections（response）; renderer.setMap（map）; renderer.setPanel（panel）; renderDirectionsPolylines（ response）; console.log（renderer.getDirections（））;} else {renderer.setMap（null）; renderer.setPanel（null）;}}）;} var polylineOptions = {strokeColor：'＃C83939'，strokeOpacity：1 ，strokeWeight：4}; var polylines = []; function renderDirectionsPolylines（response）{for（var i = 0; i< polylines.length; i ++）{polylines [i] .setMap（null）; } var legs = response.routes [0] .legs; for（i = 0; i< legs.length; i ++）{var steps = legs [i] .steps; for（j = 0; j html，body {height：100％;填充：0;保证金：0;颜色：黑色; font-family：arial，sans-serif; font-size：13px;}＃map {position：absolute; top：0;底部：0;左：0;右：50％;}＃panel-wpr {position：absolute; top：0;底部：0;剩下：50％;正确：0; overflow：auto;}＃panel {font-family：arial; padding：0 5px;}＃info {padding：5px;}＃from {width：90％; font-size：1.2em;}。adp-directions {width：100％;}。input {background-color：white; padding-left：8px; border：1px solid＃D9D9D9; border-top：1px纯银; -webkit-border-radius：1px; -moz-border-radius：1px; border-radius：1px;}。time {margin：0; height：17px; border：1px solid;边框顶部颜色：#CCC;边界 - 右边颜色：＃999;边界 - 左边的颜色：＃999; border-bottom-color：#CCC; padding：2px 15px 1px 1px;} button {border：1px solid＃3079ED;白颜色;背景颜色：＃4D90FE; background-image：-webkit-gradient（线性，左上，左下，从（＃4D90FE）到（＃4787ED））; background-image：-webkit-linear-gradient（top，＃4D90FE，＃4787ED）; background-image：-moz-linear-gradient（top，＃4D90FE，＃4787ED）; background-image：-ms-linear-gradient（top，＃4D90FE，＃4787ED）; background-image：-o-linear-gradient（top，＃4D90FE，＃4787ED）; background-image：线性渐变（顶部，＃4D90FE，＃4787ED）; filter：progid：DXImageTransform.Microsoft.gradient（startColorStr ='＃4d90fe'，EndColorStr ='＃4787ed'）;显示：inline-block; min-width：54px; text-align：center; font-weight：bold; padding：0 8px; line-height：27px; -webkit-border-radius：2px; -moz-border-radius：2px; border-radius：2px; -webkit-transition：全部为0.218s; -moz-transition：全部为0.218s; -o-transition：全部为0.218s; transition：all 0.218s;}＃info div {line-height：22px; font-size：110％;}。btn {}＃panel-wpr {border-left：1px solid＃e6e6e6;}＃info {border-bottom：1px solid＃E6E6E6; margin-bottom：5px;} h2 {margin：0; padding：0;} < script src =https ：//maps.googleapis.com/maps/api/js？libraries = places>< / script>< title> Google Maps JavaScript API v3示例：Transit< / title>< div id = WPR> < button id =transit>切换转接层< / button>< / div>< div id =map>< / div>< div id =panel-wpr> < div id =info> < DIV> <标签>从：其中/标签> < input class =inputid =fromvalue =Grand Central 42，NY> < / DIV> < DIV> <标签>到：其中/标签> < strong> 51 St，纽约，纽约10022，美国< / strong> < / DIV> < div class =btn> < button id =go>获取路线< / button> < / DIV> < / DIV> < div id =panel>< / div>< / div>

I'm trying to draw a circle wherever I click on the route. I looked for a solution on how to make a route clickable and couldn't find anything helpful... Below is my code. I get no errors when I click on the route but no circle is created.

directionsDisplay = new google.maps.DirectionsRenderer(rendererOptions);

//direction service request here...

google.maps.event.addListener(directionsDisplay, 'click', function(event) {

var routeClick = new google.maps.Circle({
  center: event.latLng, //center where you click
  radius: 500,
  strokeColor: "#0000FF",
  strokeOpacity: 0.8,
  strokeWeight: 2,
  fillColor: "#0000FF",
  fillOpacity: 0.4
});

routeClick.setMap(map);

});

UPDATE:

Working code to create your own directions polyline based on Geocodezip's script http://www.geocodezip.com/v3_directions_custom_iconsC.html and official API example https://developers.google.com/maps/documentation/javascript/examples/elevation-paths

    // Draw the path
    function drawPath(path) {
      // Display a polyline of the elevation path.
      var pathOptions = {
        path: path,
        strokeColor: '#0000CC',
        strokeWeight: 5,
        opacity: 0.4,
        map: map
      }
      routePolyline = new google.maps.Polyline(pathOptions);
    }

then in the directionService request I added

directionService.route(request, function(result, status) {
  var path = result.routes[0].overview_path;
  drawPath(path);
});

解决方案

There is no 'click' event on the DirectionsRenderer

you can render the polyline yourself and add a click event listener to it or add a click listener to the map.

Example of a custom directions renderer

proof of concept fiddle

code snippet:

var infowindow = new google.maps.InfoWindow();
var directions = new google.maps.DirectionsService();
var renderer = new google.maps.DirectionsRenderer({
  suppressPolylines: true,
  infoWindow: infowindow,
});
var map;

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

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

  google.maps.event.addDomListener(document.getElementById('go'), 'click',
    route);

  var input = document.getElementById('from');
  var autocomplete = new google.maps.places.Autocomplete(input);
  autocomplete.bindTo('bounds', map);
  route();
}

function route() {
  var request = {
    origin: document.getElementById('from').value,
    destination: '51 St, New York, NY 10022, USA',
    travelMode: google.maps.DirectionsTravelMode.WALKING
  };

  var panel = document.getElementById('panel');
  panel.innerHTML = '';
  directions.route(request, function(response, status) {
    if (status == google.maps.DirectionsStatus.OK) {
      renderer.setDirections(response);
      renderer.setMap(map);
      renderer.setPanel(panel);
      renderDirectionsPolylines(response);
      console.log(renderer.getDirections());
    } else {
      renderer.setMap(null);
      renderer.setPanel(null);
    }

  });

}

var polylineOptions = {
  strokeColor: '#C83939',
  strokeOpacity: 1,
  strokeWeight: 4
};
var polylines = [];
function renderDirectionsPolylines(response) {
  for (var i=0; i<polylines.length; i++) {
    polylines[i].setMap(null);
  }
  var legs = response.routes[0].legs;
  for (i = 0; i < legs.length; i++) {
    var steps = legs[i].steps;
    for (j = 0; j < steps.length; j++) {
      var nextSegment = steps[j].path;
      var stepPolyline = new google.maps.Polyline(polylineOptions);
      for (k = 0; k < nextSegment.length; k++) {
        stepPolyline.getPath().push(nextSegment[k]);
      }
      polylines.push(stepPolyline);
      stepPolyline.setMap(map);
      // route click listeners, different one on each step
      google.maps.event.addListener(stepPolyline, 'click', function(evt) {
        infowindow.setContent("you clicked on the route<br>" + evt.latLng.toUrlValue(6));
        infowindow.setPosition(evt.latLng);
        infowindow.open(map);
      })
    }
  }
}
google.maps.event.addDomListener(window, 'load', initialize);

html,
body {
  height: 100%;
  padding: 0;
  margin: 0;
  color: black;
  font-family: arial, sans-serif;
  font-size: 13px;
}
#map {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 50%;
}
#panel-wpr {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  right: 0;
  overflow: auto;
}
#panel {
  font-family: arial;
  padding: 0 5px;
}
#info {
  padding: 5px;
}
#from {
  width: 90%;
  font-size: 1.2em;
}
.adp-directions {
  width: 100%;
}
.input {
  background-color: white;
  padding-left: 8px;
  border: 1px solid #D9D9D9;
  border-top: 1px solid silver;
  -webkit-border-radius: 1px;
  -moz-border-radius: 1px;
  border-radius: 1px;
}
.time {
  margin: 0;
  height: 17px;
  border: 1px solid;
  border-top-color: #CCC;
  border-right-color: #999;
  border-left-color: #999;
  border-bottom-color: #CCC;
  padding: 2px 15px 1px 1px;
}
button {
  border: 1px solid #3079ED;
  color: white;
  background-color: #4D90FE;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#4D90FE), to(#4787ED));
  background-image: -webkit-linear-gradient(top, #4D90FE, #4787ED);
  background-image: -moz-linear-gradient(top, #4D90FE, #4787ED);
  background-image: -ms-linear-gradient(top, #4D90FE, #4787ED);
  background-image: -o-linear-gradient(top, #4D90FE, #4787ED);
  background-image: linear-gradient(top, #4D90FE, #4787ED);
  filter: progid: DXImageTransform.Microsoft.gradient(startColorStr='#4d90fe', EndColorStr='#4787ed');
  display: inline-block;
  min-width: 54px;
  text-align: center;
  font-weight: bold;
  padding: 0 8px;
  line-height: 27px;
  -webkit-border-radius: 2px;
  -moz-border-radius: 2px;
  border-radius: 2px;
  -webkit-transition: all 0.218s;
  -moz-transition: all 0.218s;
  -o-transition: all 0.218s;
  transition: all 0.218s;
}
#info div {
  line-height: 22px;
  font-size: 110%;
}
.btn {} #panel-wpr {
  border-left: 1px solid #e6e6e6;
}
#info {
  border-bottom: 1px solid #E6E6E6;
  margin-bottom: 5px;
}
h2 {
  margin: 0;
  padding: 0;
}

<script src="https://maps.googleapis.com/maps/api/js?libraries=places"></script>
<title>Google Maps JavaScript API v3 Example: Transit</title>
<div id="transit-wpr">
  <button id="transit">Toggle transit layer</button>
</div>
<div id="map"></div>
<div id="panel-wpr">
  <div id="info">
    <div>
      <label>from:</label>
      <input class="input" id="from" value="Grand Central 42, NY">
    </div>
    <div>
      <label>to:</label>
      <strong>51 St, New York, NY 10022, USA</strong>
    </div>
    <div class="btn">
      <button id="go">Get Directions</button>
    </div>
  </div>
  <div id="panel"></div>
</div>

这篇关于Google地图点击路线上的事件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！