谷歌可以点击var城市地图区域

Question

我为客户生成谷歌地图。我使用以下代码在地图上生成一个区域：

    citymap['Brandon'] = {
    center: new google.maps.LatLng(52.447862, 0.622404)
    };

然后我使用以下内容来设置样式：

    for (var city in citymap) {
    var Options = {
    strokeColor: '#00AEEF',
    strokeOpacity: 0.8,
    strokeWeight: 2,
    fillColor: '#00AEEF',
    fillOpacity: 0.35,
    map: map,
    center: citymap[city].center,
    radius: 10000
  };
  // Add the circle for this city to the map.
  cityCircle = new google.maps.Circle(Options);
}

我想知道是否有人可以建议如何在该区域添加href？我想让用户点击进入网页。我相对较新，所以任何建议都会受到很大的关注。

Answer 1

您可以将click事件附加到google.maps.Circle对象以打开如下链接：

google.maps.event.addListener(cityCircle, 'click', function (ev) {
        //window.location.href = "http://www1.nyc.gov/";
        window.open('http://www1.nyc.gov/','_blank');  //open link in a new window/tab
});

示例

＆＃13;

＆＃13;

function initialize() {

    var citymap = {};
    citymap['NewYork'] = { center: new google.maps.LatLng(40.712942, -74.002340), url: 'http://www1.nyc.gov/' };
    citymap['SanFrancisco'] = { center: new google.maps.LatLng(37.764486, -122.420434), url: 'http://sfgov.org/' };

    // Create the map.
    var mapOptions = {
        zoom: 4,
        center: new google.maps.LatLng(40.712942, -74.002340),
        mapTypeId: google.maps.MapTypeId.TERRAIN
    };

    var map = new google.maps.Map(document.getElementById('map-canvas'),
        mapOptions);

    for(var key in citymap){

        var city = citymap[key];
        var options = {
            strokeColor: '#FF0000',
            strokeOpacity: 0.8,
            strokeWeight: 2,
            fillColor: '#FF0000',
            fillOpacity: 0.05,
            map: map,
            center: city.center,
            radius: 100000
        };


        var cityCircle = new google.maps.Circle(options);

        (function(city) {
            google.maps.event.addListener(cityCircle, 'click', function(ev) {
                //window.location.href = city.url;
                window.open(city.url, '_blank'); //open link in a new window
            });
        })(city);

    }

}

google.maps.event.addDomListener(window, 'load', initialize);

＆＃13;

html, body, #map-canvas {
            height: 100%;
            margin: 0px;
            padding: 0px;
 }

＆＃13;

<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&signed_in=true"></script>
<div id="map-canvas"></div>

＆＃13;

＆＃13;

＆＃13;

JSFiddle

Answer 2

您可以使用this link中的click google.maps.Circle函数

  

单击Arguments：MouseEvent

     

在圈子上触发DOM点击事件时会触发此事件。

希望得到这个帮助。