我正在尝试使用谷歌地图在地图上显示线条并使这些线条可以点击。
这些线条将在Illustrator中绘制,导出为SVG,然后使用地面叠加功能导入到谷歌地图。这一切都正常。
我无法实现的只是让SVG中的行可点击。目前,整个SVG都是可点击的,包括它周围的所有透明背景。
这是一个小提琴:https://jsfiddle.net/95k49teu/21/
$( document ).ready(function() {
initMap();
});
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 13,
center: {lat: 40.740, lng: -74.18}
});
// GPS coordinates in degrees: A, A and B, B
var imageBounds = {
north: 40.773941, // A
south: 40.712216, // B
east: -74.12544, // A
west: -74.22655 // B
};
// Loop over all routes
var myOverlay;
myOverlay = new google.maps.GroundOverlay(
'http://setec-astro.website/line1.svg',
imageBounds);
myOverlay.setMap(map);
}
尚未实施点击事件,但您的鼠标光标将显示可点击的区域(红线周围的方形区域)
将红线可点击的最佳方法是什么?我不确定是否应该更改SVG标记,或者我是否可以使用一些javascript和google maps API来执行此操作?
SVG看起来只是XML,所以如果我可以定义某种逻辑来编辑PHP后端的SVG文件,那就没问题了。