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. mybatis-plus逻辑删除

    MP(mybatis plus)已经大大简化了我们好多的开发操作,基本的增删改查都有了,包括代码生成等等,今天想说的是它的逻辑删除功能.我们都在数据库设计时候经常会有is字段,表示是否删除,为了留下员 ...

  2. 闭关修炼180天--手写持久层框架（mybatis简易版）

    闭关修炼180天--手写持久层框架(mybatis简易版) 抛砖引玉 首先先看一段传统的JDBC编码的代码实现: //传统的JDBC实现 public static void main(String[ ...

  3. 30G 上亿数据的超大文件，如何快速导入生产环境？

    Hello,大家好,我是楼下小黑哥~ 如果给你一个包含一亿行数据的超大文件,让你在一周之内将数据转化导入生产数据库,你会如何操作? 上面的问题其实是小黑哥前段时间接到一个真实的业务需求,将一个老系统历 ...

  4. iOS UIcollectionView 实现卡牌翻转效果

    - (void)viewDidLoad { [super viewDidLoad]; // Do any additional setup after loading the view, typica ...

  5. 点名小辣辣，带你入门 JMeter (｡･∀･)ﾉﾞ

    什么是 JMeter Apache JMeter是Apache组织开发的基于Java的压力测试工具.用于对软件做压力测试,它最初被设计用于Web应用测 试但后来扩展到其他测试领域. 它可以用于测试静态 ...

  6. flowable中使用到的一些方法。获取人员部门信息

    package org.springblade.desk.utils; import lombok.AllArgsConstructor; import lombok.extern.slf4j.Slf ...

  7. django-mdeditor支持七牛云存储图片

    由于django-mdeditor官方插件没有支持第三方存储,所以,我们只能进行修改源码的方式实现了. 本次改写即使替换了其文件,不使用七牛云也是无关紧要的,因为在存储时,去settings.py中判 ...

  8. CentOS 7 Xinetd服务安装配置

    CentOS 7 Xinetd服务安装配置 目录 CentOS 7 Xinetd服务安装配置 一.Linux守护进程与初始化进程 1. 什么是守护进程 2. 什么是初始化 二.Linux独立启动进程和 ...

  9. HTTP ERROR400的问题解决

    今天写添加功能,在点添加提交时报了一个"HTTP ERROR 400"的错误,如图, 请求提交的代码死活跳转不到后台,郁闷中,开启debug功能,开始一步步排查, 1.先单独把跳转 ...

  10. linux的 复制 删除 解压 压缩 打包

    liunx 删除 删除文件夹实例: rm -rf /var/log/httpd/access 将会删除/var/log/httpd/access目录以及其下所有文件.文件夹 2 删除文件使用实例: r ...