在react-google-maps中围绕标记绘制矩形,而不是使用' icon'

时间:2017-06-15 06:48:52

标签: google-maps reactjs google-maps-markers react-redux

我想在标记周围绘制矩形。我尝试在标记内使用形状。现在,我正在使用

 var shape = {
              coords: [1, 1, 1, 30, 30, 30, 30, 1],
              type: 'poly'
              };  

 this.marker = new google.maps.Marker({
                map: map,
                position: {
                    lat: parseFloat(company.latitude),
                    lng: parseFloat(company.longitude)
                },
                shape:shape,
                icon: {
                    url: '/src/images/blue_marker.png',
                    size: new google.maps.Size(30, 30),
                    scaledSize: new google.maps.Size(30, 30)
                },
                title: company.name + ' ' + company.vacancy.vacancy                   
              }
            );    

我无法查看矩形。关于这个的任何想法?

2 个答案:

答案 0 :(得分:0)

        I think this is useful for u.Changed ur location value get shapes

        // Instantiates a new Polyline object and adds points to define a rectangle
        PolylineOptions rectOptions = new PolylineOptions()
                .add(new LatLng(37.35, -122.0))
                .add(new LatLng(37.45, -122.0))  
                .add(new LatLng(37.45, -122.2))  
                .add(new LatLng(37.35, -122.2))  
                .add(new LatLng(37.35, -122.0)); 

        // Get back the mutable Polyline
        Polyline polyline = myMap.addPolyline(rectOptions);

   //Get Marker Location 
    LatLng position = marker.getPosition(); //
    Toast.makeText(
                    MainActivity.this,
                    "Lat " + position.latitude + " "
                            + "Long " + position.longitude,
                    Toast.LENGTH_LONG).show();

答案 1 :(得分:0)

我用MarkerWithLabel而不是Marker。示例代码如下:

  let marker = new  MarkerWithLabel({  
                map: this.map,
                position: {
                    lat: parseFloat(latitude),
                    lng: parseFloat(longitude)
                },                   
                icon: {
                    path: 'M2 2 H 55 V 25 H 2 L 2 2',
                    fillColor: color,
                    fillOpacity: 1,
                    strokeColor: '#000',
                    strokeWeight: 2,
                    scale: 2,                       
                    size: new google.maps.Size(30, 30),
                    scaledSize: new google.maps.Size(30, 30)
                },
                labelContent: company.name,
                labelClass: "labels",
                labelInBackground: false,
                draggable: false,
                labelAnchor: new google.maps.Point(-10,-10),
                raiseOnDrag: false                   
            }
        );

     //CSS        
    .labels {
             color: white;
             font-family:"Lucida Grande", "Arial", sans-serif;
             font-size: 8px;
             text-align: center;
             white-space: initial;
             padding: 0px 0px 0px 0px;
            }