我是一名學習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部分時，它不起作用。
對此問題的任何迅速回應將不勝感激。
uj5u.com熱心網友回復：
無需向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>
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/477136.html
標籤：javascript html 谷歌地图