Question

好的 - 这个我非常肯定只是我在晚上工作太晚了，只是遗漏了一些非常简单的东西，所以如果这是我在研究中遗漏的东西，我真的很抱歉，但我已经拖网搜寻了......

我有一张地图，可以很好地显示许多标记（几千个）从一个漂亮的xml文件中加载，但是我真的希望地图以客户端当前位置为中心。如果我用硬线连接，一切都很好，但是动态位很难证明是不好的。我查看了Google文档，并查看了这里，甚至尝试对其他一些网站进行逆向工程......这是我在body.onload.initialize上运行的代码（）

var myLat = 35.702069;                     // default location to set centre
var myLng = 139.775327;                    // default location to set centre

var myLatlng = new google.maps.LatLng(myLat,myLng);
//Set up the options for the map
var myOptions =
        {
        zoom: 12,            // Set the zoom level - 15 is good for a suburb
        minZoom: 10,         // Stop zooming too far out
        center: myLatlng,    // ------ centre on the current location ------
        mapTypeId: google.maps.MapTypeId.ROADMAP
        }
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
// pop a marker in the place the map is centred... current location
var myImage = new google.maps.MarkerImage('./images/markers/arrow.png');
var marker = createMarker(GetHomeLocationPopup(), myLatlng, myImage);

我尝试过使用以下内容：

var myLat = position.coords.latitude;
var myLng = position.coords.longitude;

然而，在这种情况下，这些看起来不像是暴露出来的。

以下是我的声明：

<body onload="initialize()" onunload="GUnload()">
<section id="content" style="width:70%; height:80%">
    <div id="map_canvas" style="width:100%; height:80%"></div>
</section>
</body>

我真的不喜欢使用其他第三方库，并尽可能地使用原生Google代码。

感谢任何帮助 - 这意味着我可以睡得更好： - \

Answer 1

首先，在获得客户端坐标后，您可以通过浏览器权限获取用户的位置，

 function success(position) {
    var latitude  = position.coords.latitude;
    var longitude = position.coords.longitude;

    var marker = new google.maps.Marker({
                    position: new google.maps.LatLng(latitude, longitude),
                    map: map,
                    title: "Last Location",
                    icon: "http://i.imgur.com/S1ooXKy.png"
                });

    map.setCenter(new google.maps.LatLng(latitude, longitude));
    map.setZoom(13);
  };

  function error() {
   console.log("Unable to retrieve your location");
  };

  console.log("Locating…");

  navigator.geolocation.getCurrentPosition(success, error);

Answer 2

使用地图调整大小触发器。

// Set the center of the map
map.setCenter(new google.maps.LatLng(lat, lng)); // google.maps.LatLng object!

// Trigger resize event, telling the API to refresh the view
google.maps.event.trigger(map, 'resize');

查看类似问题：Google Maps container doesn't resize properly after animation

API链接：

https://developers.google.com/maps/documentation/javascript/reference#LatLng

https://developers.google.com/maps/documentation/javascript/events?hl=en

Answer 3

我查看了两个选项，@Notável中的选项非常有用。 @DanFromGermany也很有趣，稍后我会把它留在我脑海里。

我将myLat和myLng变量声明为全局变量（在此上下文之外）
然后我将position.coords.移到success()函数
在success()函数中，我添加了一个新变量myPos来捕获 new google.maps.LatLng(latitude, longitude)

这很好地达到了预期的效果。感谢所有阅读此问题的人： - ）

如何将地图置于当前位置html5的中心

3 个答案: