在美国地图中嵌入州轮廓图

时间:2017-01-10 18:17:53

标签: javascript google-maps google-maps-api-3

作为我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。

0 个答案:

没有答案