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