javascript - 加载没有标记的谷歌地图
问题描述
我有两个单选按钮。当第一个被选中时,我会显示一个带有一些标记的谷歌地图。我希望当我检查第二个单选按钮时,它会显示相同的地图,但没有标记。你能帮忙吗?
<div><input type="radio" name="reception" id="rad" value="livraison"> Livraison</div>
<div><input type="radio" name="reception" value="point"> Point de récuperation</div>
<div id="map" style=" display:none; height: 300px; border: 1px solid red;"></div>
<script type="text/javascript">
window.onload=function(){
var receps=document.querySelectorAll('[name=reception]');
for (var i = 0; i < receps.length ; i++)
{
receps[i].onclick=function(e){
if(e.target.value == 'livraison'){
document.getElementById('map').style.display = 'block';
}
else{
//How to display the map without markers
}
}
}
有maps api的回调函数:
function initMap() {
var sp = {lat: 23.54565, lng: 11.453};
var metro_a={lat:12.4545 , lng: 13.3148};
var metro_n={lat:10.934329596 , lng: 10.323665372};
var lieux=[
{
nom: "MT" ,
coordonnees:{lat: 11.93863, lng: 10.31413}
},
{
nom: "MA",
coordonnees:{lat:19.9361 , lng: 10.3148}
},
{
nom:"MN" ,
coordonnees:{lat:18.936 , lng: 10.323665372}
}
];
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 14,
center: sp
});
//--------------------------------------------------------------
for (var i = 0; i < lieux.length; i++) {
var marker= new google.maps.Marker({
position:lieux[i].coordonnees,
nom:lieux[i].nom,
map:map
});
}
PS:我想在两个收音机之间切换。如果选中 livraison,则地图显示时不带标记。如果点被选中,地图将显示带有标记
解决方案
如果所选单选按钮的值为“point”,则显示标记,否则不要:
var point = document.querySelector('input[name = reception]:checked');
if (point && point.value == 'point') {
var bounds = new google.maps.LatLngBounds();
for (var i = 0; i < lieux.length; i++) {
var marker = new google.maps.Marker({
position: lieux[i].coordonnees,
nom: lieux[i].nom,
map: map
});
bounds.extend(marker.getPosition());
}
map.fitBounds(bounds);
}
代码片段:
#map {
height: 100%;
display: none;
}
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
<div><input type="radio" name="reception" value="livraison"> Livraison</div>
<div><input type="radio" name="reception" value="point"> Point de récuperation</div>
<div id="map" style="height: 300px; border: 1px solid red;"></div>
<script type="text/javascript">
function initMap() {
var sp = {lat: 23.54565,lng: 11.453};
var metro_a = {lat: 12.4545,lng: 13.3148};
var metro_n = {lat: 10.934329596,lng: 10.323665372};
var lieux = [{nom: "MT",
coordonnees: {lat: 11.93863,lng: 10.31413
}
},{
nom: "MA",
coordonnees: {lat: 19.9361,lng: 10.3148}
},{
nom: "MN",
coordonnees: {lat: 18.936,lng: 10.323665372
}
}];
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 10,
center: sp
});
//--------------------------------------------------------------
var point = document.querySelector('input[name = reception]:checked');
if (point && point.value == 'point') {
var bounds = new google.maps.LatLngBounds();
for (var i = 0; i < lieux.length; i++) {
var marker = new google.maps.Marker({
position: lieux[i].coordonnees,
nom: lieux[i].nom,
map: map
});
bounds.extend(marker.getPosition());
}
map.fitBounds(bounds);
}
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?callback=initMap"></script>
<script type="text/javascript">
window.onload = function() {
var receps = document.querySelectorAll('[name=reception]');
//console.log(document.querySelectorAll('[name=reception]'))
for (var i = 0; i < receps.length; i++) {
receps[i].onclick = function(e) {
if (e.target.value == 'point') {
console.log('cest un point')
document.getElementById('map').style.display = "block";
initMap();
} else {
console.log('cest une livraison')
document.getElementById('map').style.display = "block";
initMap();
}
}
}
}
</script>
推荐阅读
- python - ModuleNotFoundError:没有名为“chatterbot”的模块
- python - 使用 Python 进行异常检测
- excel - 使用来自另一个工作表的串联引用更新单元格
- jenkins-pipeline - Jenkins 声明式管道 - 如何管理 Jenkins 服务器
- excel - VBA 将记录添加到工作表
- linux - 在同一项目中使用 .sa_sigaction 和 .sa_handler(手册页说明)
- python - 尝试在 jupyter notebook 中显示本地图像时出现语法错误
- python-3.x - 循环不会完成...缩进很差?
- css - rem 中的背景大小会导致 ie11 和 edge 出现问题
- node.js - 如何在客户端运行 server.js?