如何在Google Maps API-v3中组合两个或多个叠加层

时间：2014-12-16 13:11:03

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

我创建了两个单独运行的单独文件。单击“Drop Turbines”框后，可以使用下拉图标加载谷歌地图。另一个文件加载谷歌地图并绘制20英里的环形半径。当我尝试将两者结合起来时，只有一个工作或整个事情挂起。有人可以帮忙吗我是编程新手。下面显示的组合代码运行谷歌地图，然后绘制圆圈，但下拉图标不会出现。

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <title>CirclesMarker animations with <code>setTimeout()</code></title>
    <style>
     html, body, #map-canvas {
        height: 750px;
    width: 1010px;
        margin-left: 120px; margin-top: 20px;
        padding: 0px
      }
    #panel {
        position: absolute; width 100px; height 25px;
        top: 65px;
        left: 68%;
        z-index: 5;
        background-color: #fff;
        padding: 5px;
        border: 1px solid #999;
      }
    </style>
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>
    <script>

  var placemap = {};
  placemap['fenton'] = {
    center: new google.maps.LatLng(53.047687, -0.688523),
    population: 120
  };

  var placeCircle;

  var locations = [
    new google.maps.LatLng(53.044680, -0.675398),
    new google.maps.LatLng(53.049159, -0.670971),
    new google.maps.LatLng(53.054110, -0.664277),
    new google.maps.LatLng(53.057157, -0.660745),
    new google.maps.LatLng(53.056767, -0.655040),
    new google.maps.LatLng(53.053591, -0.660949),
    new google.maps.LatLng(53.050765, -0.660348),
    new google.maps.LatLng(53.047681, -0.659188),
    new google.maps.LatLng(53.043154, -0.654878),
    new google.maps.LatLng(53.043695, -0.659211),
    new google.maps.LatLng(53.044508, -0.662924),
    new google.maps.LatLng(53.046134, -0.666785),
    new google.maps.LatLng(53.049939, -0.665885),
    new google.maps.LatLng(53.014957, -0.678112),
    new google.maps.LatLng(53.018575, -0.679691),
    new google.maps.LatLng(53.014892, -0.669833),
    new google.maps.LatLng(53.018428, -0.674398),
    new google.maps.LatLng(53.013147, -0.684684),
    new google.maps.LatLng(53.048850, -0.790458),
    new google.maps.LatLng(53.039768, -0.806422),
    new google.maps.LatLng(53.036749, -0.807216),
    new google.maps.LatLng(52.981730, -0.630449)
  ];

  var Tmarkers = [
    'GoogleMapsMarkers/Google Maps Markers/windturbinePALEBLUE.png',
    'GoogleMapsMarkers/Google Maps Markers/windturbinePALEBLUE.png',
    'GoogleMapsMarkers/Google Maps Markers/windturbinePALEBLUE.png',
    'GoogleMapsMarkers/Google Maps Markers/windturbinePALEBLUE.png',
    'GoogleMapsMarkers/Google Maps Markers/windturbinePALEBLUE.png',
    'GoogleMapsMarkers/Google Maps Markers/windturbinePALEBLUE.png',
    'GoogleMapsMarkers/Google Maps Markers/windturbinePALEBLUE.png',
    'GoogleMapsMarkers/Google Maps Markers/windturbinePALEBLUE.png',
    'GoogleMapsMarkers/Google Maps Markers/paleblue_MarkerA.png',
    'GoogleMapsMarkers/Google Maps Markers/windturbinePALEBLUE.png',
    'GoogleMapsMarkers/Google Maps Markers/windturbinePALEBLUE.png',
    'GoogleMapsMarkers/Google Maps Markers/windturbinePALEBLUE.png',
    'GoogleMapsMarkers/Google Maps Markers/windturbinePALEBLUE.png',
    'GoogleMapsMarkers/Google Maps Markers/windturbineORANGE.png',
    'GoogleMapsMarkers/Google Maps Markers/windturbineORANGE.png',
    'GoogleMapsMarkers/Google Maps Markers/windturbineORANGE.png',
    'GoogleMapsMarkers/Google Maps Markers/windturbineORANGE.png',
    'GoogleMapsMarkers/Google Maps Markers/orange_MarkerB.png',
    'GoogleMapsMarkers/Google Maps Markers/windturbineMAGENTA.png',
    'GoogleMapsMarkers/Google Maps Markers/windturbineMAGENTA.png',
    'GoogleMapsMarkers/Google Maps Markers/purple_MarkerC.png',
    'GoogleMapsMarkers/Google Maps Markers/red_MarkerD.png'
  ];

  var iterator = 0;

  var PumpLane = new google.maps.LatLng(53.047687, -0.688523);


