使用javascript

时间:2017-04-24 15:09:16

标签: javascript html innerhtml

您好我正在尝试使用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。

2 个答案:

答案 0 :(得分:2)

<强> 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)
  }

}

答案 1 :(得分:0)

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

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