使用javascript

Question

您好我正在尝试使用javascript更改Google地图和h3文字，但它无效。

我想要做的是显示不同的地图和标题，所以基本上我想用<div id="map"></div>替换id="map2" id以显示柏林位置而不是洛杉矶。 我还想用<h3 div="textChange">Worlds Finals Season 3 and 6</h3>替换"Worlds Season 5"文字。

这是HTML：

<article>
<div class="container">
<button onclick="changediv()">Season 5</button>
<h3 id="textChange">Worlds Finals Season 3 and 6</h3>
<div id="map"></div>
</div>
</article>

这是Javascript：

function initMap() {
    var losAngeles = {
        lat: 34.038037,
        lng: -118.244753
    };
    var map = new google.maps.Map(document.getElementById('map'), {
        zoom: 4,
        center: losAngeles
    });
    var marker = new google.maps.Marker({
        position: losAngeles,
        map: map
    });

    var berlin = {
        lat: 52.518894,
        lng: 13.407413
    };
    var map2 = new google.maps.Map(document.getElementById('map2'), {
        zoom: 4,
        center: berlin
    });

function changediv() {
    if (document.getElementById("map")) {
        document.getElementById("textChange").innerHTML = "Worlds Finals Season 5";          
        document.getElementById("map").id = "map2";
    }
}

编辑：＆＃34; onlick＆＃34; ＆＃34; DIV＆＃34;和parantheses被添加，所以现在h3文本发生了变化，但是地图仍然没有改变，我是否必须重新启动页面才能使用？使用谷歌地图api。

Answer 1

<强> 1）  这里有一个错字：

<h3 div="textChange">Worlds Finals Season 3 and 6</h3>

将其更改为：

<h3 id="textChange">Worlds Finals Season 3 and 6</h3>

<强> 2）  正如评论中提到的那样，html中还有另一个拼写错误

<button onlick="changediv">Season 5</button>

当您触发单击时需要调用该函数时，您忘记了括号。

<button onlick="changediv()">Season 5</button>

第3）  最后但并非最不重要的是地图。 。应该重用根据doc的Map实例，而不是创建一个新的实例，你应该只改变位置。

function changeDiv(){
  if (document.getElementById("map")) {
    document.getElementById("textChange").innerHTML = "Worlds Finals Season5";          
    var location = new google.maps.LatLng(berlin.lat, berlin.lng);
    map.panTo(location)
  }

}

Answer 2

您只需使用map.setCenter（LatLng）移动地图即可。 此方法不会使用任何其他标记，也不会删除现有标记。你也可以通过移动地图 哑剧（经纬度）   初始化地图后，这两种方法也可用。

您可以在这里阅读更多内容 https://developers.google.com/maps/documentation/javascript/reference#Map