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. 工具-效率工具-XMIND8破解（99.1.3）

    @ 目录 1.下载 2.修改hosts文件 3.修改配置文件 4.填入序列号 5.破解完成 关于作者 1.下载 1.点击进入官方网站下载 2.下载破解包 网址:点击进入网盘地址 密码:domd 2.修 ...

  2. linux -bash: unzip: 未找到命令(实测有效!)

    今天使用linux解压的时候遇到了不能解压的问题,然后就看了一些文档,写一个解决方案 Linux version 3.10.0-957.10.1.el7.x86_64 (mockbuild@kbuil ...

  3. iframe高度自动随着子页面的高度变化而变化(不止要在iframe标签里加上this.height=this.contentWindow.document.body.scrollHeight)

    最近使用iframe整合页面遇到一些难题,走了很多弯路才解决,借此记录一下: 1 <!-- 页面主体内容 --> 2 <div class="iframe-wrapper& ...

  4. MySQL索引与SQL注入

    SQL注入: SQL注入即是指web应用程序对用户输入数据的合法性没有判断或过滤不严,攻击者可以在web应用程序中事先定义好的查询语句的结尾上添加额外的SQL语句,在管理员不知情的情况下实现非法操作, ...

  5. Java安全之初探weblogic T3协议漏洞

    Java安全之初探weblogic T3协议漏洞 文章首发自安全客:Java安全之初探weblogic T3协议漏洞 0x00 前言 在反序列化漏洞里面就经典的还是莫过于weblogic的反序列化漏洞 ...

  6. [译] ConstraintLayout 可视化[Design]编辑器（这到底是什么）[第四部分]

    原文地址:Testing Views in Isolation with Espresso 原文作者:Ataul Munim 译文出自:掘金翻译计划 译者:yazhi1992 校对者:lovexiao ...

  7. java中如何实现同一账号不能同时登录

    经过两天的研究,下面给两个方法.不个是webwork版本的,一个是修改过后的网上的意见监听器版本的 (一) 首先先上自己的研究成果 1:首先在baseAction 中或者直接在action中写一个方法 ...

  8. [leetcode]543. Diameter of Binary Tree二叉树的直径

    题目中的直径定义为: 任意两个节点的最远距离 没想出来,看的答案 思路是:diameter = max(左子树diameter,右子树diameter,(左子树深度+右子树深度+1)) 遍历并更新结果 ...

  9. Maven仓库是什么

    Maven仓库是基于简单文件系统存储的,集中化管理Java API资源(构件)的一个服务.仓库中的任何一个构件都有其唯一的坐标,根据这个坐标可以定义其在仓库中的唯一存储路径.得益于 Maven 的坐标 ...

  10. Oracle-序列-存储过程-视图-索引-触发器

    课程介绍 1. 约束(掌握) 2. 序列(掌握) 3. 索引(掌握) 4. 视图(掌握) 5. 存储过程(掌握) 6. 自定义函数(掌握) 7. 触发器(掌握) 数据库对象的命名规则 1.对象名称必须 ...