function initialize() {
//Create the map.
  var mapOptions = {
    zoom: 10,
    center: new google.maps.LatLng(53.047687, -0.688523),
    mapTypeId: google.maps.MapTypeId.ROAD
  };

  var map = new google.maps.Map(document.getElementById('map-canvas'),
      mapOptions);

// Construct the circle for each value in placemap.
  for (var place in placemap) {
    var placeOptions = {
      strokeColor: '#FF0000',
      strokeOpacity: 0.5,
      strokeWeight: 1.0,
      fillColor: '#CC99CC',
      fillOpacity: 0.1,
      map: map,
      center: placemap[place].center,
      radius: 32187
    };

//Add the circle for this place to the map.
    placeCircle = new google.maps.Circle(placeOptions);
  }
var mapOptions = {
    zoom: 10,
    center: PumpLane
  };

  map = google.maps.Map(document.getElementById('map-canvas'),
      mapOptions);
}


function init2() {
  var mapOptions = {
    zoom: 10,
    center: PumpLane
  };

  map = google.maps.Map(document.getElementById('map-canvas'),
      mapOptions);
}

function drop() {
  for (var i = 0; i < locations.length; i++) {
    setTimeout(function() {
      addMarker();
    }, i * 500);
  }
}

function addMarker() {
  markers.push(new google.maps.Marker({
    position: locations [iterator],
    map: map, 
    icon: Tmarkers [iterator],
    draggable: false,
    animation: google.maps.Animation.DROP
  }));
  iterator++;
}


//var PumpLane = new google.maps.LatLng(53.047687, -0.688523);
//var markers = [];
//var map;
//var image1BA = 'GoogleMapsMarkers/Google Maps Markers/blue_MarkerA.png';


google.maps.event.addDomListener(window, 'load', initialize);


//  </script>
  </head>
  <body>
    <div id="panel" style="margin-left: -52px">
      <button id="drop" onclick="drop()">Drop Turbines</button>
    </div>

  <div id="map-canvas"></div>
  </body>



</html>

1 个答案:

答案 0 :(得分：0)

您有明显的javascript错误（标记未定义，map是初始化函数的本地错误）。还删除了未使用的init2函数。

工作代码段：

// define global markers array
var markers = [];
// define global map variable
var map = null;

var placemap = {};
placemap['fenton'] = {
    center: new google.maps.LatLng(53.047687, -0.688523),
    population: 120
};

var placeCircle;

var locations = [
new google.maps.LatLng(53.044680, -0.675398),
new google.maps.LatLng(53.049159, -0.670971),
new google.maps.LatLng(53.054110, -0.664277),
new google.maps.LatLng(53.057157, -0.660745),
new google.maps.LatLng(53.056767, -0.655040),
new google.maps.LatLng(53.053591, -0.660949),
new google.maps.LatLng(53.050765, -0.660348),
new google.maps.LatLng(53.047681, -0.659188),
new google.maps.LatLng(53.043154, -0.654878),
new google.maps.LatLng(53.043695, -0.659211),
new google.maps.LatLng(53.044508, -0.662924),
new google.maps.LatLng(53.046134, -0.666785),
new google.maps.LatLng(53.049939, -0.665885),
new google.maps.LatLng(53.014957, -0.678112),
new google.maps.LatLng(53.018575, -0.679691),
new google.maps.LatLng(53.014892, -0.669833),
new google.maps.LatLng(53.018428, -0.674398),
new google.maps.LatLng(53.013147, -0.684684),
new google.maps.LatLng(53.048850, -0.790458),
new google.maps.LatLng(53.039768, -0.806422),
new google.maps.LatLng(53.036749, -0.807216),
new google.maps.LatLng(52.981730, -0.630449)];

