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

Google maps var city map areas clickable

本文关键字：区域 var 城市地图 谷歌地图      更新时间：2023-09-26

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

    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 ?我想让用户通过点击到一个网页。我对这方面比较陌生，所以任何建议都将非常欢迎。

您可以将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
});


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);
html, body, #map-canvas {
            height: 100%;
            margin: 0px;
            padding: 0px;
 }
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&signed_in=true"></script>
<div id="map-canvas"></div>

JSFiddle

您可以使用本链接中google.maps.Circle的click功能

点击参数:MouseEvent

当DOM click事件在圆圈上被触发时，该事件被触发。

相关文章：