dome代码：

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>地图dome</title>

<!-- baidu map -->

<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />

<style type="text/css">

body, html,#allmap {width: 100%;height: 100%;overflow: hidden;margin:0;font-family:"微软雅黑";}

</style>

<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=DD279b2a90afdf0ae7a3796787a0742e"></script>

<script src="http://api.map.baidu.com/api?v=2.0&ak=DD279b2a90afdf0ae7a3796787a0742e"></script>

</head>

<body>

<div id = "allmap"></div>

</body>

</html>

<script type="text/javascript">

    var geolocation = new BMap.Geolocation();

    var userData = {};

    geolocation.getCurrentPosition(function(r){

        if(this.getStatus() == BMAP_STATUS_SUCCESS){

            mk = new BMap.Marker(r.point);

            getAddress(r.point);

        }else {

            alert('failed'+this.getStatus());

        }

    });

    //获取地址信息，设置地址label

    function getAddress(point){

        var gc = new BMap.Geocoder();

        gc.getLocation(point, function(res){

            console.log(res);

            //百度地图API功能

            map = new BMap.Map("allmap");

            map.centerAndZoom(new BMap.Point(res.point.lng,res.point.lat),30);//根据坐标初始化地图

            map.enableScrollWheelZoom(true);

            map.addControl(new BMap.NavigationControl()); //平移缩放控件

            map.addControl(new BMap.ScaleControl()); //比例尺

            map.addControl(new BMap.OverviewMapControl()); //缩略地图

            map.addControl(new BMap.MapTypeControl()); //地图类型

            map.setCurrentCity(res.addressComponents.city); // 仅当设置城市信息时，MapTypeControl的切换功能才能可用

            //添加标注

            var marker = new BMap.Marker(new BMap.Point(res.point.lng,res.point.lat)); // 创建标注

            map.addOverlay(marker); // 将标注添加到地图中

            marker.addEventListener('click', mapClickFun);

            for(var i=0;i<res.surroundingPois.length;i++){

              var marker = new BMap.Marker(new BMap.Point(res.surroundingPois[i].point.lng,res.surroundingPois[i].point.lat)); // 创建标注

              marker.data = res.surroundingPois[i];

              map.addOverlay(marker); // 将标注添加到地图中

              marker.addEventListener('click', (e)=>{

                console.log(this);

                mapClickFun(e,marker.data);

              });

            }

        });

    }

    function mapClickFun(e,data){

      // 通过点击的坐标创建一个点对象，添加标签

      console.log(e);

      console.log(data);

      var point = new BMap.Point(e.point.lng, e.point.lat);

      var opts = {

        title: "店铺详情：",

        enableMessage: false,

      }

      if(data == undefined){

        opts.title = "本机地址"

        var infowindow = new BMap.InfoWindow("经度：" + e.point.lng + "<br/>纬度" + e.point.lat, opts);

        map.openInfoWindow(infowindow, point);

      }else{

      }

    }

</script>

　　

JS获取本机地址，生成地图的更多相关文章

  1. js获取本机mac地址，IP地址，计算机名

    <!DOCTYPE HTML> <html> <head> <title>js获取本机mac地址,IP地址,计算机名</title> < ...

  2. JS获取客户端IP地址、MAC和主机名【转】

    JS获取客户端IP地址.MAC和主机名 引用:JS获取客户端IP地址.MAC和主机名的7个方法汇总 利用搜狐接口 <html> <head> <meta http-equ ...

  3. js 获取客户端mac地址

    js 获取客户端mac地址 javascript获取客户端网卡MAC地址和IP地址和计算机名 nodesj如何获得客户端的mac地址呢? 浏览器获取MAC地址 不限浏览器的mac地址取得的几种办法 I ...

  4. js获取本机的网络IP地址

    JavaScript是一门脚本语言,是不能操作文件,读取本地信息的,所以想要获取IP,还需要借助后端技术.方法如下: //获取本机的网络ip地址 function jsonpCallback(res) ...

  5. Node.js 获取本机Mac地址

    首先我们要先加载一个包用于获取mac地址 npm install getmac 加载完毕会在node_modules文件夹下发现一个getmac文件夹,我们把对应的路径加载到程序中 源码如下: var ...

  6. JS获取客户端IP地址、MAC和主机名七种方法

    一.使用JS获取客户端IP的几个方法方法一(只针对IE且客户端的IE允许AcitiveX运行,通过平台:XP,SERVER03,2000).获取客户端IP代码:<HTML><HEAD ...

  7. JS获取客户端IP地址、MAC和主机名的7个方法汇总

    今天在搞JS(javascript)获取客户端IP的小程序,上网搜了下,好多在现在的系统和浏览器中的都无效,很无奈,在Chrome.FireFox中很少搞到直接利用ActiveX获取IP等的JS脚本. ...

  8. android 中获取网络状态、判断3G、2G、wifi网络、判断wifi是否打开、获取本机地址、获取本机串号IMEI整理

    代码如下:package com.android.xym; import java.io.IOException; import java.net.HttpURLConnection; import ...

  9. js获取客户端MAC地址

    最近遇到一个需求,医院要求呼叫中心账号必须对应MAC地址,也就是说该MAC地址必须和呼叫中心账号对应才可使用,这可就难道我了,这需求就要求每次都判断用户登录的电脑MAC地址是否有呼叫中心账号,当然只针 ...

随机推荐

  1. CMake将生成的可执行文件保存到其他目录

    在运行一些程序的时候,我们一般会把数据文件放在其他位置.而当在修改程序时,需要不断的修改代码,编译,执行.每次编译之后,都得将可执行文件复制到数据文件的目录. 这一问题有两种解决方法,一是直接在数据目 ...

  2. Docker 在搭建私有仓库配置镜像时候报错

    今天搞私有镜像报了个错 ,看了,好久原来是 多了个空格 服务失败,因为控制进程退出时带有错误代码.参见"systemctl状态docker".详细信息参见"服务" ...

  3. Python批量创建word文档（2）- 加图片和表格

    Python创建word文档,任务要求:小杨在一家公司上班,每天都需要给不同的客户发送word文档,以告知客户每日黄金价格.要求在文档开始处给出banner条,价格日期等用表格表示.最后贴上自己的联系 ...

  4. 使用js方法将table表格中指定列指定行中相同内容的单元格进行合并操作。

    前言 使用js方法对html中的table表格进行单元格的行列合并操作. 网上执行此操作的实例方法有很多,但根据实际业务的区别,大多不适用. 所以在网上各位大神写的方法的基础上进行了部分修改以适合自己 ...

  5. Java学习_异常处理

    Java的异常 计算机程序运行的过程中,总是会出现各种各样的错误.有一些错误是用户造成的,比如,希望用户输入一个int类型的年龄,但是用户的输入是abc.程序想要读写某个文件的内容,但是用户已经把它删 ...

  6. Kubernetes官方java客户端之一：准备

    欢迎访问我的GitHub https://github.com/zq2599/blog_demos 内容:所有原创文章分类汇总及配套源码,涉及Java.Docker.Kubernetes.DevOPS ...

  7. 【Linux】使用笔记

    前言 搜狗输入法,作为我体验最好的一个输入法,一直陪我从小学走到了现在,优麒麟线上发布会时,搜狗团队代表用"聪明"来形同它,事实也确实如此,它能十分人性地记录使用者常用的热词,并且 ...

  8. zookeeper选举算法

    一.ZAB协议三阶段 – 发现(Discovery),即选举Leader过程– 同步(Synchronization),选举出新的Leader后,Follwer或者Observer从Leader同步最 ...

  9. app逆向万能的md5加密hook破解入参方法(其他加密用通用方法原理差不多,小白推荐)

    一.原理 安卓开发调用md5加密时候都会调用到系统类java.security.MessageDigest 加密时候会会调用里面2个关键方法update以及digest 根据这个原理我们开始写代码吧 ...

  10. 2020DevOps状态报告——平台模型：扩展DevOps的新方法

    平台模型是我们在这个领域看到越来越多的方法,它源于负责产品或服务的端到端交付的产品团队的理念.如果只应用于单一的产品,或者几个产品,它的效果很好. 但如果有数百种产品或服务,把一个产品团队用于这些产品 ...