recherche

Maison  >  Questions et réponses  >  le corps du texte

javascript - Problème d'obtention de la latitude et de la longitude à partir de l'API Baidu Map JS

Il existe actuellement une telle exigence : utilisez la souris pour cliquer sur la carte pour déterminer les sommets pour délimiter un polygone, et écrivez la longitude et la latitude correspondantes du polygone dans la base de données pour que cette fonction soit intégrée au site Web. .

Mon idée est la suivante : utilisez directement l'API Baidu Map pour afficher la carte. La clé est d'obtenir la longitude et la latitude du point de la souris (puis de la recouvrir d'une couche de p ou d'utiliser directement l'API Add Overlay), similaire à ceci : http://api.map.baidu.com/lbsa... Mais c'est un produit et ce que je veux utiliser, c'est l'API

Il n'existe actuellement aucune API de ce type sur Baidu Maps. Avez-vous des solutions ?

PHPzPHPz2774 Il y a quelques jours818

répondre à tous(2)je répondrai

  • 过去多啦不再A梦

    过去多啦不再A梦2017-05-19 10:16:14

    J’en ai déjà eu un auparavant ! Notez que vous devez vous rendre sur Baidu pour demander vous-même une clé ! 

    <!DOCTYPE html>
<html>
<head>
    <style type="text/css">
        body, html{width: 100%;height: 100%;margin:0;}
        #allmap {width: 100%; height:100%; overflow: hidden;}
    </style>
  
    <script type="text/javascript" src="http://api.map.baidu.com/getscript?v=2.0&ak=换成你的密钥"></script>
    <script type="text/javascript" src="http://api.map.baidu.com/library/DrawingManager/1.4/src/DrawingManager_min.js"></script>
    <link rel="stylesheet" href="http://api.map.baidu.com/library/DrawingManager/1.4/src/DrawingManager_min.css" />
  
    <title>test</title>
</head>
<body> 
    <p id="allmap">    
        <p id="map" style="width:100%;height:100%;"></p>
    </p>
    <script>    
        var map = new BMap.Map('map', {enableMapClick:false});
        var poi = new BMap.Point(116.404, 39.915);
        map.centerAndZoom(poi, 11);
        map.enableScrollWheelZoom();
        
        var styleOptions = {
            strokeColor:"red",
            fillColor:"",
            strokeWeight: 1,
            strokeOpacity: 0.8,
            fillOpacity: 0.6,
            strokeStyle: 'dashed'
        }
        
        //实例化鼠标绘制工具
        var drawingManager = new BMapLib.DrawingManager(map, {
            isOpen: false,
            enableDrawingTool: true,
            drawingToolOptions: {
                anchor: BMAP_ANCHOR_TOP_RIGHT,
                offset: new BMap.Size(5, 5),
                drawingModes :[
                    BMAP_DRAWING_RECTANGLE
                ] 
            },
            rectangleOptions: styleOptions
        });  
                
        drawingManager.addEventListener('overlaycomplete', function(e){
            var overlay = e.overlay,
                handle;
                
            handle = new BMap.Polygon(overlay.getPath(), {strokeWeight: 2, strokeColor: "#ff0000"});
            
            map.addOverlay(handle);
            alert("选取范围的基准点坐标为" + JSON.stringify(handle.getPath()));
        });
    </script>
</body>
</html>

    répondre
    0
  • 为情所困

    为情所困2017-05-19 10:16:14

    Parcourez la plateforme ouverte Baidu http://lbsyun.baidu.com/index...

    N'est-ce pas vrai ? 

    在标准的DOM事件模型中（DOM Level 2 Events），监听函数会得到一个事件对象e，在e中可以获取有关该事件的信息。同时在监听函数中this会指向触发该事件的DOM元素。 百度地图API的事件模型与此类似，在事件监听函数中传递事件对象e，每个e参数至少包含事件类型（type）和触发该事件的对象（target）。 API还保证函数内的this指向触发（同时也是绑定）事件的API对象。
例如，通过参数e得到点击的经纬度坐标。
var map = new BMap.Map("container");    
map.centerAndZoom(new BMap.Point(116.404, 39.915), 11);    
map.addEventListener("click", function(e){    
 alert(e.point.lng + ", " + e.point.lat);    
});
或者通过this得到地图缩放后的级别。
var map = new BMap.Map("container");    
map.centerAndZoom(new BMap.Point(116.404, 39.915), 11);    
map.addEventListener("zoomend", function(){    
 alert("地图缩放至：" + this.getZoom() + "级");    
});

    répondre
    0
  • Annulerrépondre