Google地图API包含搜索更改图标颜色的位置

Question

我正在尝试让我的谷歌地图根据结果所在的位置更改搜索图标的颜色。

API info for places-searchbox

API for poly-containsLocation

我正在尝试将这些组合在一起，以便搜索到的位置将根据结果的位置更改图标。 第二部分是在拖入或移出多边形时让图标改变颜色。

点击地图时不要改变它 我想在生成时更改搜索图标的颜色... 只是不确定我的代码将去哪里......这样的事情：

＆＃13;

＆＃13;

// This example adds a search box to a map, using the Google Place Autocomplete
// feature. People can enter geographical searches. The search box will return a
// pick list containing a mix of places and predicted search terms.

function initialize() {

  var markers = [];
  var map = new google.maps.Map(document.getElementById('map-canvas'), {
    mapTypeId: google.maps.MapTypeId.ROADMAP
  });
     var triangleCoords = [
    new google.maps.LatLng(-33.8902, 151.1759),
    new google.maps.LatLng(-33.8474, 151.2631),
    new google.maps.LatLng(-33.8902, 151.2631)
  ];
  var theTriangle = new google.maps.Polygon({
    paths: triangleCoords
  });
google.maps.event.addListener(map, 'click', function(e) {
    var result;
    if (google.maps.geometry.poly.containsLocation(e.latLng, theTriangle)) {
      result = 'red';
    } else {
      result = 'green';
    }

    var circle = {
      path: google.maps.SymbolPath.CIRCLE,
      fillColor: result,
      fillOpacity: .2,
      strokeColor: 'white',
      strokeWeight: .5,
      scale: 10
    };

    new google.maps.Marker({
      position: e.latLng,
      map: map,
      icon: circle
    })
  });


  var defaultBounds = new google.maps.LatLngBounds(
      new google.maps.LatLng(-33.8902, 151.1759),
      new google.maps.LatLng(-33.8474, 151.2631));
  map.fitBounds(defaultBounds);

  // Create the search box and link it to the UI element.
  var input = /** @type {HTMLInputElement} */(
      document.getElementById('pac-input'));
  map.controls[google.maps.ControlPosition.TOP_LEFT].push(input);

  var searchBox = new google.maps.places.SearchBox(
    /** @type {HTMLInputElement} */(input));

  // [START region_getplaces]
  // Listen for the event fired when the user selects an item from the
  // pick list. Retrieve the matching places for that item.
  google.maps.event.addListener(searchBox, 'places_changed', function() {
    var places = searchBox.getPlaces();

    if (places.length == 0) {
      return;
    }
    for (var i = 0, marker; marker = markers[i]; i++) {
      marker.setMap(null);
    }

    // For each place, get the icon, place name, and location.
    markers = [];
    var bounds = new google.maps.LatLngBounds();
    for (var i = 0, place; place = places[i]; i++) {
      var image = {
        url: place.icon,
        size: new google.maps.Size(71, 71),
        origin: new google.maps.Point(0, 0),
        anchor: new google.maps.Point(17, 34),
        scaledSize: new google.maps.Size(25, 25)
      };

      // Create a marker for each place.
      var marker = new google.maps.Marker({
        map: map,
        icon: image,
        title: place.name,
        position: place.geometry.location
      });

      markers.push(marker);

      bounds.extend(place.geometry.location);
    }

    map.fitBounds(bounds);
  });
  // [END region_getplaces]

  // Bias the SearchBox results towards places that are within the bounds of the
  // current map's viewport.
  google.maps.event.addListener(map, 'bounds_changed', function() {
    var bounds = map.getBounds();
    searchBox.setBounds(bounds);
  });
}

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

＆＃13;

html, body, #map-canvas {
        height: 100%;
        margin: 0px;
        padding: 0px
      }
      .controls {
        margin-top: 16px;
        border: 1px solid transparent;
        border-radius: 2px 0 0 2px;
        box-sizing: border-box;
        -moz-box-sizing: border-box;
        height: 32px;
        outline: none;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
      }

      #pac-input {
        background-color: #fff;
        padding: 0 11px 0 13px;
        width: 400px;
        font-family: Roboto;
        font-size: 15px;
        font-weight: 300;
        text-overflow: ellipsis;
      }

      #pac-input:focus {
        border-color: #4d90fe;
        margin-left: -1px;
        padding-left: 14px;  /* Regular padding-left + 1. */
        width: 401px;
      }

      .pac-container {
        font-family: Roboto;
      }

      #type-selector {
        color: #fff;
        background-color: #4d90fe;
        padding: 5px 11px 0px 11px;
      }

      #type-selector label {
        font-family: Roboto;
        font-size: 13px;
        font-weight: 300;
      }
}

＆＃13;

<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&signed_in=true&libraries=places"></script>
<input id="pac-input" class="controls" type="text" placeholder="Search Box">
<div id="map-canvas"></div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

1. 添加几何图书馆

<script src="https://maps.googleapis.com/maps/api/js?libraries=places,geometry"></script>

1. 检查每个标记是否在多边形中，如果是，则更改其图标：

var alternateIcon = "http://maps.google.com/mapfiles/ms/icons/blue.png";
if (google.maps.geometry.poly.containsLocation(marker.getPosition(), theTriangle)) 
  marker.setIcon(alternateIcon);

working fiddle

工作代码段：

＆＃13;
＆＃13;
// This example adds a search box to a map, using the Google Place Autocomplete
// feature. People can enter geographical searches. The search box will return a
// pick list containing a mix of places and predicted search terms.
var theTriangle;
var map;

function initialize() {

  var markers = [];
  map = new google.maps.Map(document.getElementById('map-canvas'), {
    mapTypeId: google.maps.MapTypeId.ROADMAP
  });
  var triangleCoords = [
    new google.maps.LatLng(-33.8902, 151.1759),
    new google.maps.LatLng(-33.8474, 151.2631),
    new google.maps.LatLng(-33.8902, 151.2631)
  ];
  theTriangle = new google.maps.Polygon({
    paths: triangleCoords,
    map: map
  });
  google.maps.event.addListener(map, 'click', function(e) {
    var result;
    if (google.maps.geometry.poly.containsLocation(e.latLng, theTriangle)) {
      result = 'red';
    } else {
      result = 'green';
    }

    var circle = {
      path: google.maps.SymbolPath.CIRCLE,
      fillColor: result,
      fillOpacity: .2,
      strokeColor: 'white',
      strokeWeight: .5,
      scale: 10
    };

    new google.maps.Marker({
      position: e.latLng,
      map: map,
      icon: circle
    })
  });


  var defaultBounds = new google.maps.LatLngBounds(
    new google.maps.LatLng(-33.8902, 151.1759),
    new google.maps.LatLng(-33.8474, 151.2631));
  map.fitBounds(defaultBounds);

  // Create the search box and link it to the UI element.
  var input = /** @type {HTMLInputElement} */
    (
      document.getElementById('pac-input'));
  map.controls[google.maps.ControlPosition.TOP_LEFT].push(input);

  var searchBox = new google.maps.places.SearchBox(
    /** @type {HTMLInputElement} */
    (input));

  // [START region_getplaces]
  // Listen for the event fired when the user selects an item from the
  // pick list. Retrieve the matching places for that item.
  google.maps.event.addListener(searchBox, 'places_changed', function() {
    var places = searchBox.getPlaces();

    if (places.length == 0) {
      return;
    }
    for (var i = 0, marker; marker = markers[i]; i++) {
      marker.setMap(null);
    }

    // For each place, get the icon, place name, and location.
    markers = [];
    var bounds = new google.maps.LatLngBounds();
    var alternateIcon = "http://maps.google.com/mapfiles/ms/icons/blue.png";
    for (var i = 0, place; place = places[i]; i++) {
      var image = {
        url: place.icon,
        size: new google.maps.Size(71, 71),
        origin: new google.maps.Point(0, 0),
        anchor: new google.maps.Point(17, 34),
        scaledSize: new google.maps.Size(25, 25)
      };

      // Create a marker for each place.

      var marker = new google.maps.Marker({
        map: map,
        icon: image,
        title: place.name,
        position: place.geometry.location
      });
      if (google.maps.geometry.poly.containsLocation(marker.getPosition(), theTriangle)) marker.setIcon(alternateIcon);

      markers.push(marker);

      bounds.extend(place.geometry.location);
    }

    map.fitBounds(bounds);
  });
  // [END region_getplaces]

  // Bias the SearchBox results towards places that are within the bounds of the
  // current map's viewport.
  google.maps.event.addListener(map, 'bounds_changed', function() {
    var bounds = map.getBounds();
    searchBox.setBounds(bounds);
  });
}

google.maps.event.addDomListener(window, 'load', initialize);
＆＃13;
html,
body,
#map-canvas {
  height: 100%;
  margin: 0px;
  padding: 0px
}
.controls {
  margin-top: 16px;
  border: 1px solid transparent;
  border-radius: 2px 0 0 2px;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  height: 32px;
  outline: none;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}
#pac-input {
  background-color: #fff;
  padding: 0 11px 0 13px;
  width: 400px;
  font-family: Roboto;
  font-size: 15px;
  font-weight: 300;
  text-overflow: ellipsis;
}
#pac-input:focus {
  border-color: #4d90fe;
  margin-left: -1px;
  padding-left: 14px;
  /* Regular padding-left + 1. */
  width: 401px;
}
.pac-container {
  font-family: Roboto;
}
#type-selector {
  color: #fff;
  background-color: #4d90fe;
  padding: 5px 11px 0px 11px;
}
#type-selector label {
  font-family: Roboto;
  font-size: 13px;
  font-weight: 300;
}
}
＆＃13;
<script src="https://maps.googleapis.com/maps/api/js?libraries=places,geometry"></script>
<input id="pac-input" class="controls" type="text" placeholder="Search Box">
<div id="map-canvas"></div>
＆＃13;
＆＃13;
＆＃13;

Answer 2

你的JSFiddle很乱。如此恶心尝试并解释：

1. 在三角形多边形上设置地图属性以显示它的开始。

2. 要在多边形中放置标记颜色时更改标记颜色：制作 你的标记可拖动看看这个例子： https://developers.google.com/maps/documentation/javascript/examples/marker-animations

   当标记发生时，将dragend事件添加到标记中 - 检查是否 它在多边形内：

   google.maps.event.addListener(Marker, "dragend", function(event) {
    // check if marker is in polygon and change color or marker
   }); 
   

3. 搜索结果 - 一旦结果返回，根据需要更改标记/颜色。