communauté Apprendre Bibliothèque d'outils Loisirs
recherche
Français
javascript - Problème d'obtention de la latitude et de la longitude à partir de l'API Baidu Map JS
PHPz
PHPz 2017-05-19 10:14:14
0
2
785

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 ?

PHPz
PHPz

学习是最好的投资！

répondre à tous(2)
过去多啦不再A梦
过去多啦不再A梦2017-05-19 10:16:14 2 plancher

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>
Comme +0
Ajouter une réponse
为情所困
为情所困2017-05-19 10:16:14 1 plancher

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() + "级");    
});
Comme +0
Ajouter une réponse
Sujets populaires
Plus>
Articles populaires
Tutoriels populaires
Plus>
Tutoriels associés
Recommandations populaires
Derniers cours
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal