代码之家  ›  专栏  ›  技术社区  ›  Umair Ayub

如何在Google Maps中通过连接外部点创建多边形

  •  1
  • Umair Ayub  · 技术社区  · 7 年前

    我正试图根据我这里的数据,根据餐厅的送货费用,为餐厅创建多个多边形 https://jsoneditoronline.org/?id=7a7287f99c0964ffd6125b4bb48a2e50

    这是我已经有的 https://codepen.io/mani619cash/pen/mpaqQq?editors=1000

    它根据文本区域中显示的输入数据创建类似的内容

    enter image description here

    我想要的是类似于下图的东西,将外部图像连接起来生成一个多边形。

    目前,我尝试在每个 polygon 按lat,lon,但多边形仍然是乱七八糟的

    enter image description here

    1 回复  |  直到 7 年前
        1
  •  3
  •   geocodezip    5 年前

    从中心按方位对坐标进行排序(仅适用于 simple 多边形)。根据我对这个问题的一个回答: OSM to Google Maps polygons

    排序功能:

    function sortFunc(a, b) {
      var bearA = google.maps.geometry.spherical.computeHeading(centerPt, a);
      var bearB = google.maps.geometry.spherical.computeHeading(centerPt, b);
      console.log(bearA + ":" + bearB);
      return (bearA - bearB);
    }
    

    排序顶点的代码:

    var bounds = new google.maps.LatLngBounds();
    for (direction in data_json[hotel]['polygon'][region]) {
      var temp = new google.maps.LatLng(data_json[hotel]['polygon'][region][direction]['lat'], data_json[hotel]['polygon'][region][direction]['lon'])
      triangleCoords.push(temp);
      bounds.extend(temp);
    }
    // sort coordinates
    centerPt = bounds.getCenter();
    triangleCoords = triangleCoords.sort(sortFunc);
    
    // Styling & Controls
    myPolygon = new google.maps.Polygon({
      paths: triangleCoords,
      draggable: true, // turn off if it gets annoying
      editable: true,
      strokeColor: color_of_this,
      strokeOpacity: 0.8,
      strokeWeight: 2,
      fillColor: color_of_this,
      fillOpacity: 0.35
    });
    

    proof of concept fiddle

    screenshot of resulting map

    代码段:

    function initialize() {
      var data_json = $("#info").val();
      data_json = JSON.parse(data_json);
      var myLatLng = new google.maps.LatLng(data_json[0]['latitude'], data_json[0]['longitude']);
      var mapOptions = {
        zoom: 13,
        center: myLatLng,
        mapTypeId: google.maps.MapTypeId.RoadMap
      };
      var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
      for (hotel in data_json) {
        for (region in data_json[hotel]['polygon']) {
          var triangleCoords = [];
          var color_of_this = "#" + ((1 << 24) * Math.random() | 0).toString(16);
          var bounds = new google.maps.LatLngBounds();
          for (direction in data_json[hotel]['polygon'][region]) {
            var temp = new google.maps.LatLng(data_json[hotel]['polygon'][region][direction]['lat'], data_json[hotel]['polygon'][region][direction]['lon'])
            triangleCoords.push(temp);
            bounds.extend(temp);
          }
          // sort coordinates
          centerPt = bounds.getCenter();
          triangleCoords = triangleCoords.sort(sortFunc);
    
          // Styling & Controls
          myPolygon = new google.maps.Polygon({
            paths: triangleCoords,
            draggable: true, // turn off if it gets annoying
            editable: true,
            strokeColor: color_of_this,
            strokeOpacity: 0.8,
            strokeWeight: 2,
            fillColor: color_of_this,
            fillOpacity: 0.35
          });
          myPolygon.setMap(map);
          new google.maps.Marker({
            position: myLatLng,
            map: map
          });
        }
        map.fitBounds(bounds);
      }
    }
    
    function sortFunc(a, b) {
      var bearA = google.maps.geometry.spherical.computeHeading(centerPt, a);
      var bearB = google.maps.geometry.spherical.computeHeading(centerPt, b);
      return (bearA - bearB);
    }
    //Display Coordinates below map
    function getPolygonCoords() {
      var len = myPolygon.getPath().getLength();
      var htmlStr = "";
      for (var i = 0; i < len; i++) {
        htmlStr += "new google.maps.LatLng(" + myPolygon.getPath().getAt(i).toUrlValue(5) + "), ";
      }
    }
    google.maps.event.addDomListener(window, "load", initialize);
    html,
    body,
    #map-canvas {
      height: 100%;
      width: 100%;
      margin: 0px;
      padding: 0px
    }
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://maps.googleapis.com/maps/api/js?libraries=geometry"></script>
    <div id="map-canvas"></div>
    <textarea id="info">[ { "latitude": "40.738057", "polygon": { "0": { "direction6": { "lat": 40.756056999999956, "delivery_estimate": 45, "lon": -74.034318, "delivery_fee": 200, "delivery_offered_to_diner_location": true }, "direction2": { "lat": 40.74755700000004, "delivery_estimate":
      45, "lon": -74.02481799999995, "delivery_fee": 200, "delivery_offered_to_diner_location": true }, "direction7": { "lat": 40.74455700000003, "delivery_estimate": 45, "lon": -74.04081800000003, "delivery_fee": 200, "delivery_offered_to_diner_location":
      true }, "direction3": { "lat": 40.738057, "delivery_estimate": 45, "lon": -74.02731799999997, "delivery_fee": 200, "delivery_offered_to_diner_location": true }, "direction4": { "lat": 40.738057, "delivery_estimate": 45, "lon": -74.04331800000004, "delivery_fee":
      200, "delivery_offered_to_diner_location": true }, "direction5": { "lat": 40.736057, "delivery_estimate": 45, "lon": -74.034318, "delivery_fee": 200, "delivery_offered_to_diner_location": true }, "direction1": { "lat": 40.73605699999999, "delivery_estimate":
      45, "lon": -74.03631800000001, "delivery_fee": 200, "delivery_offered_to_diner_location": true }, "direction8": { "lat": 40.735556999999986, "delivery_estimate": 45, "lon": -74.03181799999999, "delivery_fee": 200, "delivery_offered_to_diner_location":
      true } }, "1": { "direction6": { "lat": 40.77505699999991, "delivery_estimate": 45, "lon": -74.034318, "delivery_fee": 500, "delivery_offered_to_diner_location": false }, "direction7": { "lat": 40.7590570000001, "delivery_estimate": 45, "lon": -74.0553180000001,
      "delivery_fee": 500, "delivery_offered_to_diner_location": false }, "direction2": { "lat": 40.752057000000065, "delivery_estimate": 45, "lon": -74.02031799999993, "delivery_fee": 500, "delivery_offered_to_diner_location": false }, "direction3": { "lat":
      40.738057, "delivery_estimate": 45, "lon": -74.02331799999995, "delivery_fee": 500, "delivery_offered_to_diner_location": false }, "direction4": { "lat": 40.738057, "delivery_estimate": 45, "lon": -74.06431800000014, "delivery_fee": 500, "delivery_offered_to_diner_location":
      false }, "direction8": { "lat": 40.73155699999997, "delivery_estimate": 45, "lon": -74.02781799999997, "delivery_fee": 500, "delivery_offered_to_diner_location": false }, "direction1": { "lat": 40.71605699999989, "delivery_estimate": 45, "lon": -74.0563180000001,
      "delivery_fee": 500, "delivery_offered_to_diner_location": false }, "direction5": { "lat": 40.714057000000054, "delivery_estimate": 45, "lon": -74.034318, "delivery_fee": 500, "delivery_offered_to_diner_location": false } } }, "id": "287478", "longitude":
      "-74.034318", "name": "Tony Boloney's" } ]</textarea>