如何使用下拉菜单在谷歌地图上设置标记？答案

【问题标题】：How to set marker on google map with dropdown?如何使用下拉菜单在谷歌地图上设置标记？
【发布时间】：2018-10-21 10:52:04
【问题描述】：

我正在尝试在谷歌地图上显示标记，但标记未显示。当新的位置选择标记未显示时，我正在从下拉列表中选择位置。

html代码：

<select name="city" id="city" class="form-control input-lg">
           <option value="">Select city</option>
</select>

从 json 添加数据：

  function initialize() {
            map = new google.maps.Map(document.getElementById('map-canvas'), {
                zoom: 10,
                center: {lat: 10, lng: 10}
            });
            var marker = new google.maps.Marker({
                position: map.getCenter(),
                icon: {
                    path: google.maps.SymbolPath.CIRCLE,
                    scale: 10
                },
                draggable: true,
                map: map
            });
        }

        google.maps.event.addDomListener(window, 'load', initialize);

在下拉动作 js 处：

 $(document).on('change', '#state', function () {
                var state_id = $(this).val();

                    load_json_data1('state', state_id);

            });    

 function load_json_data1(id, parent_id)
                {
                    var lat = "";
                    var lang = "";
                    $.getJSON('1.json', function (data) {
                        $.each(data, function (key, value) {
                            if (value.id == parent_id)
                            {
                                lat = value.lat;
                                lang = value.lang;
                            }

                        });
                        var newzoom = 1 * 18,
                                newlat = 1 * lat,
                                newlng = 1 * lang;
                        map.setZoom(newzoom);
                        map.setCenter(new google.maps.LatLng(newlat, newlng));

                    });
                }

我的代码可以工作到 lat 和 long，只是标记没有显示。

【问题讨论】：

标签： google-maps

【解决方案1】：

在initialize 函数之外声明marker。

var marker; function initialize() { map = new google.maps.Map(document.getElementById('map-canvas'), { zoom: 10, center: {lat: 10, lng: 10} }); marker = new google.maps.Marker({ position: map.getCenter(), icon: { path: google.maps.SymbolPath.CIRCLE, scale: 10 }, draggable: true, map: map }); }
改变marker在load_json_data函数中的位置。

marker.setPosition(new google.maps.LatLng(newlat, newlng));

【讨论】：