谷歌地圖var城市地圖區域可點擊

我正在爲客戶端生成谷歌地圖。即時通訊使用下面的代碼來生成地圖上的區域：谷歌地圖var城市地圖區域可點擊

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到該區域？我想讓用戶點擊進入網頁。我相對較新，所以任何建議都會在這方面受到極大的好評。

來源

2015-09-07 Keith Riches

一個jsFiddle將不勝感激 –

這是我的工作： http://jsfiddle.net/keithriches/b1wcgo2n/1/ –

您可以使用google.maps.Circle爲目前click功能this link

點擊參數：的MouseEvent

當DOM click事件在圈內引發此事件。

希望得到這個幫助。

來源

2015-09-07 09:08:41

感謝您的這一點。我期望在地圖上有多個圈子，例如： citymap ['Thetford'] = { center：new google.maps.LatLng（52.415835,0.751978） }; citymap ['Brandon'] = { center：new google.maps.LatLng（52.447862,0.622404） }; 因爲我對所有這些都很陌生，是否將點擊功能添加到每個區域？ –

是的，當然。 Vadim Gremyachev的回答已經解決了你的問題:)。這是被接受的答案+1 ^^ –

如果我在這裏錯過了某些東西但是我無法看到這是如何工作的道歉？任何人都可以提供一個jsfiddle這個工作？ –

您可以附加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

來源

2015-09-07 09:29:02

感謝您的點擊次數似乎不工作？ –

谷歌地圖var城市地圖區域可點擊

回答

相關問題