您可以在谷歌地图上叠加可点击的形状，以便在网站上显示(Can you overlay clickable shapes over a google map for display on website

您可以在谷歌地图上叠加可点击的形状，以便在网站上显示(Can you overlay clickable shapes over a google map for display on website)

我希望在我的网站上有一个谷歌地图，上面覆盖着矩形形状，然后可以点击它以打开链接。矩形形状与建筑物有关，因此较大的建筑物将覆盖较大的形状。

显然，形状与地图的某个区域有关，因此在缩小时会减小尺寸，并在放大时增加。

这可能是谷歌api，我可以这样做吗？

I want to have a google map on my website overlaid with rectangular shapes that can then be clicked onto to open a link. The rectangular shapes relate to buildings, so a larger building would be overlaid with a larger shape.

Clearly the shapes relate to an area of the map so would reduce in size as you zoomed out, and increase as you zoom in.

Is this possible with a google api, Can I do this ?

最满意答案

是的，您可以使用GoogleMaps API制作可点击的形状，

您必须在数组中定义形状的纬度和经度点，如下所示：

var StackExchangeNYLatLon = [ {lat: 40.708788, lon: -74.006676}, {lat: 40.708808, lon: -74.006822}, {lat: 40.709009, lon: -74.006582}, {lat: 40.708963, lon: -74.006515} ];

为地图填充div元素，

然后定义map （将div id和options作为参数添加到new google.maps.Map ）：

map = new google.maps.Map(document.getElementById('your-div-id'), { zoom: 5, center: {lat: 40.709009, lon: -74.006582}, //This is the one of the provided above mapTypeId: google.maps.MapTypeId.TERRAIN });

然后，构造多边形并设置map ：

var StackExchangeNYHeadquarters = new google.maps.Polygon({ paths: StackExchangeNYLatLon, strokeColor: 'blue', strokeOpacity: 0.8, strokeWeight: 3, fillColor: 'blue', fillOpacity: 0.35 }); StackExchangeNYHeadquarters.setMap(map);

如果你想要一个标记，你可以改为使用以下代码：

var marker = new google.maps.Marker({ position: options.latLonData, map: map, title: 'My House' });

现在，将eventListener添加到多边形：这是您定义单击形状时发生的事情的部分，您可以直接打开链接，或打开一个包含您可以填充的内容的漂亮小对话框。

如果你想打开一个链接你可以有document.location.href ，而如果你想要内容，你需要将一个contentString附加到infoWindow 。

StackExchangeNYHeadquarters.addListener('click', function(event){ document.location.href = 'http://example.com/mylink/'; });

现在，制作infoWindow ：

infoWindow = new google.maps.InfoWindow;

所有上述代码都应该包装在一个callback处理程序中，该处理程序作为API调用中的查询字符串传递：

所以上面的代码应该是这样的：

您可以将回调附加到工厂，这样就可以一次创建许多元素，而不需要为每个位置分配500个单独的函数。

Yes, you can make clickable shapes with the GoogleMaps API,

You have to define the latitude and longitude points of the shape in an array, like the following:

var StackExchangeNYLatLon = [ {lat: 40.708788, lon: -74.006676}, {lat: 40.708808, lon: -74.006822}, {lat: 40.709009, lon: -74.006582}, {lat: 40.708963, lon: -74.006515} ];

Make a div element for the map to populate,

Then define the map (with the div id and options as parameters into new google.maps.Map):

map = new google.maps.Map(document.getElementById('your-div-id'), { zoom: 5, center: {lat: 40.709009, lon: -74.006582}, //This is the one of the provided above mapTypeId: google.maps.MapTypeId.TERRAIN });

Then, construct the polygon and set the map:

var StackExchangeNYHeadquarters = new google.maps.Polygon({ paths: StackExchangeNYLatLon, strokeColor: 'blue', strokeOpacity: 0.8, strokeWeight: 3, fillColor: 'blue', fillOpacity: 0.35 }); StackExchangeNYHeadquarters.setMap(map);

If you wanted a marker you could do the following code instead:

var marker = new google.maps.Marker({ position: options.latLonData, map: map, title: 'My House' });

Now, add an eventListener to the polygon: This is the part where you define what happens when you click the shape, You could make it directly open the link, or open a nice little dialog box with content you can fill.

If you wanted to open a link you could have document.location.href, whereas if you wanted content, you'd need to append a contentString to the infoWindow.

StackExchangeNYHeadquarters.addListener('click', function(event){ document.location.href = 'http://example.com/mylink/'; });

and now, make the infoWindow:

infoWindow = new google.maps.InfoWindow;

All of the above code should be wrapped in a callback handler that is passed along as a query string in the API call:

So the above code should look like:

You could attach the callback to a factory, so that a lot of elements can be created at once without 500 individual functions for each location.

更多推荐