个人中心
gpt4 book ai didi

javascript - 谷歌地图通过单击多个标记来放大标记

转载 作者：数据小太阳 更新时间：2023-10-29 05:02:40 24 4
gpt4 key购买 nike

我已经在 StackOverflow 和 Google 搜索中阅读了很多其他帖子，但我仍然无法使其正常工作。我认为这与我的 for 循环有关。我已经为信息窗口设置了鼠标悬停事件，但我想要的是当您单击标记并将其置于 map 中心时， map 会放大标记。我试过:

google.maps.event.addListener(marker,'click',function(e) {
                map.setZoom(9);
                map.setCenter(e.latLng);
            });

效果最好但仍然不总是以标记为中心，尤其是在多次点击之后。有时甚至看不到标记。

我真正想使用的代码片段是这样的:

// add the double-click event listener
            google.maps.event.addListener(marker, 'dblclick', function(event){
                map = marker.getMap();

                map.setCenter(overlay.getPosition()); // set map center to marker position
                smoothZoom(map, 12, map.getZoom()); // call smoothZoom, parameters map, final zoomLevel, and starting zoom level
            })


            // the smooth zoom function
            function smoothZoom (map, max, cnt) {
                if (cnt >= max) {
                        return;
                    }
                else {
                    y = google.maps.event.addListener(map, 'zoom_changed', function(event){
                        google.maps.event.removeListener(y);
                        self.smoothZoom(map, max, cnt + 1);
                    });
                    setTimeout(function(){map.setZoom(cnt)}, 80);
                }
            }

因为它应该具有平滑缩放功能。但是我根本无法让这个工作。大多数对标记的点击会转到纽约长岛或无处可去。

我的代码如下:

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
  html { height: 100% }
  body { height: 100%; margin: 0; padding: 0 }
  #map-canvas { height: 100% }
</style>
<script type="text/javascript"
  src="https://maps.googleapis.com/maps/api/js?key=(api)&sensor=false">
</script>
<script type="text/javascript">
google.maps.visualRefresh = true;

function initialize() {
    var mapOptions = {
      center: new google.maps.LatLng(42, -97),
      zoom: 4,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    };

    var jobs = [
        ['Taylor', 'Texas', 30.570155, -97.409649, 'machine install and training'],
        ['Fort Riley', 'Kansas', 39.104172, -96.735558, 'machine install and training'],
        ['Toronto', 'Ontario, Canada', 43.653226, -79.383184, 'machine install and training'],
        ['Spokane', 'Washington', 47.658780, -117.426047, 'Machine install and training'],
        ['New Paris', 'Indiana', 41.504848, -85.826487, 'machine install'],
        ['Charleston', 'Mississippi', 34.00711, -90.055194, 'machine install and training'],
        ['Tinley Park', 'Illinois', 41.596405, -87.785119, 'training.'],
        ['Savannah', 'Georgia', 32.08078, -81.090719, 'machine install and training'],
        ['Long Island', 'New York', 40.852505, -73.135849, 'Machine install and training']
    ];

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

    var infoWindow = new google.maps.InfoWindow;

        for (var i = 0; i < jobs.length; i++) {
            var city = jobs[i][0];
            var state = jobs[i][1];
            var lat = jobs[i][2];
            var lng = jobs[i][3];
            var desc = jobs[i][4];
            var z = i;
            var myLatLng = new google.maps.LatLng(lat, lng);

            var content = '<div class="map-content"><h3>' + city + ', ' + state +
                 '</h3>' + desc + '</div>';

            var marker = new google.maps.Marker({
                map: map,
                title: city + state,
                position: myLatLng,
                zIndex: z
            });

            google.maps.event.addListener(marker, 'mouseover', (function(marker, content) {
                return function() {
                    infoWindow.setContent(content);
                    infoWindow.open(map, marker);
                }
            })(marker, content));

            // add the double-click event listener
            google.maps.event.addListener(marker, 'dblclick', function(event){
                map = marker.getMap();

                map.setCenter(overlay.getPosition()); // set map center to marker position
                smoothZoom(map, 12, map.getZoom()); // call smoothZoom, parameters map, final zoomLevel, and starting zoom level
            })


            // the smooth zoom function
            function smoothZoom (map, max, cnt) {
                if (cnt >= max) {
                        return;
                    }
                else {
                    y = google.maps.event.addListener(map, 'zoom_changed', function(event){
                        google.maps.event.removeListener(y);
                        self.smoothZoom(map, max, cnt + 1);
                    });
                    setTimeout(function(){map.setZoom(cnt)}, 80);
                }
            }
        }
}

  google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body onload="initialize()">
    <div id="map-canvas"/>
</body>
</html>

如果我删除尝试缩放点击事件的代码并将其从循环中取出，它仅适用于我的长岛标记(因为这是处理的数组中的最后信息)。任何关于如何让它在点击时以标记为中心的帮助都会很棒。我真的找不到任何在数组和循环上实现的搜索。我是 Google API 的新手，而且我只在此基础上完成了基本的 Javascript。

编辑:An example of this is here.

最佳答案

看起来你有范围问题。

试试这个作为事件监听器:

google.maps.event.addListener(marker, 'click', function() {
map.panTo(this.getPosition());
});

这在这里有效:

http://jsfiddle.net/iambnz/mQEwh/

关于javascript - 谷歌地图通过单击多个标记来放大标记，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/17775270/

24 4 0
文章推荐： 获取所有子域的javascript正则表达式
文章推荐： ios - 通过 navigationController 使用 segue 传递数据
文章推荐： swift - 在 Swift 中从 WKWebview 获取 HTML
文章推荐： javascript - 是否有可能知道用户在页面上花费了多长时间？
数据小太阳
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com