我是一名学习Web开发的学生。我想根据选择元素条目添加谷歌地图标记。所以我创建了以下 HTML 代码来创建下拉列表。
<select name="city" class="city" id="city-selection">
<option selected="selected" value="">Select City</option>
<option value="City 1">City 1</option>
<option value="City 2">City 2</option>
<option value="City 3">City 3</option>
<option value="City 4">City 4</option>
<option value="City 5">City 5</option>
<option value="City 6">City 6</option>
<option value="City 7">City 7</option>
</select>
为了在每次更改中获取用户输入值，我使用了以下 JavaScript 代码。
var selectElement = document.querySelector('#city-selection');
selectElement.addEventListener('change',function(){
console.log('Changed '+ event.target.value);
window.cityName = event.target.value;
})
window.cityName 是我用来从函数中获取用户输入值的全局变量，我的意图是使用它来添加谷歌地图标记。所以我的地图代码如下。
var map;
function initMap() {
map = new google.maps.Map(document.getElementById("map"), {
center: { lat: 7.8731, lng: 80.7718 },
zoom: 7.8,
mapTypeId: google.maps.MapTypeId.ROADMAP,
backgroundColor: '#FFF',
disableDefaultUI: true,
draggable: false,
scaleControl:false,
scrollwheel:false,
styles:[
{
"featureType": "water",
"elementType": "geometry",
"stylers": [
{ "visibility": "on" }
]
},
{
"featureType": "landscape",
"stylers": [
{ "visibility": "off" }
]
},
{
"featureType": "road",
"stylers": [
{ "visibility": "off" }
]
},
{
"featureType": "administrative",
"stylers": [
{ "visibility": "off" }
]
},
{
"featureType": "poi",
"stylers": [
{ "visibility": "off" }
]
},
{
"featureType": "administrative",
"stylers": [
{ "visibility": "on" }
]
},
{
"elementType": "labels",
"stylers": [
{ "visibility": "off" }
]
}
]
});
//colombo marker for city1
var colomboMark = new google.maps.Marker({
position:{lat:6.9271, lng:79.8612},
map:map,
})
//pahiyangala marker for city 2
var pahiyangalaMark = new google.maps.Marker({
position:{lat:6.6488, lng:80.2163},
map:map,
})
}
window.initMap = initMap;
科伦坡标记和 Pahiyangala 标记仅用于检查标记功能并且它们工作正常。
那么，有什么方法可以根据window.cityName值呈现这些标记。我知道我可以使用下面的代码中的 IF 条件来做到这一点。
selectElement.addEventListener('change',function(){
if(window.cityName == "City 1"){
var colomboMark = new google.maps.Marker({
position:{lat:6.9271, lng:79.8612},
map:map,
})
}
else if{
var pahiyangalaMark = new google.maps.Marker({
position:{lat:6.6488, lng:80.2163},
map:map,
})
}
})
我使用了更改事件，因为每次用户更改选择元素选项时我都需要更改全局变量值。问题是当我将上面的条件代码放在谷歌地图标记代码JS部分时，它不起作用。
对此问题的任何迅速回应将不胜感激。
无需向window超全局变量发送垃圾邮件 - 但您确实需要一些将City 1, City 2etc etc 名称与实际位置相关联的方法。这可以通过在以 CityName 作为键的对象文字（或 JSON 变量）中分配相关细节来轻松完成。使用该键，您可以查找名称、纬度和 lng 值
下面的代码片段将抛出一个关于google is not defined类型 thing 的错误，但应该给出一个可能如何继续的想法。
let markers = [];
const cities = {
'City 1': {
name: 'colombo',
lat: 6.9271,
lng: 79.8612
},
'City 2': {
name: 'pahiyangala',
lat: 6.6488,
lng: 80.2163
},
'City 3': {
name: 'Geronimo',
lat: 90,
lng: 0
},
'City 4': {
name: 'Pocahontas',
lat: 0,
lng: 90
}
};
const addmarker = (lat, lng, name = false) => {
return new google.maps.Marker({
title: name,
name: name,
position: {
lat: lat.toFixed(6),
lng: lng.toFixed(6)
},
map: map
});
};
document.querySelector('select[name="city"]').addEventListener('change', function(e) {
if (this.value != '' && cities.hasOwnProperty(this.value)) {
// clear previous markers
markers.forEach(mkr => mkr.setMap(null));
// find the correct city details in cities object
let obj = cities[this.value];
// add the marker
markers.push(addmarker(obj.lat, obj.lng, obj.name));
return true;
}
alert('bogus ' + this.value + ' not found')
})<select name='city' class='city'>
<option selected hidden disabled>Select City
<option value='City 1'>City 1
<option value='City 2'>City 2
<option value='City 3'>City 3
<option value='City 4'>City 4
<option value='City 5'>City 5
<option value='City 6'>City 6
<option value='City 7'>City 7
</select>更新：实现上述代码的完整示例 - 测试和工作。
<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset='utf-8' />
<title></title>
<style>
#map{
display:block;
width:100%;
height:calc(100vh - 2rem);
margin:0 auto;
}
select[name='city']{
height:2rem;
width:100%;
margin:0 auto;
}
</style>
<script>
function initMap(){
let latlng=new google.maps.LatLng( 43.136755, 6.368238 );
const map = new google.maps.Map( document.getElementById('map'), {
zoom: 18,
scrollwheel: true,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
let markers = [];
/*
depending upon what server you have (ie: PHP)
you might generate this list by querying your
database... that is usually how it would be
done.
*/
const cities = {
'City 1': {
name: 'colombo',
lat: 6.9271,
lng: 79.8612
},
'City 2': {
name: 'pahiyangala',
lat: 6.6488,
lng: 80.2163
},
'City 3': {
name: 'Geronimo',
lat: 90,
lng: 0
},
'City 4': {
name: 'Pocahontas',
lat: 0,
lng: 90
}
};
const addmarker = ( lat, lng, name ) => {
return new google.maps.Marker({
title: name,
name: name,
position: {
lat:lat,
lng:lng
},
map: map
});
};
document.querySelector('select[name="city"]').addEventListener('change', function(e) {
if( this.value != '' && cities.hasOwnProperty( this.value ) ) {
markers.forEach( mkr => mkr.setMap( null ) );
let obj = cities[ this.value ];
markers.push( addmarker( obj.lat, obj.lng, obj.name ) );
map.setCenter( new google.maps.LatLng( obj.lat, obj.lng ) );
return true;
}
alert('bogus ' + this.value + ' not found')
})
}
</script>
</head>
<body>
<select name='city' class='city'>
<option selected hidden disabled>Select City
<option value='City 1'>City 1
<option value='City 2'>City 2
<option value='City 3'>City 3
<option value='City 4'>City 4
<option value='City 5'>City 5
<option value='City 6'>City 6
<option value='City 7'>City 7
</select>
<div id='map'></div>
<script async defer src="https://maps.googleapis.com/maps/api/js?key=APIKEY&callback=initMap"></script>
</body>
</html>
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句