问题描述
我试图在我点击路线的任何地方画一个圆圈.我寻找了一个关于如何使路线可点击的解决方案,但找不到任何有用的东西......下面是我的代码.单击路线时没有出现错误,但没有创建圆圈.
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;绘制路径(路径);});
您可以自己渲染折线并向其添加点击事件侦听器或向地图添加点击侦听器.
代码片段:
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>