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. webpack配置css-loader

    执行 npm init 命令 生成 package.json 文件 在 webstorm 项目中局部安装 webpack(比如安装3.6.0版本) npm install webpack@3.6.0 ...

  2. Azure Databricks 第一篇：创建工作区、集群和Notebook

    Azure Databricks是一个可扩展的数据分析平台,基于Apache Spark.Azure Databricks 工作区(Workspace)是一个交互式的环境,工作区把对象(noteboo ...

  3. Centos8自动挂载U盘移动硬盘解决办法

    Centos默认是不能识别NTFS文件系统的U盘.移动硬盘的.查阅了很多资料讲到的都是需要安装ntfs-3g安装包. 安装完后每次插入移动存储介质时,都需要手动去挂载. 作为一个做技术的,如果不能解决 ...

  4. Dapper 返回Sql server 自增长ID 标识列SCOPE_IDENTITY

    原理 使用SELECT SCOPE_IDENTITY(),取获取刚刚插入记录自增的主键 示例 entity.Create(); StringBuilder strSql = new StringBui ...

  5. matplotlib学习日记（八）----完善统计图

    (一)再说legend() import matplotlib.pyplot as plt import numpy as np x = np.arange(0, 2.1, 0.1) y = np.p ...

  6. SQL优化器-RBO与CBO分别是什么

    数据库系统发展历史 数据库系统产生于20世纪60年代中期,至今有近50多年的历史,其发展经历了三代演变,造就了四位图灵奖得主,发展成为一门计算机基础学科,带动了一个巨大的软件产业. 数据库系统是操作系 ...

  7. 让API并行调用变得如丝般顺滑的绝招

    当数据量较大的时候,都会通过分库分表来拆分,分担读写的压力.分库分表后比较麻烦的就是查询的问题,如果不是直接根据分片键去查询的话,需要对多个表进行查询. 在一些复杂的业务场景下,比如订单搜索,除了订单 ...

  8. 微信支付（PC扫码支付和H5公众号支付）

    最近在做微信支付,微信支付比较坑,官方居然只有.NET.C#.PHP的demo居然没有java的demo.然后微信支付是不提供测试账号的需要直接用正式的公众号.首先来介绍下微信扫码支付吧,微信扫码有两 ...

  9. eclipse开启的时候adb.exe会自动开启么 怎么让它跟着eclipse自动开启

    会的,Eclipse 参数页中的 General > Startup and Shutdown 中默认 Android Development Tools 是自动激活的,它会启动 adb.exe ...

  10. 远程分支删除后，git branch -a还能看到的解决方法

    详情https://www.cnblogs.com/wangiqngpei557/p/6058115.html 大家在删除远程分支后 git branch -a 还是可以看到已删除的远程分支,时间一长 ...