var Tmarkers = [
    'http://maps.google.com/mapfiles/ms/icons/lightblue.png',
    'http://maps.google.com/mapfiles/ms/icons/lightblue.png',
    'http://maps.google.com/mapfiles/ms/icons/lightblue.png',
    'http://maps.google.com/mapfiles/ms/icons/lightblue.png',
    'http://maps.google.com/mapfiles/ms/icons/lightblue.png',
    'http://maps.google.com/mapfiles/ms/icons/lightblue.png',
    'http://maps.google.com/mapfiles/ms/icons/lightblue.png',
    'http://maps.google.com/mapfiles/ms/icons/lightblue.png',
    'http://maps.google.com/mapfiles/ms/icons/blue.png',
    'http://maps.google.com/mapfiles/ms/icons/lightblue.png',
    'http://maps.google.com/mapfiles/ms/icons/lightblue.png',
    'http://maps.google.com/mapfiles/ms/icons/lightblue.png',
    'http://maps.google.com/mapfiles/ms/icons/lightblue.png',
    'http://maps.google.com/mapfiles/ms/icons/orange.png',
    'http://maps.google.com/mapfiles/ms/icons/orange.png',
    'http://maps.google.com/mapfiles/ms/icons/orange.png',
    'http://maps.google.com/mapfiles/ms/icons/orange.png',
    'http://maps.google.com/mapfiles/ms/icons/blue-dot.png',
    'http://maps.google.com/mapfiles/ms/icons/purple.png',
    'http://maps.google.com/mapfiles/ms/icons/purple.png',
    'http://maps.google.com/mapfiles/ms/icons/yellow.png',
    'http://maps.google.com/mapfiles/ms/icons/green.png'];

var iterator = 0;

var PumpLane = new google.maps.LatLng(53.047687, -0.688523);


function initialize() {
    //Create the map.
    var mapOptions = {
        zoom: 10,
        center: new google.maps.LatLng(53.047687, -0.688523),
        mapTypeId: google.maps.MapTypeId.ROAD
    };

    map = new google.maps.Map(document.getElementById('map-canvas'),
    mapOptions);

    // Construct the circle for each value in placemap.
    for (var place in placemap) {
        var placeOptions = {
            strokeColor: '#FF0000',
            strokeOpacity: 0.5,
            strokeWeight: 1.0,
            fillColor: '#CC99CC',
            fillOpacity: 0.1,
            map: map,
            center: placemap[place].center,
            radius: 32187
        };

        //Add the circle for this place to the map.
        placeCircle = new google.maps.Circle(placeOptions);
    }
    var mapOptions = {
        zoom: 10,
        center: PumpLane
    };

    map = google.maps.Map(document.getElementById('map-canvas'),
    mapOptions);
}


function drop() {
    for (var i = 0; i < locations.length; i++) {
        setTimeout(function () {
            addMarker();
        }, i * 500);
    }
}

function addMarker() {
    markers.push(new google.maps.Marker({
        position: locations[iterator],
        map: map,
        icon: Tmarkers[iterator],
        draggable: false,
        animation: google.maps.Animation.DROP
    }));
    iterator++;
}


//var PumpLane = new google.maps.LatLng(53.047687, -0.688523);
//var markers = [];
//var map;
//var image1BA = 'GoogleMapsMarkers/Google Maps Markers/blue_MarkerA.png';


google.maps.event.addDomListener(window, 'load', initialize);
html, body, #map-canvas {
    height: 100%;
    width: 100%;
    margin-left: 0px;
    margin-top: 0px;
    padding: 0px
}
<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="panel" style="margin-left: 0px">
    <button id="drop" onclick="drop()">Drop Turbines</button>
</div>
<div id="map-canvas"></div>

相关问题
最新问题