谷歌地图泛地 [英] google maps pan to

问题描述

一整天都在努力，通过文字链接在谷歌地图中设置一个平底锅。它看起来像地图本身的id没有被传递给函数，但我已经尝试了许多没有喜悦的事情。

 < script type =text / javascript> 
 var home = new google.maps.LatLng（4.915833，10.195313）; 
函数initialize（）{
 var myOptions = {
 zoom：2，
 center：home，
 mapTypeId：google.maps.MapTypeId.ROADMAP，
 mapTypeControl：false，
 panControl：true，
 panControlOptions：{
 position：google.maps.ControlPosition.LEFT_CENTER 
}，
 zoomControl：true，
 zoomControlOptions：{
 style：google.maps.ZoomControlStyle.LARGE，
 position：google.maps.ControlPosition.LEFT_CENTER 
}，
 scaleControl：false，
 streetViewControl ：true，
 streetViewControlOptions：{
 position：google.maps.ControlPosition.LEFT_CENTER 
} 
} 
 var map = new google.maps.Map（document.getElementById （map），myOptions）; 
 setMarkers（地图，目的地）; 
 clickroute（map）; 
} 
 var destinations = [
 ['Marbella'，36.509937，-4.886352]，
 ['Algarve'，37.016945，-7.928728]，
 ['London '，51.508129，-0.128005]，
 ['Istanbul'，41.00527，28.97696]，
 ['Whistler'，50.116168，-122.959423] 
]; 
 function setMarkers（map，locations）{
 var image = new google.maps.MarkerImage（'img / marker.png'，
 google.maps.Size（41,63）， 
 new google.maps.Point（0,0））; 
 for（var i = 0; i< locations.length; i ++）{
 var destination = locations [i]; 
 var myLatLng = new google.maps.LatLng（destination [1]，destination [2]）; 
 var marker = new google.maps.Marker（{
 position：myLatLng，
 map：map，
 icon：image，
 title：destination [0] 
}）; 
} 
} 
函数clickroute（lati，long）{
 var latLng = new google.maps.LatLng（51.433373，-0.712251）; 
 map.panTo（latLng）; 
} 
< / script> 
 
< li onclick =clickroute（）>测试< / li> 
  

有什么可能导致问题的想法？我收到了一个js错误：

  Uncaught TypeError：Object＃< HTMLDivElement>没有方法'panTo'
  

谢谢

理查德

解决方案

@onemach是正确的。

您必须在javascript的开头声明 map 作为全局变量。只需在< script type =text / javascript> 标签后立即执行 var map; 声明

2。
同时你的地图初始化应该改为

  map = new google.maps.Map（document .getElementById（map），myOptions）; //没有'var'
  

<3>您的电话 clickroute（） onClick < li> 不带参数。所以改变 clickroute（）的定义是这样的：

  function clickroute （）{//只是省略'lati'和'long'
 var latLng = new google.maps.LatLng（51.433373，-0.712251）; 
 map.panTo（latLng）; 
} 
  

现在点击 test < li> 您的地图将移动到点（51.433373，-0.712251）

Been struggling all day with setting a pan to in google maps from a text link. It looks like the id of the map itself isnt being passed through to the function but I have tried a number of things with no joy.

<script type="text/javascript">
    var home = new google.maps.LatLng(4.915833, 10.195313);
    function initialize() {
        var myOptions = {
            zoom: 2,
            center: home,
            mapTypeId: google.maps.MapTypeId.ROADMAP,
            mapTypeControl: false,
            panControl: true,
            panControlOptions: {
                position: google.maps.ControlPosition.LEFT_CENTER
            },
            zoomControl: true,
            zoomControlOptions: {
                style: google.maps.ZoomControlStyle.LARGE,
                position: google.maps.ControlPosition.LEFT_CENTER
            },
            scaleControl: false,
            streetViewControl: true,
            streetViewControlOptions: {
                position: google.maps.ControlPosition.LEFT_CENTER
            }
        }
        var map = new google.maps.Map(document.getElementById("map"), myOptions);
        setMarkers(map, destinations);
        clickroute(map);
    }
    var destinations = [
        ['Marbella', 36.509937, -4.886352],
        ['Algarve', 37.016945, -7.928728],
        ['London', 51.508129, -0.128005],
        ['Istanbul', 41.00527, 28.97696],
        ['Whistler', 50.116168, -122.959423]
    ];
    function setMarkers(map, locations) {
        var image = new google.maps.MarkerImage('img/marker.png',
        new google.maps.Size(41, 63),
        new google.maps.Point(0,0));
        for (var i = 0; i < locations.length; i++) {
            var destination = locations[i];
            var myLatLng = new google.maps.LatLng(destination[1], destination[2]);
            var marker = new google.maps.Marker({
                position: myLatLng,
                map: map,
                icon: image,
                title: destination[0]
            });
        }
    }
    function clickroute(lati, long) {
        var latLng = new google.maps.LatLng(51.433373, -0.712251);
        map.panTo(latLng);
    }
</script> 

<li onclick="clickroute()">test</li>

Any possible ideas on what could cause the issue? I get a js error with

Uncaught TypeError: Object #<HTMLDivElement> has no method 'panTo'

Thanks

Richard

解决方案

@onemach is correct.

1. You have to declare the map as a global variable at the beginning of javascript. Just do a var map; declaration immediately after <script type="text/javascript"> tag.

2. And at the same time your map initialization should be changed to

map = new google.maps.Map(document.getElementById("map"), myOptions); // without the 'var'

3. Your calling clickroute() onClick of <li> without parameters. So change the definition of clickroute() like this :

function clickroute() { //just omit the 'lati' and 'long'
    var latLng = new google.maps.LatLng(51.433373, -0.712251);
    map.panTo(latLng);
}

Now clicking on the test <li> your map will move to point (51.433373, -0.712251)

这篇关于谷歌地图泛地的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！