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. yii\filters\AccessControl 访问权限控制

    Class yii\filters\AccessControl 所有类 | 属性 | 方法   继承 yii\filters\AccessControl » yii\base\ActionFilter ...

  2. 深入理解MySQL系列之索引

    索引 查找一条数据的过程 先看下InnoDB的逻辑存储结构: 表空间:可以看做是InnoDB存储引擎逻辑结构的最高层,所有的数据都存放在表空间中.默认有个共享表空间ibdata1.如果启用innodb ...

  3. 关于 Softmax 回归的反向传播求导数过程

    对于 \(Softmax\) 回归的正向传播非常简单,就是对于一个输入 \(X\) 对每一个输入标量 \(x_i\) 进行加权求和得到 \(Z\) 然后对其做概率归一化. Softmax 示意图 下面 ...

  4. 简单了解一下 Nginx

    一.Nginx 基本认识 1.Nginx 是什么? Nginx 是一款开源的.轻量级的.高性能的 HTTP 服务器 以及 反向代理服务器. 特点是 占有内存少.并发能力强. 2.Nginx 用来干什么 ...

  5. 算法竞赛入门经典第二版第二章习题-(练习Java和C++语法)

    习题2-1水仙花数(daffodil) 输出1000-999中所有的水仙花数.若三位数ABC满足ABC = A3+B3+C3,则称其为水仙花数. Java: package suanfa; publi ...

  6. eclipse再见，android studio 新手入门教程（二）项目的导入

    上一篇博客介绍了AS的一些常用设置方法,当工具调教妥当后,自然就要开始项目的开发啦.从零开始新建一个项目,这个简单,不必多说,这篇博客会分享我从旧平台eclipse导入项目到AS的过程,以及遇到的一些 ...

  7. java上下分页窗口流动布局

    上下分页要用到 JSplitPane jSplitPane =new JSplitPane();//设定为拆分布局 效果图: show me code: import java.awt.event.C ...

  8. 【C】C语言位域（位段）详解

    作者:李春港 出处:https://www.cnblogs.com/lcgbk/p/14215449.html 目录 一.位域是什么? 二.位域的存储 2.1 相邻成员的类型相同 2.2 相邻成员的类 ...

  9. 配置NFS实现nginx动静分离

    案例子任务一.安装配置NFS服务器 步骤1:使用docker容器配置NFS服务器 启动centos容器并进入 docker run -d --privileged centos:v1 /usr/sbi ...

  10. 数据库分库分表容量划分建议参考阿里云DRDS原则

    做分库分表的时候 一直想知道分库分表容量的最优规则有什么好的建议,以下是参考阿里云 DRDS 分库分表的规则,还是有一定的参考意义 .