个人中心
gpt4 book ai didi

javascript - 如何将 map 置于当前位置 html5 的中心

转载 作者：行者123 更新时间：2023-12-03 12:00:41 26 4
gpt4 key购买 nike

好吧 - 我相当确定这只是我在晚上太晚的时候在做某件事，只是错过了一些非常简单的东西，所以如果这是我在研究中错过的东西，我真的很抱歉，但我'我们拖网又拖网……

我有一张 map ，可以完美地显示许多标记(几千个)，该 map 是从一个漂亮的 xml 文件加载的，但是我真的希望 map 以客户端当前位置为中心。如果我硬接线，一切都很好，但是动态位被证明太难了。我查看了有关它的 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 代码。

感激不尽的任何帮助 - 这将意味着我可以睡得更好:-\

最佳答案

首先，您需要在获得客户端坐标后通过浏览器许可用户的位置，您可以执行此操作，

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

关于javascript - 如何将 map 置于当前位置 html5 的中心，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/25428879/

26 4 0
文章推荐： javascript - 带 SlideToggle 的 float div
文章推荐： c# - 如何从.Net中的远程设备接收TCP IP消息
文章推荐： c - 本地网络外的 UDP "sendto"
文章推荐： c# - 使用 Jquery Ajax 将模型和 2 个复选框列表发布到 Controller
行者123
个人简介

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

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