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