Question

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

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

谷歌api可以实现吗？我可以这样做吗？

Answer 1

是的，您可以使用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和选项作为参数定义为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调用中的查询字符串传递：

<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&signed_in=true&callback=startMap"></script>

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

function startMap(options){
    var latLonData = options.latLonData;
    var map = new google.maps.Map(document.getElementById('your-div-id'), {
        zoom: 5,
        center: options.center,
        mapTypeId: google.maps.MapTypeId.TERRAIN
    });
    var polygon = new google.maps.Polygon({
        paths: StackExchangeNYLatLon,
        strokeColor: 'blue',
        strokeOpacity: 0.8,
        strokeWeight: 3,
        fillColor: 'blue',
        fillOpacity: 0.35
    });
    polygon.setMap(map);
    polygon.addListener('click', , function(event){
        document.location.href = 'http://example.com/mylink/';
    });
    var infoWindow = new google.maps.InfoWindow;
}
function StackExchangeHeadquartersBuild(){
    options = {
        latlonData: [
            {lat: 40.708788, lon: -74.006676},
            {lat: 40.708808, lon: -74.006822},
            {lat: 40.709009, lon: -74.006582},
            {lat: 40.708963, lon: -74.006515}
        ],
        center: {lat: 40.709009, lon: -74.006582}
    };
    startMap(options);
}

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

您可以在谷歌地图上叠加可点击的形状，以便在网站上显示

1 个答案: