Question

我有一个项目，我想将世界地图划分为常规网格，然后突出显示该网格的某些部分

我成功地破解了一个示例，在Google世界地图上绘制一个20x20的矩形

 function initMap() {

    var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 1,
    center: {lat: 60.18, lng: 24.93},
    mapTypeId: google.maps.MapTypeId.TERRAIN
  });

var rectangle = new google.maps.Rectangle({
strokeColor: '#FF0000',
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: '#FF0000',
fillOpacity: 0.35,
map: map,
bounds: {

  west: 180, north:0, east: -160, south: 20
}
});    

initMap();

http://jsfiddle.net/6zea831p/4/

但是我想把它变成一个函数，可以根据我脚本的其他部分突出显示很多矩形。虽然我没有太大的成功把它变成一个功能。这是我的开始

function drawRec(w, n, e, s){


var coords = new google.maps.LatLngBounds(
        new google.maps.LatLng(w, n),
        new google.maps.LatLng(e, s))

var rectangle = new google.maps.Rectangle({
   strokeColor: '   #ff00ff',
   strokeOpacity: 0.8,
   strokeWeight: 1,
   fillColor: ' #ff00ff',
   fillOpacity: 0.35,

   bounds: coords,

   map: map

  });



}

我收到错误＆＃34; InvalidValueError：setMap：不是Map＆＃34;的实例在控制台中。

Answer 1

在'initMap（）'函数之外声明'map'var，使其在脚本标记中变为全局

var map;

function initMap() {
    map = new google.maps.Map(document.getElementById('map'), {
    ...
    ...
}

function drawRec(w, n, e, s){
    ...
}

Answer 2

在对全局变量进行愚蠢的修复之后，我最终到达了那里：

西方，北方等......可以从参数中设置

var map

function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
zoom: 1,
center: {lat: 60.18, lng: 24.93},
mapTypeId: google.maps.MapTypeId.TERRAIN
  });
}

function drawRec(w, n, e, s){




var rectangle = new google.maps.Rectangle({
   strokeColor: '   #ff00ff',
   strokeOpacity: 0.8,
   strokeWeight: 1,
   fillColor: ' #ff00ff',
   fillOpacity: 0.35,

   bounds: {

  west: w, north:n, east: e, south:s
    },

   map: map

   });

}


initMap();
drawRec(180, 10, 160, 30);

从功能Google Maps Api中绘制矩形

2 个答案: