Question

我完全是谷歌地图api的新手，我不知道它将如何配置显示两个地图。我正在使用地图显示附近的学校，并且客户要求在不同位置的单页中显示3张地图，每张地图上有不同的数据。这里的问题是，当我把一个新的地图div和更改脚本时，它不会出现。更改了id不显示，在脚本中更改init in loading = places＆amp; callback = initMap不显示更改的js不再工作。我的js代码是

<script type="text/javascript">
var map;
var infowindow;
function initMap() {
  var pyrmont = {lat: <?= $data->latitude ?>, lng: <?= $data->longitude ?>};
  map = new google.maps.Map(document.getElementById('map2'), {
    center: pyrmont,
    zoom: 15
  });

  infowindow = new google.maps.InfoWindow();
  var service = new google.maps.places.PlacesService(map);
  service.nearbySearch({
    location: pyrmont,
    radius: 1500,
    type: ['school']
  }, schoolCallback);


}
function schoolCallback(results, status) {
  if (status === google.maps.places.PlacesServiceStatus.OK) {
    for (var i = 0; i < results.length; i++) {
      createSchoolMarker(results[i]); //results doesn't contain anything related to type (school,store,etc)
    }
  }
}
function createSchoolMarker(place) {
  var placeLoc = place.geometry.location;
  var marker = new google.maps.Marker({
    icon: "http://icons.iconarchive.com/icons/icons8/windows-8/16/Science-School-icon.png",
    map: map,
    position: place.geometry.location
  });
  google.maps.event.addListener(marker, 'click', function () {
    infowindow.setContent(place.name);
    infowindow.open(map, this);
  });
}

HTML代码

<div class="resultmap" style="width: 100%;">
    <div id="map3" style="width: 100%; height: 316px;"></div>
  </div>

任何人都开发了一个包含多张地图的页面，请提出合适的方法

Answer 1

我建议你把所有的javascript地图代码都包装成一个接受div元素id的函数。之后，有三个div元素，每个元素都有一个唯一的id。然后调用该函数三次。

<!-- each of the following will hold a map -->
<div id="map1"></div>
<div id="map2"></div>
<div id="map3"></div>

//wrap the javascript code for the map in a function
function makeMap("whichMap"){
  //the following will be the line that selects the div
  map = new google.maps.Map(document.getElementById(whichMap), {
}

两个谷歌地图在单页上具有不同的身份

1 个答案: