Question

我想在谷歌地图中突出显示2个地方，如下图所示（无法突出显示两个地方，我刚刚展示了我将实施的边框样式）。
我想要显示与下图完全相同的边框。
我想根据地名动态标记地点例如，我没有lat long值，因此我必须按名称搜索的地方。

Answer 1

目前，要使用Google Maps Javascript API执行此操作，您需要外部数据来显示每个地方的边框。谷歌的问题跟踪器中已经要求将其内置于Javascript API：https://issuetracker.google.com/issues/35816953

作为解决方法，您可以使用Maps Embed API来模仿帖子中列出的行为。这是一个示例：请务必使用您自己的API密钥替换YOUR_API_KEY_HERE。

var input = document.getElementById('location');
var autocomplete;

function initPlaces() {
  autocomplete = new google.maps.places.Autocomplete(input);
  autocomplete.addListener('place_changed', function() {
    var place = autocomplete.getPlace();
    if (!place.geometry) {
      alert('Error with your search for ' + place.name);
    }
    
    if(place.place_id) {
      markLocation(place.place_id);
    }
  })
}

function markLocation(placeId) {
  var url = 'https://www.google.com/maps/embed/v1/place?key=AIzaSyCD0rWgXRVBa7PgaTWXVp_gU51pgHGviYY';
  var placeStr = '&q=place_id:';
  var iframe = document.getElementById('iframe');
  
  placeStr += placeId;
  url += placeStr;
  iframe.src = url;

}

var onSubmitHandler = function(e) {
  e.preventDefault();
  //markLocation();
}

document.getElementById('form').addEventListener('submit', onSubmitHandler);

input {
  height: 2rem;
  border-radius: 2px;
  border-style: none;
  border: 1px solid #e2e2e2;
  padding-left: 1rem;
}

.places {
  height: 100px;
}

#map {
  height: 100%;
}

#location {
  width: 400px;
}

.map-frame {
  width: 100%;
  height: 500px;
}

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  <div class="places">
    <form id="form" autocomplete="off">
      <input id="location" type="text" placeholder="Enter a location">
    </form>
  </div>
  <div class="map-frame">
    
   <!--  Be sure to replace YOUR_API_KEY_HERE with your actual API key -->
    <iframe width="100%" id="iframe" height="100%"frameborder="0" style="border:0"
src="https://www.google.com/maps/embed/v1/place?q=place_id:ChIJ-QB6d6K5lzMRxi-hKfTINm0&key=YOUR_API_KEY_HERE" allowfullscreen></iframe>
  </div>

  <!--  Be sure to replace YOUR_API_KEY_HERE with your actual API key -->
  <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY_HERE&libraries=places&callback=initPlaces" async defer></script>
</body>
</html>

如果您想尝试一下外部jsbin链接：jsbin

以下是Google地图嵌入API的文档，以便您想要追踪该轨道：https://developers.google.com/maps/documentation/embed/start

希望有所帮助！

在不使用搜索框的情况下突出显示单个地图中的2个地点

1 个答案: