admin管理员组

文章数量:1530842

html结构

<!DOCTYPE html>
<html>
  <head>
    <title> Geocoder地图</title>
    <script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>
    <link rel="stylesheet" type="text/css" href="./style.css" />
    <script src="./index.js"></script>
  </head>
  <body>
    <div style="display: none">
      <input
        id="pac-input"
        class="controls"
        type="text"
        placeholder="搜索地址"
      />
    </div>
    <div id="map"></div>
    <div id="infowindow-content">
      <span id="place-name" class="title"></span><br />
      <!-- <strong>Place ID</strong>: <span id="place-id"></span><br /> -->
      <span id="place-address"></span>
    </div>

    <!-- Async script executes immediately and must be after any DOM elements used in callback. -->
    <script
      src="https://maps.googleapis/maps/api/js?key=AIzaSyC_-U9VyoV79Sd1RR6V1CqFTSYisxRUVe4&callback=initMap&libraries=places&v=weekly"
      async
    ></script>
  </body>
</html>

css结构 

     #map {
         width: 100%;
        height: 800px;
      }
      
      /* Optional: Makes the sample page fill the window. */
      html,
      body {
        height: 100%;
        margin: 0;
        padding: 0;
      }

      .controls {
        background-color: #fff;
        border-radius: 2px;
        border: 1px solid transparent;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
        box-sizing: border-box;
        font-family: Roboto;
        font-size: 15px;
        font-weight: 300;
        height: 29px;
        margin-left: 17px;
        margin-top: 10px;
        outline: none;
        padding: 0 11px 0 13px;
        text-overflow: ellipsis;
        width: 400px;
      }
      
      .controls:focus {
        border-color: #4d90fe;
      }
      
      .title {
        font-weight: bold;
      }
      
      #infowindow-content {
        display: none;
      }
      
      #map #infowindow-content {
        display: inline;
      }

js结构 

let map;

function initMap() {
  //用于返回的经纬度值
  var latLng = null;
  map = new google.maps.Map(document.getElementById("map"), {
    center: { lat: 23.7, lng: 120.6 },
    zoom: 13,
  });
  
  //声明用于标注的点
  const marker = new google.maps.Marker({ map: map, draggable:true,visible:false });
  //监听标注点的拖动
  marker.addListener("dragend", (event)=>{
    console.log("拖动结束", event.latLng.toJSON());
  });
  //点击地图获取点
  map.addListener("click", (event)=>{
    marker.setPosition(event.latLng.toJSON());
    console.log("点击结束",event.latLng.toJSON())
    marker.setVisible(true);  
  });

  const input = document.getElementById("pac-input");
  const autocomplete = new google.maps.places.Autocomplete(input);
  autocomplete.bindTo("bounds", map);
  // Specify just the place data fields that you need.
  autocomplete.setFields(["place_id", "geometry", "name", "formatted_address"]);
  map.controls[google.maps.ControlPosition.TOP_LEFT].push(input);
  const geocoder = new google.maps.Geocoder();
  autocomplete.addListener("place_changed", () => {
    const place = autocomplete.getPlace();
    if (!place.place_id) {
      return;
    }
    geocoder.geocode({ placeId: place.place_id }, (results, status) => {
      if (status !== "OK" && results) {
        window.alert("Geocoder failed due to: " + status);
        return;
      }
      map.setZoom(11);
      map.setCenter(results[0].geometry.location);
      marker.setPosition(results[0].geometry.location);
      marker.setVisible(true);  
    });
  });
}

官方地址https://developers.google/maps/documentation/javascript/reference/marker?hl=en

本文标签： 跳转地图

版权声明：本文标题：跳转谷歌地图 内容由热心网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：https://m.elefans.com/xitong/1725994078a1051828.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。