如何在现有标记下方添加谷歌地图标记

How to add Google Maps marker underneath existing markers

本文关键字：添加 谷歌 图标 地图 方添加      更新时间：2023-09-26

当我搜索我的地图时，它会添加一个图钉，但它覆盖了原始标记，使用户无法点击（例如，如果你在我的地图上搜索"切尔滕纳姆"）。

有没有办法在现有标记下添加搜索标记？

我试过玩zIndex但无法让它工作。

地图的代码笔在这里：http://codepen.io/anon/pen/eZBreY

有什么想法吗？

  1. 一种选择是查询 FusionTable 并将标记呈现为原生 Google Maps Javascript API v3 标记，然后 zIndex 将起作用。

查看您的FusionTable，它不包含坐标，因此除非您更新它，否则这是不可能的。

  1. 另一种选择是将标记设置为不会遮挡标记的透明圆圈：

概念小提琴

代码片段： 

function initAutocomplete() {
  var map = new google.maps.Map(document.getElementById('map'), {
    center: new google.maps.LatLng(53.53081624504545, -3.0102),
    zoom: 6,
    // maxZoom: 10,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  });
  map.controls[google.maps.ControlPosition.RIGHT_BOTTOM].push(document.getElementById('googft-legend-open'));
  map.controls[google.maps.ControlPosition.RIGHT_BOTTOM].push(document.getElementById('googft-legend'));
  layer = new google.maps.FusionTablesLayer({
    map: map,
    heatmap: {
      enabled: false
    },
    query: {
      select: "col3",
      from: "1HYIx5EfvhdMJY_oQAedrrbzONPviYJocD0DMz53V",
      where: "col9 'x3d 'x27YES'x27"
    },
    options: {
      styleId: 3,
      templateId: 2
    }
  });
  // Create the search box and link it to the UI element.
  var input = document.getElementById('pac-input');
  var searchBox = new google.maps.places.SearchBox(input);
  map.controls[google.maps.ControlPosition.TOP_LEFT].push(input);
  // Bias the SearchBox results towards current map's viewport.
  map.addListener('bounds_changed', function() {
    searchBox.setBounds(map.getBounds());
  });
  var markers = [];
  // Listen for the event fired when the user selects a prediction and retrieve
  // more details for that place.
  searchBox.addListener('places_changed', function() {
    var places = searchBox.getPlaces();
    if (places.length == 0) {
      return;
    }
    // Clear out the old markers.
    markers.forEach(function(marker) {
      marker.setMap(null);
    });
    markers = [];
    // For each place, get the icon, name and location.
    var bounds = new google.maps.LatLngBounds();
    places.forEach(function(place) {
      var icon = {
        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.
      markers.push(new google.maps.Marker({
        map: map,
        icon: {
          path: google.maps.SymbolPath.CIRCLE,
          scale: 10,
          fillColor: "#00FF00",
          fillOpacity: 0.4,
          strokeWeight: 1,
          strokeOpacity: 0.4,
          strokeColor: "#00FF00",
          anchor: new google.maps.Point(0, 0)
        }, //icon,
        title: place.name,
        position: place.geometry.location
      }));
      markers.push(new google.maps.Marker({
        map: map,
        icon: {
          path: google.maps.SymbolPath.CIRCLE,
          scale: 3,
          fillColor: "#0000FF",
          fillOpacity: 0.4,
          strokeWeight: 1,
          strokeOpacity: 0.4,
          strokeColor: "#0000FF",
          anchor: new google.maps.Point(0, 0)
        }, //icon,
        title: place.name,
        position: place.geometry.location
      }));
      if (place.geometry.viewport) {
        // Only geocodes have viewport.
        bounds.union(place.geometry.viewport);
      } else {
        bounds.extend(place.geometry.location);
      }
    });
    map.fitBounds(bounds);
  });
}
google.maps.event.addDomListener(window, 'load', initAutocomplete);
 html,
 body {
   height: 500px;
   margin: 0;
   padding: 0;
 }
 #map {
   height: 500px;
   max-width: 100%;
 }
 .controls {
   margin-top: 10px;
   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;
   font-family: Roboto;
   font-size: 15px;
   font-weight: 300;
   margin-left: 12px;
   padding: 0 11px 0 13px;
   text-overflow: ellipsis;
   width: 300px;
 }
 #pac-input:focus {
   border-color: #4d90fe;
 }
 .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;
 }
 #target {
   width: 345px;
 }
<script src="https://maps.googleapis.com/maps/api/js?libraries=places"></script>
<input id="pac-input" class="controls" type="text" placeholder="Search for a screening near you">
<div id="map"></div>

相关文章：