路线上的谷歌地图点击事件 [英] Google Maps click event on route

查看：22
本文介绍了路线上的谷歌地图点击事件的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我试图在我点击路线的任何地方画一个圆圈.我寻找了一个关于如何使路线可点击的解决方案，但找不到任何有用的东西......下面是我的代码.单击路线时没有出现错误，但没有创建圆圈.

directionsDisplay = new google.maps.DirectionsRenderer(rendererOptions);//这里的方向服务请求...google.maps.event.addListener(directionsDisplay, 'click', function(event) {var routeClick = new google.maps.Circle({center: event.latLng,//点击的中心半径:500，strokeColor: "#0000FF",中风不透明度:0.8，行程重量:2，填充颜​​色:#0000FF"，填充不透明度:0.4});routeClick.setMap(地图);});

更新:

根据 Geocodezip 的脚本创建您自己的路线折线的工作代码 http://www.geocodezip.com/v3_directions_custom_iconsC.html 和官方 API 示例 https://developers.google.com/maps/documentation/javascript/示例/海拔路径

//绘制路径函数 drawPath(path) {//显示高程路径的折线.var pathOptions = {路径:路径，strokeColor: '#0000CC',行程重量:5，不透明度:0.4，地图:地图}routePolyline = new google.maps.Polyline(pathOptions);}

然后在我添加的 directionService 请求中

directionService.route(request, function(result, status) {var path = result.routes[0].overview_path;绘制路径(路径)；});

解决方案

DirectionsRenderer

您可以自己渲染折线并向其添加点击事件侦听器或向地图添加点击侦听器.

自定义路线渲染器示例

概念证明小提琴

代码片段:

var infowindow = new google.maps.InfoWindow();var 方向 = 新的 google.maps.DirectionsService();var 渲染器 = 新的 google.maps.DirectionsRenderer({抑制折线:真，信息窗口:信息窗口，});无功地图；函数初始化(){var mapOptions = {缩放:13，中心:新的 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',路线);var input = document.getElementById('from');var autocomplete = new google.maps.places.Autocomplete(input);autocomplete.bindTo('bounds', map);路线();}功能路线(){无功请求 = {来源:document.getElementById('from').value,目的地:'51 St, New York, NY 10022, USA',旅行模式:google.maps.DirectionsTravelMode.WALKING};var panel = document.getElementById('panel');panel.innerHTML = '';路线(请求，功能(响应，状态){如果(状态 == google.maps.DirectionsStatus.OK){renderer.setDirections(响应)；renderer.setMap(map);渲染器.setPanel(面板)；renderDirectionsPolylines(响应)；console.log(renderer.getDirections());} 别的 {renderer.setMap(null);renderer.setPanel(null);}});}var polylineOptions = {strokeColor: '#C83939',中风不透明度:1，行程重量:4};var 折线 = [];功能renderDirectionsPolylines(响应){for (var i=0; i" + evt.latLng.toUrlValue(6));infowindow.setPosition(evt.latLng);infowindow.open(地图)；})}}}google.maps.event.addDomListener(window, 'load', initialize);

html,身体 {高度:100%；填充:0；边距:0；颜色:黑色;字体系列:arial、sans-serif；字体大小:13px；}#地图 {位置:绝对；顶部:0；底部:0；左:0；正确:50%；}#panel-wpr {位置:绝对；顶部:0；底部:0；左:50%；右:0；溢出:自动；}#控制板 {字体系列:arial；填充:0 5px；}#信息{填充:5px；}#从 {宽度:90%；字体大小:1.2em；}.adp-方向{宽度:100%；}.输入 {背景颜色:白色；左边距:8px；边框:1px 实心 #D9D9D9;边框顶部:1px纯银；-webkit-border-radius: 1px;-moz-border-radius: 1px;边框半径:1px；}.时间 {边距:0；高度:17px；边框:1px 实心；边框顶部颜色:#CCC；边框右颜色:#999；左边框颜色:#999；边框底部颜色:#CCC；填充:2px 15px 1px 1px；}按钮 {边框:1px 实心 #3079ED；白颜色;背景色:#4D90FE；背景图像:-webkit-gradient(线性，左上，左下，从(#4D90FE)，到(#4787ED))；背景图像:-webkit-线性梯度(顶部，#4D90FE，#4787ED)；背景图像:-moz-线性渐变(顶部，#4D90FE，#4787ED)；背景图像:-ms-线性梯度(顶部，#4D90FE，#4787ED)；背景图像:-o-线性梯度(顶部，#4D90FE，#4787ED)；背景图像:线性渐变(顶部，#4D90FE，#4787ED)；过滤器:progid:DXImageTransform.Microsoft.gradient(startColorStr='#4d90fe', EndColorStr='#4787ed');显示:内联块；最小宽度:54px；文本对齐:居中；字体粗细:粗体；填充:0 8px；行高:27px；-webkit-border-radius: 2px;-moz-border-radius: 2px;边界半径:2px；-webkit-transition:全部为 0.218s；-moz-transition:全部为 0.218s；-o-transition:全部为 0.218s；过渡:全部为 0.218s；}#info div {行高:22px；字体大小:110%；}.btn {} #panel-wpr {左边框:1px 实心 #e6e6e6;}#信息{边框底部:1px 实心 #E6E6E6;底边距:5px；}h2{边距:0；填充:0；}

<script src="https://maps.googleapis.com/maps/api/js?libraries=places&key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></脚本><title>Google Maps JavaScript API v3 示例:公交</title><div id="transit-wpr"><button id="transit">切换交通层</button>

<div id="地图"></div><div id="panel-wpr"><div id="信息"><div><label>来自:</label><input class="input" id="from" value="Grand Central 42, NY">

<div><label>到:</label><strong>51 St, New York, NY 10022, USA</strong>

<div class="btn"><button id="go">获取路线</button>

<div id="面板"></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&key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></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>

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

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