无法将Geojson文件作为路径加载到Gmaps中

时间:2018-04-27 15:55:30

标签: javascript google-maps geojson

我正在尝试从GeoJson文件创建多边形,并在标记离开该区域时触发警报。我正在关注gmap教程,我看到的很多代码如下:

def draw():
        global show_image

        win.fill([255,255,255])

        pygame.draw.rect(win, [0,0,0], (760, 250, 264 , 200), 1)




        if 1024 >= cursor[0] >= 760 and 450 >= cursor[1] >= 250:
            pygame.draw.rect(win, [128,128,128], (761, 251, 262 , 198))
            if click[0]:
                num = random.randint(0,17)
                show_image = True

        if show_image == True:
            win.blit(images[num], (0,0))
            win.blit(font.render(captions[num], True, [0,190,0]), (660,
550))

        win.blit(button_text, (780,270))


        pygame.display.update()

我正在尝试使用GeoJson文件中的数据作为路径。 我尝试过某些代码行,例如:

var path = [[-12.040397656836609,-77.03373871559225], 
[-12.040248585302038,-77.03993927003302], [-12.050047116528843,-
77.02448169303511], [-12.044804866577001,-77.02154422636042]];

 polygon = map.drawPolygon({
 paths: path,
 strokeColor: '#BBD8E9',
 strokeOpacity: 1,
 strokeWeight: 3,
 fillColor: '#BBD8E9',
 fillOpacity: 0.6
 });

map.addMarker({
lat: -12.043333,
lng: -77.028333,
draggable: true,
fences: [polygon],
outside: function(marker, fence) {
alert('This marker has been moved outside of its fence');
 }
});

但它就像数据没有加载。我是新手,非常感谢任何反馈,谢谢

更新的代码:

 var path = map.data.loadGeoJson("./js/area.geojson");

错误:

  function initMap() {
    var map = new google.maps.Map(document.getElementById('map'), {
     center: {lat: 53.28, lng: -7.48},
     zoom: 10,
    });

    var path = map.data.loadGeoJson("./js/area.geojson");

    polygon = map.drawPolygon({
    paths: path,
    useGeoJSON: true,
    strokeOpacity: 1,
    strokeWeight: 3,
    fillColor: '#BBD8E9',
    fillOpacity: 0.6
  });;

  map.addMarker({
    lat: 53.28,
    lng: -7.48,
    draggable: true,
    fences: [polygon],
    outside: function(m, f){
      alert('This marker has been moved outside of its fence');
    }
  });


  }
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?libraries=drawing,places&amp;language=en&key=AIzaSyBDv0PtStQ3dOIyBcqUSxChO7TB-CqdeXY&callback=initMap">
</script>
<script type="text/javascript" src="gmaps.js"></script>

geojson文件中的坐标是在地图上创建边框,我在其他测试中使用了geojson文件,这很好。但是没有出现标记。

0 个答案:

没有答案