如何在 google 地图 api v3 中使用地图 url 查询？

Question

我有 html 页面 (www.mywebsite/index) 和 javascript google 地图 api 实现。所以我很感兴趣是否有任何方法可以在 google 地图上处理 https://www.google.com/maps/search/?api=1&query=47.5951518,-122.3316393 之类的查询，但在我的页面上，那里不仅有地图，还有其他元素。所以我正在寻找一些方法来在我的页面上进行查询，也许通过 php 在页面加载之前直接提供该信息以进行映射。

现在索引的代码是这样的：

    <!DOCTYPE html>
    <html lang="en">
    <head>
     <meta charset="UTF-8">
     <meta name="viewport" content=" width=device-width, initial-scale=1.0">
     <meta http-equiv="X-UA-Compatible" content="ie=edge">
     <style>
      #map{
        height:900px;
      }
    #html,body{
    height: 100%;
        margin: 0;
        padding: 0;}

    #floating-panel {
        position: absolute;
        top: 10px;
        left: 8%;
        z-index: 5;
        background-color: #fff;
        padding: 5px;
        border: 1px solid #999;
        text-align: center;
        font-family: 'Roboto','sans-serif';
        line-height: 30px;
        padding-left: 10px;
      } 
    <style>
      #map{
        height:900px;
      }
    #html,body{
    height: 100%;
        margin: 0;
        padding: 0;}

    #floating-panel {
        position: absolute;
        top: 10px;
        left: 8%;
        z-index: 5;
        background-color: #fff;
        padding: 5px;
        border: 1px solid #999;
        text-align: center;
        font-family: 'Roboto','sans-serif';
        line-height: 30px;
        padding-left: 10px;
      } 
    </style>

     <script>
           var map;
          //empty arrays for filling with active markers and polylines
       var markers = [];    
       var polys =[];

      var oneP = [
       {lat:48.618871,lng: 22.297566},
       {lat:48.618186,lng: 22.298707},
       {lat:48.617063,lng: 22.299621},
       {lat:48.612928,lng: 22.302788}
      ];

      // Array of markers
      var zups = [
        {coords:{lat:48.618776,lng: 22.297590 },title:'<h2>Place 1 </h2><br></br><h3> 1, 2, 3, 12, 20 </h3>'},
        {coords:{lat:48.611788,lng: 22.303622 },title:'<h2>Place 2 </h2><br></br><h3> 1,9, 10,20,21 </h3>'},
        {coords:{lat:48.608147,lng: 22.306452 },title:'<h2>Place 3 </h2><br></br><h3> 1,9,10,20,21 </h3>'},
        {coords:{lat:48.604397,lng: 22.309360 },title:'<h2> Place 4 </h2><br></br><h3> 1,9,10,20,21 </h3>'},
        {coords:{lat:48.599380,lng: 22.313260 },title:'<h2>Place 5</h2><br></br><h3>  1,9,10,20,21 </h3>'},
        {coords:{lat:48.591408,lng: 22.319969 },title:'<h2>Place 6 </h2><br></br><h3> 1 </h3>'}
      ];

    function initMap(){
      // Map options
      var options = {
        zoom:13,
        center:{lat:48.620837,lng:22.287864}
      }
      // New map
      map = new google.maps.Map(document.getElementById('map'), options);
      }

    function addPoly(coords){
        Poly = new google.maps.Polyline({
        path:coords,
        strokeColor: '#FF0000',
        strokeOpacity: 1.0,
        strokeWeight: 2
        });
    polys.push(Poly);   
    }

    function SetPolyOnMap(map){
        for (var i = 0; i < polys.length; i++) 
        {
          polys[i].setMap(map);
        }
    }

    // Removes the markers from the map, but keeps them in the array.
      function clearPoly() {
        SetPolyOnMap(null);
      }

      // Shows any markers currently in the array.
      function showPoly() {
        SetPolyOnMap(map);
      }

      // Deletes all markers in the array by removing references to them.
      function deletePoly() {
        clearPoly();
        polys = [];
      }

      // Add Marker Function
      function addMarker(props){
        var marker = new google.maps.Marker({
          position:props.coords,
          map:map,
          title:props.title
        }); 

        // Check for customicon
      //  if(props.iconImage){
          // Set icon image
       //   marker.setIcon(props.iconImage);
       // }

        // Check content
        if(props.title){
          var infoWindow = new google.maps.InfoWindow({
            content:props.title 
          });

          marker.addListener('click', function(){
            infoWindow.open(map, marker);
          });
        }

      markers.push(marker);
      }

      function addMarkersIn(a,b){
       for(var i=a-1;i<b;i++){
        addMarker(zups[i]);}
      }

      // Sets the map on all markers in the array.
      function setMapOnAll(map) {
        for (var i = 0; i < markers.length; i++) {
          markers[i].setMap(map);
        }
      }

      // Removes the markers from the map, but keeps them in the array.
      function clearMarkers() {
        setMapOnAll(null);
      }

      // Shows any markers currently in the array.
      function showMarkers() {
        setMapOnAll(map);
      }

      // Deletes all markers in the array by removing references to them.
      function deleteMarkers() {
        clearMarkers();
        markers = [];
      }

     function one(){
        deleteMarkers();
        deletePoly();
        addMarkersIn(1,6);
        addPoly(oneP);
        showPoly();
        showMarkers();
    }

  </script>
  <script async defer
    src="https://maps.googleapis.com/maps/api/js?key=MY_KEY&callback=initMap">
    </script>
</head>
<body>
    <div id="floating-panel">
      <input onclick="one();" type=button value="1">
    </div>  
  <div id="map"></div>   
</body>
</html>

Answer 1

只需对您的代码进行这些更改将下面提到的方法添加到您的代码中：

 function getQueryParams() {
    // get the param 'query from url'
    var query = location.search.split('query=')[1];
    // if url has any parameter called 'query'
    if (query){
    // get the value of query and split it
    var coords = query.split(',');
    // separate lat and lng and return
    return {hasCoords: true,coords:{lat: parseFloat(coords[0]), lng: parseFloat(coords[1])}};
    } else {
    // if url do not have any parameter called 'query'
    return {hasCoords: false};
    }
}

此方法从页面 url.

获取并解析名为 'query' 的参数

并将 initMap() 方法修改为如下内容。

function initMap(){
  var coordsInQuery = getQueryParams(); 
  // Map options
  var options = {
    zoom:13,
    center:(coordsInQuery.hasCoords)?coordsInQuery:{lat:48.620837,lng:22.287864}
  }
  // New map
  map = new google.maps.Map(document.getElementById('map'), options);
  }

现在可以通过参数'query'将坐标传到页面中，预先在地图上设置位置

例如：your-domain/?query=47.5951518,-122.3316393

如何在 google 地图 api v3 中使用地图 url 查询？

How to use maps url query with google maps api v3?

javascript

url

google-maps-api-3

google-maps-urls