问题：
谷歌地图与多个位置的html使用javascript上的按钮点击如何显示标记和信息窗口一次
仲孙雅达
我将谷歌地图与多个位置集成在HTML中。问题是，当我单击位置按钮时，位置更改和标记会出现在点上，但信息窗口不会在标记上弹出。当我点击标记时，信息窗口出现在弹出窗口中。所以我需要当我点击selecteor按钮时，标记和信息窗口立即显示，地图应该是缩放的。为您提供参考，附加了Javascript和HTML图像，请帮助我如何做到这一点？
<div class="col-sm-1hlaf col-md-1half text-left" style="padding-left: 0px; margin-top:20px;">
<h3 style="font-size: 2rem; color: #ffffff; font-weight: bold; margin-bottom: 2px;"> Head Office</h3>
<button type="button" class="btn btn-link" id="abudhabi">Abu Dhabi, UAE
var map;
function initialize() {
map = new google.maps.Map(document.getElementById('map-canvas'), {
zoom: 18,
center: new google.maps.LatLng(24.4850983,54.3645303)
});
}
function newLocation(newLat,newLng)
{
map.setCenter({ lat : newLat, lng : newLng,});
var marker = new google.maps.Marker({
position: new google.maps.LatLng(newLat,newLng), map: map, });
var contentString =
'<h3 >Uluru</h3>'+
'<p >Abcedeer</p>'+
'</div>';
var infowindow = new google.maps.InfoWindow({ content: contentString });
marker.addListener('click', function() { infowindow.open(map, marker); });
}
google.maps.event.addDomListener(window, 'load', initialize);
//Setting Location with jQuery
$(document).ready(function ()
{
$("#abudhabi").on('click', function () {newLocation(24.4850983,54.3645303);});
$("#dubai").on('click', function (){newLocation(25.1148601,55.1949989);});
$("#ksa").on('click', function () {newLocation(25.2642846,51,5155031);});
$("#jordan").on('click', function (){newLocation(31.8360368,35.6674318); });
$("#Seychelles").on('click', function (){newLocation(-4.6223488,55.4485224);});
$("#algeria").on('click', function (){newLocation(36.7538345,3.0534636); });
});<head>
<link> herf="https://stackpath.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"</link>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBu-916DdpKAjTmJNIgngS6HL_kDIKU0aU&callback=myMap"></script>
</head>
<body>
<div class="col-sm-1hlaf col-md-1half text-left" style="padding-left: 0px; margin-top:20px;">
<h3 style="font-size: 2rem; color: #ffffff; font-weight: bold; margin-bottom: 2px;"> Head Office</h3>
<button type="button" class="btn btn-link" id="abudhabi">Abu Dhabi, UAE</button>
<h3 style="font-size: 2rem; color: #ffffff; font-weight: bold; margin-bottom: 2px;"> Regional Offices</h3>
<button type="button" class="btn btn-link" id="dubai">Dubai</button><br/>
<button type="button" class="btn btn-link" id="ksa">KSA</button><br/>
<button type="button" class="btn btn-link" id="jordan">Jordan</button><br/>
<button type="button" class="btn btn-link" id="Seychelles">Seychelles</button><br/>
<button type="button" class="btn btn-link" id="algeria">Algeria</button> <br/>
<button type="button" class="btn btn-map btn-sm" onclick="openWin()" value="print a map" style="margin-top:54px;">Print Map</button>
</div>
<div class="col-md-6 col-sm-6" id="myMap">
<div style="width:100%; height:345px; margin: 40px 0 0 0;" id="map-canvas"></div>
</div>
</body地区办事处迪拜
KSA
约旦
塞舌尔
阿尔及利亚
打印地图
共有1个答案
孔华池
您必须将您的\u API\u密钥更改为实际的API密钥，才能正确执行以下示例
代码中几乎没有错误。
<link> herf="https://stackpath.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"</link>
应该是
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
而且没有叫做myMap的函数
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=myMap"></script>
它会设定地图
google.maps.event.addDomListener(window, 'load', initialize);
所以，把它改成
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY"></script>
根据您的评论，我会将所有位置信息保存到一个对象中，如下所示
并更改函数newLocation
var map, marker, infowindow;
function initialize() {
map = new google.maps.Map(document.getElementById('map-canvas'), {
zoom: 18,
center: new google.maps.LatLng(24.4850983, 54.3645303)
});
}
function newLocation(location) {
map.setCenter({
lat: location.lat,
lng: location.lng,
});
// if marker exists, remove it from the map
if (marker)
marker.setMap(null);
marker = new google.maps.Marker({
position: new google.maps.LatLng(location.lat,location.lng),
map: map,
});
var contentString =
'<h3 >'+ location.info1 +'</h3>'+
'<p >'+ location.info2 +'</p>'+
'</div>';
infowindow = new google.maps.InfoWindow({
content: contentString
});
// immediately open the infowindow
infowindow.open(map, marker);
}
google.maps.event.addDomListener(window, 'load', initialize);
var Location = {
abudhabi: {
lat: 24.4850983,
lng: 54.3645303,
info1: 'abudhabi-1',
info2: 'abudhabi-2'
},
dubai: {
lat: 25.1148601,
lng: 55.1949989,
info1: 'dubai-1',
info2: 'dubai-2'
},
ksa: {
lat: 25.2642846,
lng: 51.5155031,
info1: 'ksa-1',
info2: 'ksa-2'
},
jordan: {
lat: 31.8360368,
lng: 35.6674318,
info1: 'jordan-1',
info2: 'jordan-2'
},
Seychelles: {
lat: -4.6223488,
lng: 55.4485224,
info1: 'Seychelles-1',
info2: 'Seychelles-2'
},
algeria: {
lat: 36.7538345,
lng: 3.0534636,
info1: 'algeria-1',
info2: 'algeria-2'
},
}
//Setting Location with jQuery
$(document).ready(function() {
$("#abudhabi").on('click', function() {
newLocation(Location.abudhabi);
});
$("#dubai").on('click', function() {
newLocation(Location.dubai);
});
$("#ksa").on('click', function() {
newLocation(Location.ksa);
});
$("#jordan").on('click', function() {
newLocation(Location.jordan);
});
$("#Seychelles").on('click', function() {
newLocation(Location.Seychelles);
});
$("#algeria").on('click', function() {
newLocation(Location.algeria);
});
});<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY"></script>
<div class="col-sm-1hlaf col-md-1half text-left" style="padding-left: 0px; margin-top:20px;">
<h3 style="font-size: 2rem; color: #ffffff; font-weight: bold; margin-bottom: 2px;"> Head Office</h3>
<button type="button" class="btn btn-link" id="abudhabi">Abu Dhabi, UAE</button>
<h3 style="font-size: 2rem; color: #ffffff; font-weight: bold; margin-bottom: 2px;"> Regional Offices</h3>
<button type="button" class="btn btn-link" id="dubai">Dubai</button><br/>
<button type="button" class="btn btn-link" id="ksa">KSA</button><br/>
<button type="button" class="btn btn-link" id="jordan">Jordan</button><br/>
<button type="button" class="btn btn-link" id="Seychelles">Seychelles</button><br/>
<button type="button" class="btn btn-link" id="algeria">Algeria</button> <br/>
<button type="button" class="btn btn-map btn-sm" value="print a map" style="margin-top:54px;">Print Map</button>
</div>
<div class="col-md-6 col-sm-6" id="myMap">
<div style="width:100%; height:345px; margin: 40px 0 0 0;" id="map-canvas"></div>
</div>
类似资料：
-
还有另外四个if语句，它们对其他类别做同样的事情。 它会显示标记，但当我单击标记时，它会显示上次创建的标记的信息窗口。
-
问题内容： 我想在Google Maps android上显示带有多个标记的位置，问题是当我运行我的应用程序时，它只显示一个位置/标记，这是我的代码： 我不知道我的错在哪里，希望有人能帮助我解决我的问题，非常感谢你 问题答案： 用这个： 或者，您也可以使用以下命令： 其中 纬度 和 经度 是存储在数组列表中的具有不同名称的字符串.....
-
问题内容： 我正在使用react-google-maps显示带有标记的地图，当您单击标记时，所有信息窗口都会打开。当我单击它时，我只想显示一个标记的信息窗口，而其他窗口保持关闭状态。 这是我的代码： 我用这个打开和关闭InfoWindow 我正在绘制所有标记，并在地图上显示它们。如何单击仅打开一个标记的InfoWindow？ 这是一个相关的问题，但这不是React提出的，并且不使用react-go
-
我想为谷歌地图上的每个标记创建一个自己的窗口。我尝试了这个： 不幸的是，只有第二个标记有一个包含的窗口。如果我单击第一个标记，那么带有的第二个标记的窗口就会弹出。我不明白为什么会发生这种情况。 我注意到，如果我为第二个标记和第二个窗口使用一个新变量，每个标记都有自己的窗口，如下所示： 但我完全不明白为什么我需要使用新的变量。为什么我不能覆盖旧的变量？ 注意：这个问题是关于如何获取多个不同的info
-
我想用谷歌地图显示多个位置 为了显示一个我会去https://www.maps.google.com/maps?daddr=20.566645.345 类似于 https://www.maps.google.com/maps?daddr=20.566645.345 这可能来自网址吗？
-
我正在创建一个google maps应用程序，我如何使用JavaScript/HTML5创建一个按钮，在地图上的任何地方随机投下一个标记呢？