Question

我想在我的页面上显示几个谷歌地图，我试图改变功能名称，但没有运气，有谁知道我必须在哪里更改varibles的名称。因为我试图将initialize函数更改为initialize2，但我想我必须在更多地方更改此名称，因为我有多个地址

到目前为止，这是我的代码

  $(document).ready(function () {

            /* google maps */

            google.maps.visualRefresh = true;

            var map;
            function initialize() {
                var geocoder = new google.maps.Geocoder();
                var address = $('#map-eindhoven').text(); /* change the map-input to your address */
                var mapOptions = {
                    zoom: 15,
                    mapTypeId: google.maps.MapTypeId.ROADMAP
                };
                map = new google.maps.Map(document.getElementById('map-canvas-eindhoven'), mapOptions);

                if (geocoder) {
                    geocoder.geocode({ 'address': address }, function (results, status) {
                        if (status == google.maps.GeocoderStatus.OK) {
                            if (status != google.maps.GeocoderStatus.ZERO_RESULTS) {
                                map.setCenter(results[0].geometry.location);

                                var infowindow = new google.maps.InfoWindow(
                                    {
                                        content: address,
                                        map: map,
                                        position: results[0].geometry.location,
                                    });

                                var marker = new google.maps.Marker({
                                    position: results[0].geometry.location,
                                    map: map,
                                    title: address
                                });

                            } else {
                                alert("No results found");
                            }
                        }
                    });
                }
            }
            google.maps.event.addDomListener(window, 'load', initialize);


            var map;
            function initialize2() {
                var geocoder = new google.maps.Geocoder();
                var address = $('#map-rotterdam').text(); /* change the map-input to your address */
                var mapOptions = {
                    zoom: 15,
                    mapTypeId: google.maps.MapTypeId.ROADMAP
                };
                map = new google.maps.Map(document.getElementById('map-canvas-rotterdam'), mapOptions);

                if (geocoder) {
                    geocoder.geocode({ 'address': address }, function (results, status) {
                        if (status == google.maps.GeocoderStatus.OK) {
                            if (status != google.maps.GeocoderStatus.ZERO_RESULTS) {
                                map.setCenter(results[0].geometry.location);

                                var infowindow = new google.maps.InfoWindow(
                                    {
                                        content: address,
                                        map: map,
                                        position: results[0].geometry.location,
                                    });

                                var marker = new google.maps.Marker({
                                    position: results[0].geometry.location,
                                    map: map,
                                    title: address
                                });

                            } else {
                                alert("No results found");
                            }
                        }
                    });
                }
            }
            google.maps.event.addDomListener(window, 'load', initialize2);
        });

Answer 1

尝试用此替换您的第二次初始化：

        var map2;
        function initialize2() {
            var geocoder = new google.maps.Geocoder();
            var address = $('#map-rotterdam').text(); /* change the map-input to your address */
            var mapOptions = {
                zoom: 15,
                mapTypeId: google.maps.MapTypeId.ROADMAP
            };
            map2 = new google.maps.Map(document.getElementById('map-canvas-rotterdam'), mapOptions);

            if (geocoder) {
                geocoder.geocode({ 'address': address }, function (results, status) {
                    if (status == google.maps.GeocoderStatus.OK) {
                        if (status != google.maps.GeocoderStatus.ZERO_RESULTS) {
                            map2.setCenter(results[0].geometry.location);

                            var infowindow = new google.maps.InfoWindow({
                                content: address,
                                map: map2,
                                position: results[0].geometry.location,
                            });

                            var marker = new google.maps.Marker({
                                position: results[0].geometry.location,
                                map: map2,
                                title: address
                            });

                        } else {
                            alert("No results found");
                        }
                    }
                });
            }
        }
        google.maps.event.addDomListener(window, 'load', initialize2);

Example

Answer 2

map = new google.maps.Map(document.getElementById('map-canvas-eindhoven'), mapOptions);

map = new google.maps.Map(document.getElementById('map-canvas-rotterdam'), mapOptions);

map变量进入就绪函数的范围，并在第二次映射初始化后重写。

您应该在创建实例之前添加var语句，而不是在函数之前添加。阅读本文以获取更多信息。 https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/var

Answer 3

google.map.Map（）是一个对象＆lt; =＆gt;您保存数组对象以验证地图。和1个项目来关注您网站上的1个标记地图

var map = new Array();

    map[1] =  new google.maps.Map(document.getElementById('map-a'), mapOptions);
    map[2] =  new google.maps.Map(document.getElementById('map-b'), mapOptions);

在一个页面上添加两个或更多谷歌地图

3 个答案: