显示大陆地图和放大显示国家
在我的网页中的联系部分我想添加交互式谷歌地图。 想法是，在加载用户可以看到大陆 显示大陆地图和放大显示国家
和所有地图时，在大陆的用户点击，地图自动缩放
而且用户可以在任何该国的点击得到一些事件（在我的例子警报）
这是怎么做到这一点，但我不知道如何在不同的大洲和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");
}
});
回答：
在点击事件，你可以只设置map.setZoom(4);拿到地图进行放大。
你可以查看到if (geometries) {}，我认为这是有行会outdrawn。如果你评论说线路消失了。像现在一样，在孔MAP上设置点击事件而不是COUNTRY。并设置像if(map.zoom === 4){ //add the country lines};。希望这会引导你在接近答案的某个方向。
if语句错误。改变它，否则如果这样的陈述是这样的：
if(this.name =="Brazil"){ alert("Brazil");
} else if(this.name =="Croatia"){
alert("Croatia");
} else if(this.name =="Russia"){
alert("Russia");
} else {
alert("Send Us mail");
}
以上是 显示大陆地图和放大显示国家 的全部内容， 来源链接： utcz.com/qa/261750.html
