如何通过下拉菜单在Google地图上设置标记？

Question

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

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));

                    });
                }

我的代码可以正常工作到很长时间，并且只有标记未显示。

Answer 1

1. 在marker函数外部声明initialize。

   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 }); }

2. 更改marker在load_json_data函数中的位置。

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