如何在用户更改时基于 <select> 元素条目添加 google 地图标记

Question

我是一名学习web开发的学生。我想根据 select 元素条目添加 google 地图标记。所以我创建了以下 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 是我用来从函数中获取用户输入值的全局变量，我的目的是用它来添加 google 地图标记。所以我的地图代码如下。

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;

Colombo 标记和 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,
        })
    }
})

我使用了 change 事件，因为每次用户更改 select 元素时我都需要更改全局变量值选项。问题是当我将以上条件代码放在 google 地图标记代码 JS 部分时，它不起作用。

如能及时回复此问题，我们将不胜感激。

Answer 1

不需要向 window 超全局变量发送垃圾邮件 - 但您确实需要一些方法将 City 1、City 2 等名称与实际位置相关联。这可以通过在对象文字（或 JSON 变量）中分配相关详细信息并以 CityName 作为键来轻松完成。使用该键，您可以查找名称、纬度和经度值

以下代码片段将抛出一个错误，指的是 google is not defined 类型的东西，但应该给出可能如何继续的想法。

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>

如何在用户更改时基于 <select> 元素条目添加 google 地图标记

How to add google map markers based on <select> element entries when user changes it

html

javascript

google-maps