Question

当我点击链接时，我想在同一页面上显示地图上的位置。我已经通过我的网页上的API密钥集成了地图。这是我的代码：

<html>
    <body>
        <div id="googleMap" style="width:100%;height:400px;"></div>
        <?php
            $add = "Amity University, Lucknow";
            $link = "http://maps.google.com/?q=".$add;
        ?>
        <a href="<?php echo $link; ?>">Amity University, Lucknow</a>
        <script>
            function myMap() {
            var mapProp= {
                center:new google.maps.LatLng(51.508742,-0.120850),
                zoom:5,
            };
            var map=new google.maps.Map(document.getElementById("googleMap"),mapProp);
            }
        </script>
        <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB4jChq2-_I4Dc0KSh3VI_OCaCDcG68oq8&callback=myMap"></script>
    </body>
</html>

我不希望将结果放在另一个页面上，我希望相同的地图移动到所需的位置。

Answer 1

你需要从api获取坐标并重新加载myMap函数（）

for Amity University-Lucknow，坐标为＆＃34; 26.8509922,81.0476597＆＃34;

function myMap(x,y) {
        var mapProp= {
            center:new google.maps.LatLng(x,y),
            zoom:5,
        };
        var map=new google.maps.Map(document.getElementById("googleMap"),mapProp);
}

你应该从＆＃34;＆lt;中删除href。 a＆gt;＆＃34;因为它正在更改URL，而URL又会更改页面。

更新：

<html>
<body>
    <div id="googleMap" style="width:100%;height:400px;"></div>
    <a onClick="myMap(26.8509922,81.0476597)">Amity University, Lucknow</a>
    <script>
        function myMap(x,y) {
            if(x==undefined || y==undefined){
                x = 51.508742;
                y= -0.120850;
            }
        var mapProp= {
            center:new google.maps.LatLng(x,y),
            zoom:15,
        };
        var map=new google.maps.Map(document.getElementById("googleMap"),mapProp);
        }
    </script>
    <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB4jChq2-_I4Dc0KSh3VI_OCaCDcG68oq8&callback=myMap"></script>
</body>

您必须从gmaps获取链接的坐标并将其粘贴到onClick（myMap（{x，} {y}））

Answer 2

最简单的解决方案是使用Geocoder（除非你有“地方”的坐标）。

function geocodeAddress(address) {
    var geocoder = new google.maps.Geocoder();
    geocoder.geocode({address: address}, function(results, status) {
      if (status == "OK") {
         if (results[0].geometry.viewport) map.fitBounds(results[0].geometry.viewport);
         else if (results[0].geometry.bounds) map.fitBounds(results[0].geometry.bounds);
         else map.setCenter(results[0].geometry.location);
      } else alert("geocoder failed, status: "+status);
    });
}

然后在HTML中使用它：

<a href="javascript:geocodeAddress('Amity University, Lucknow');">Amity University, Lucknow</a> - 
<a href="javascript:geocodeAddress('London, UK');">London</a> - 
<a href="javascript:geocodeAddress('Oxford University');">Oxford</a>

proof of concept fiddle

代码段

html,
body,
#map {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}

<div id="googleMap" style="width:100%;height:400px;"></div>
<a href="javascript:geocodeAddress('Amity University, Lucknow');">Amity University, Lucknow</a> -
<a href="javascript:geocodeAddress('London, UK');">London</a> - <a href="javascript:geocodeAddress('Oxford University');">Oxford</a>
<script>
  // global map variable
  var map;

  function myMap() {
    var mapProp = {
      center: new google.maps.LatLng(51.508742, -0.120850),
      zoom: 5,
    };
    // initialize global map variable
    map = new google.maps.Map(document.getElementById("googleMap"), mapProp);
  }

  function geocodeAddress(address) {
    var geocoder = new google.maps.Geocoder();
    geocoder.geocode({
      address: address
    }, function(results, status) {
      if (status == "OK") {
        if (results[0].geometry.viewport) map.fitBounds(results[0].geometry.viewport);
        else if (results[0].geometry.bounds) map.fitBounds(results[0].geometry.bounds);
        else map.setCenter(results[0].geometry.location);
      } else alert("geocoder failed, status: "+status);
    })
  }
</script>
<script src="https://maps.googleapis.com/maps/api/js?callback=myMap"></script>

当我点击链接（地点的名称）时，它应该在同一页面上的地图中显示位置

2 个答案: