首页 > 其他分享 >百度地图api之点击地图获取坐标点

百度地图api之点击地图获取坐标点

时间:2022-10-16 10:55:34浏览次数:55  
标签:map point 地图 点击 api BMap var new

一.首先引入所申请的ak密钥
<script type="text/javascript" src="http://api.map.baidu.com/api?ak=PlhFWpA02aoURjAOpnWcRGqw7AI8EEyO&v=2.0&services=false"></script>
二.简单样式处理一下
body, html,#map {width: 100%;height: 100%;overflow: hidden;margin:0;}
三.html代码布局
//下面的代码是用来显示地图的
<div id="map"></div>
四.js代码如下
//创建Map地图实例
var map = new BMap.Map("allmap");
//设置中心点坐标
var point = new BMap.Point(116.331398,39.897445);
//初始化地图
/**
*地图类型:
*普通地图:BMAP_NORMAL_MAP
*卫星地图:BMAP_HYBRID_MAP
*/
var map = new BMap.Map("map",{mapType:BMAP_NORMAL_MAP,minZoom:1,maxZoom:18}); //设置地图类型及最小最大级别
//设置地图级别(1-18)
map.centerAndZoom(point,12);
//开启滚轮缩放地图
map.enableScrollWheelZoom();
//进行浏览器定位
var geolocation = new BMap.Geolocation();
geolocation.getCurrentPosition(function(r){
// 定位成功事件
if(this.getStatus() == BMAP_STATUS_SUCCESS){
//alert('您的位置:'+r.point.lng+','+r.point.lat);
var point = new BMap.Point(r.point.lng, +r.point.lat);
}
},{enableHighAccuracy: true})
//addEventListener--添加事件监听函数
//click--点击事件获取经纬度
map.addEventListener("click",function(e){
prompt("鼠标单击地方的经纬度为:",e.point.lng + "," + e.point.lat);
});
————————————————
版权声明:本文为CSDN博主「叶少翔」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。
原文链接:https://blog.csdn.net/jiangzunshao/article/details/53040856

标签:map,point,地图,点击,api,BMap,var,new
From: https://www.cnblogs.com/telwanggs/p/16795774.html

相关文章

  • js 点击导航栏切换对应模块内容
    点击导航栏切换对应模块内容 导航栏的制作排他算法自定义属性的应用<!--css样式代码--><style>.box{width:500px;ma......
  • 实战 | 用Python和MediaPipe搭建一个嗜睡检测系统 (详细步骤 + 源码)
    导读本文将使用Python和MediaPipe搭建一个嗜睡检测系统(包含详细步骤+源码)。背景介绍   疲劳驾驶的危害不堪设想,据了解,21%的交通事故都因此而生,尤其是高速路上,大多......
  • web APIs学习---定时器轮播图
    开始删除前一个高亮圆点出现错误 后发现切换至最后一张图时,因为num++的缘故,num已=0 通过num数值判断圆点的删除1//判断圆点删除2//判断非最后一幅......
  • yapi内网部署
    目的yapi在内网部署01、先从外网构建安装下载好依赖及可以启动起来02、然后把服务打包到内网在初始化数据库03、在启动envcentos7.x2c4gyapi-v1.9.3mongodb-v3.6......
  • 81-高德地图范围绘制,区域遮掩,蒙版遮罩
    参考:高德地图-2D地图下区域遮掩(只显示固定区域里的内容)其中:地图范围绘制:工具实现代码:<!DOCTYPEhtml><html><head><metahttp-equiv="Content-Type"content="......
  • 基于tauri打造的HTTP API客户端工具-CyberAPI
    国庆长假和朋友聚会的时候,和朋友谈起最近这段时间捣鼓tauri,写了一个HTTPAPI客户端工具。『你写了这么多东西,其实有想过是为了啥不?』为了啥这是一个很大的命题,当初每个项目......
  • ES6数组API
    ES6数组APIArray.map(item,index)/*Array.map(item,index)item:数组中的每个元素index:索引特性:映射,进去几个,出来的还是几个,返回一个新数组*/co......
  • Angular HTTPClient API 在 SAP 电商云中的使用
    大多数前端应用程序需要通过HTTP协议与服务器通信,以下载或上传数据并访问其他后端服务,SAP电商云SpartacusUI也不例外。Angular为Angular应用程序提供了一个客户......
  • DEMO:F-02固定资产 BAPI_ACC_DOCUMENT_POST 完整demo
    下面开始干货:之前发了一篇文章:《​​DEMO:F-02固定资产 BAPI_ACC_DOCUMENT_POST​​》有读者留言说最重要的增强部分没有写。最初以为这个增强是最常规的增强,FICO项目机会......
  • 测试BAPI ,执行test sequence
    ​同行问了个问题,说执行BAPI后显示成功,但是前台去查看值并没有变化。其实BAPI都是RFC,updatetask模式更新,需要显示的commit,不会隐士提交。所以在SE37下,执行testsequence,把......