我为客户生成谷歌地图。我使用以下代码在地图上生成一个区域:
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?我想让用户点击进入网页。我相对较新,所以任何建议都会受到很大的关注。
答案 0 :(得分:2)
您可以将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>
&#13;
答案 1 :(得分:1)