0
在我的网页中的联系部分我想添加交互式谷歌地图。 想法是，在加载用户可以看到大陆 
显示大陆地图和放大显示国家
和所有地图时，在大陆的用户点击，地图自动缩放 
而且用户可以在任何该国的点击得到一些事件（在我的例子警报）
这是怎么做到这一点，但我不知道如何在不同的大洲和countres和变焦
// the map
var map;
function initialize() {
var myOptions = {
zoom: 2,
center: new google.maps.LatLng(10, 0),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
// initialize the map
map = new google.maps.Map(document.getElementById('map-canvas'),
myOptions);
// these are the map styles
var styles = [
{
"featureType": "administrative",
"elementType": "all",
"stylers": [
{
"color": "#a8a8a8"
}
]
},
{
"featureType": "administrative.country",
"elementType": "geometry.fill",
"stylers": [
{
"visibility": "off"
}
]
},
{
"featureType": "administrative.country",
"elementType": "geometry.stroke",
"stylers": [
{
"visibility": "on"
}
]
},
{
"featureType": "administrative.country",
"elementType": "labels",
"stylers": [
{
"visibility": "off"
}
]
},
{
"featureType": "administrative.country",
"elementType": "labels.text",
"stylers": [
{
"visibility": "simplified"
}
]
},
{
"featureType": "administrative.country",
"elementType": "labels.text.fill",
"stylers": [
{
"visibility": "off"
}
]
},
{
"featureType": "administrative.country",
"elementType": "labels.icon",
"stylers": [
{
"visibility": "off"
}
]
},
{
"featureType": "administrative.province",
"elementType": "all",
"stylers": [
{
"visibility": "off"
}
]
},
{
"featureType": "administrative.province",
"elementType": "geometry",
"stylers": [
{
"visibility": "off"
}
]
},
{
"featureType": "administrative.locality",
"elementType": "all",
"stylers": [
{
"visibility": "off"
}
]
},
{
"featureType": "administrative.neighborhood",
"elementType": "all",
"stylers": [
{
"visibility": "off"
}
]
},
{
"featureType": "administrative.land_parcel",
"elementType": "all",
"stylers": [
{
"visibility": "off"
}
]
},
{
"featureType": "landscape",
"elementType": "all",
"stylers": [
{
"saturation": -100
},
{
"lightness": 60
},
{
"visibility": "on"
},
{
"color": "#e2e2e2"
}
]
},
{
"featureType": "poi",
"elementType": "all",
"stylers": [
{
"visibility": "off"
}
]
},
{
"featureType": "poi.park",
"elementType": "geometry.fill",
"stylers": [
{
"color": "#b6c54c"
},
{
"lightness": 40
},
{
"saturation": -40
}
]
},
{
"featureType": "road",
"elementType": "all",
"stylers": [
{
"visibility": "off"
}
]
},
{
"featureType": "road.highway",
"elementType": "geometry.fill",
"stylers": [
{
"color": "#ef8c25"
},
{
"lightness": 40
}
]
},
{
"featureType": "road.highway",
"elementType": "geometry.stroke",
"stylers": [
{
"visibility": "off"
}
]
},
{
"featureType": "road.local",
"elementType": "all",
"stylers": [
{
"saturation": -100
},
{
"lightness": 40
},
{
"visibility": "on"
}
]
},
{
"featureType": "transit",
"elementType": "all",
"stylers": [
{
"saturation": -100
},
{
"visibility": "off"
}
]
},
{
"featureType": "water",
"elementType": "all",
"stylers": [
{
"visibility": "simplified"
},
{
"lightness": 30
},
{
"color": "#ffffff"
},
{
"saturation": "16"
}
]
},
{
"featureType": "water",
"elementType": "labels",
"stylers": [
{
"visibility": "off"
}
]
}
]
map.setOptions({styles: styles});
// Initialize JSONP request
var script = document.createElement('script');
var url = ['https://www.googleapis.com/fusiontables/v1/query?'];
url.push('sql=');
var query = 'SELECT name, kml_4326 FROM ' +
'1foc3xO9DyfSIF6ofvN0kp2bxSfSeKog5FbdWdQ';
var encodedQuery = encodeURIComponent(query);
url.push(encodedQuery);
url.push('&callback=drawMap');
url.push('&key=AIzaSyAm9yWCV7JPCTHCJut8whOjARd7pwROFDQ');
script.src = url.join('');
var body = document.getElementsByTagName('body')[0];
body.appendChild(script);
}
function drawMap(data) {
var rows = data['rows'];
for (var i in rows) {
if (rows[i][0] != 'Antarctica') {
var newCoordinates = [];
var geometries = rows[i][1]['geometries'];
if (geometries) {
for (var j in geometries) {
newCoordinates.push(constructNewCoordinates(geometries[j]));
}
} else {
newCoordinates = constructNewCoordinates(rows[i][1]['geometry']);
}
var country = new google.maps.Polygon({
paths: newCoordinates,
strokeColor: '#a8a8a8',
strokeOpacity: 1,
strokeWeight: 0.3,
fillColor: '#a8a8a8',
fillOpacity: 0,
name: rows[i][0]
});
google.maps.event.addListener(country, 'mouseover', function() {
this.setOptions({fillOpacity: 0.4});
});
google.maps.event.addListener(country, 'mouseout', function() {
this.setOptions({fillOpacity: 0});
});
google.maps.event.addListener(country, 'click', function() {
if(this.name =="Brazil"){
alert("Brazil");
};
if(this.name =="Croatia"){
alert("Croatia");
};
if(this.name =="Russia"){
alert("Russia");
};
});
country.setMap(map);
}
}
}
function constructNewCoordinates(polygon) {
var newCoordinates = [];
var coordinates = polygon['coordinates'][0];
for (var i in coordinates) {
newCoordinates.push(
new google.maps.LatLng(coordinates[i][1], coordinates[i][0]));
}
return newCoordinates;
}
google.maps.event.addDomListener(window, 'load', initialize);#map-canvas {
height: 600px;
width: 800px;
}<div id="map-canvas"></div>这里工作jsfiddle
这就是我的想法AMCHARTS但我需要自由定制解决方案
而且也，在我的代码，你可以找到这个
google.maps.event.addListener(country, 'click', function() {
if(this.name =="Brazil"){
alert("Brazil");
};
if(this.name =="Croatia"){
alert("Croatia");
};
if(this.name =="Russia"){
alert("Russia");
};
});
为什么在这里，如果我添加ELSE代码不能正常工作
google.maps.event.addListener(country, 'click', function() {
if(this.name =="Brazil"){
alert("Brazil");
};
if(this.name =="Croatia"){
alert("Croatia");
};
if(this.name =="Russia"){
alert("Russia");
};
else{
alert("Send Us mail");
}
});
Thnx @Johan。我真的不知道为什么我的其他人不工作，但你的代码正在工作:)如果在hhh之前，我也会尝试其他方法。 – Arter
错误在于你上次的'if'有';'。所以它不能重新获得'else'。如果你删除了最后一个';'就可以了。所以你不需要'else if {}'，但我认为这是很好的做法，所以其他人可以很容易地阅读代码:) –
该死的，一个工作了几个星期的后果。 Thnx队友 – Arter