作为我question last week的后续内容,我想在我的地图中嵌入状态地图大纲(印第安纳州),我尝试了几种方法并用Google搜索了许多不同的方法。最接近我发现在谷歌上嵌入一个大纲我已经在SO上提出了一个问题并得到了一个JSFiddle响应,感谢geocodezip,但我不能将它添加到我的美国地图。我在这里的状态映射大纲的链接中有Java脚本代码,但是我附加的代码无论出于何种原因我都无法添加大纲代码,尽管广泛地摆弄它。
因此不允许我上传我的航线图像。我已经坚持了几个星期,并希望将状态轮廓图嵌入这个小提琴中。
function myMap() {
var dfw = new google.maps.LatLng(32.899809, -97.040335);
var yul = new google.maps.LatLng(45.469738, -73.744919);
var mapCanvas = document.getElementById("map");
var mapOptions = {
center: dfw,
zoom: 4
};
var map = new google.maps.Map(mapCanvas, mapOptions);
var marker = new google.maps.Marker({
position: dfw,
animation: google.maps.Animation.BOUNCE,
title: 'Click to zoom'
});
marker.setMap(map);
google.maps.event.addListener(marker, 'click', function() {
var infowindow = new google.maps.InfoWindow({
content: "DFW International Airport!"
});
infowindow.open(map, marker);
});
var marker2 = new google.maps.Marker({
position: yul,
icon: "pinkball.png",
animation: google.maps.Animation.BOUNCE,
title: 'Click to zoom'
});
marker2.setMap(map);
google.maps.event.addListener(marker2, 'click', function() {
var infowindow = new google.maps.InfoWindow({
content: "Montréal–Pierre Elliott Trudeau International Airport!"
});
infowindow.open(map, marker2);
});
marker.addListener('click', function() {
map.setZoom(15);
map.setCenter(marker.getPosition());
});
marker.setMap(map);
marker2.addListener('click', function() {
map.setZoom(15);
map.setCenter(marker2.getPosition());
});
marker2.setMap(map);
var flightPath = new google.maps.Polyline({
path: [dfw, yul],
strokeColor: "#0000FF",
strokeOpacity: 0.8,
strokeWeight: 2
});
flightPath.setMap(map);
}
Here是我想在页面中嵌入的大纲的JSFiddle。