在我的网页上的“联系”部分，我想添加交互式谷歌地图。
想法是，加载时用户可以看到所有有大陆的 map
当用户点击大陆时， map 会自动放大
用户可以点击这个国家/地区的任何一个来获取一些事件(在我的示例警报中)
这就是我这样做的方法，但我不知道如何区分大陆和国家并放大
// 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);即可放大 map 。
你可以查看if (geometries) {}，我认为线条将在那里被拉出来。如果你注释掉这些行就会消失。在洞 map 上设置点击事件，而不是像现在一样在国家/地区上设置。并设置类似 if(map.zoom === 4){//add the Country Line}; 的内容。希望这能引导您朝着更接近答案的方向前进。
if语句错误。将其更改为 else 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");
}
关于javascript - 显示大陆 map 并缩放显示国家/地区，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/47864607/