必应地图显示点击事件经纬度

最新推荐文章于 2024-03-14 18:33:22 发布

wangshaner1

最新推荐文章于 2024-03-14 18:33:22 发布

阅读量3.7k

点赞数

分类专栏：前端文章标签：地图必应 html javascript

本文链接：https://blog.csdn.net/kangrydotnet/article/details/43987707

版权

前端专栏收录该内容

9 篇文章 0 订阅

订阅专栏

必应地图的官方sdk说明文档网址：https://www.bingmapsportal.com/ISDK/AjaxV7#CreateMap1，请仔细研读。

但是翻遍官方说明文档，并没有展示如何获得事件的经纬度。网上查询好久，均未找到。摸索许久，终于获知。在此粘出，方便他人，亦供自己日后查阅。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
    <head>
        <title>Map with valid credentials</title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
        <script type="text/javascript" src="http://dev.ditu.live.com/mapcontrol/mapcontrol.ashx?v=7.0&mkt=zh-cn"></script>
        <script type="text/javascript">
        var map = null;
             
        function getMap()
        {
            map = new Microsoft.Maps.Map(document.getElementById('myMap'), {
                credentials: 'your credentials', zoom: 3}); //这里修改为你的密码
            Microsoft.Maps.Events.addHandler(map, 'click', displayInfo); 
        }   
       
        function displayInfo(e){
            //若点击到地图的标记上，而非地图上
            var loc;
            if (e.targetType == "pushpin") {
                loc = e.target.getLocation();
            }
            //若点击到地图上
            else {
                var point = new Microsoft.Maps.Point(e.pageX, e.pageY);
                loc = e.target.tryPixelToLocation(point, Microsoft.Maps.PixelReference.page);
            }
            alert(loc.latitude+", "+loc.longitude);
        } 
        </script>
    </head>
    <body οnlοad="getMap();">
        <div id='myMap' style="width:100%; height:100%;"></div>
    </body>
</html>

如上代码，可知获得点击地点的经纬度还比较麻烦，得分情况讨论。下面是效果图：