js高德地图标点弹窗信息

简介: js高德地图标点弹窗信息

主要实现的一个效果是什么样的呢?

我要清楚的知道小本本记好,,

主要思路:找经纬度弹出信息 可用默认弹窗和自定义

步骤:注册高德地图开发者 创建,获得密钥和key,

html中需要一个容器一个div给宽高,以下代码

<div id="mymap">
    </div>

css样式有宽高,

要引入地图,有专门的jsscript需要在html  head中引入

<script src="https://webapi.amap.com/loader.js"></script>

小本本记,loader

下面是引入地图的一个格式,内容呢是在then(amap)中写,如果东西多了会不好处理容易乱套,所以我用了函数取出amap在外面函数体里面写,这样写会看起来更美观

window._AMapSecurityConfig = {
    securityJsCode: "0cfa34cb84317b5aba245278ad1c2b28",
  };
  AMapLoader.load({
    key: "c170c54c4a63530c213a6148debedf3d", //申请好的Web端开发者Key,首次调用 load 时必填
    version: "2.0", //指定要加载的 JSAPI 的版本,缺省时默认为 1.4.15
  })
    .then((AMap) => {
    render(AMap)
    })
    .catch((e) => {
      console.error(e); //加载错误提示
    });

需要的东西在函数体里了

function render(sppr){
    // 初始化地址地点就是那个意思
    // zomm是距离吧就是看的范围
    const map = new AMap.Map("mymap",{
       zoom: 14, 
       center:[114.195373,35.14871]
    });

这里呢zoom是对地图放大缩小的,center是定在这个坐标前大小14的上帝视角

之后添加坐标点,加上点击事件,

这里呢我是用了自定义弹窗,大家可用用默认的,默认有自带的关闭弹窗,自定义是需要自己加的

之后呢需要数据渲染,数据里有几条我们的坐标就有几个

mymap.on("click",function(){
    var infoWindow = new AMap.InfoWindow({
        isCustom: true,  //执行使用自定义窗体
        content: `
      <div id="imms">
        <div id="row">
          <p>详细资料</p>
          <span onclick="delet()">x</span>
        </div>
        <div id="flex">
          <div id="img">
          <img src="${data[i].img}" >
        </div>
        <div id="address">
          <p>${data[i].name}</p>
        </div>
        </div>
        <div id="tel">
          <p>${data[i].tel}</p>
        </div>
      </div>
      `,
        offset: new AMap.Pixel(36, -65)
    });
       infoWindow.open(map, mymap.getPosition());
  })
 map.add(mymap);
 }

这里呢就是我写的自定义弹窗比默认的弹窗只是多加了关闭的点击事件

相关文章
|
6月前
|
前端开发 JavaScript
|
10月前
|
JavaScript 前端开发 Linux
Node.js 获取文件信息及路径
Node.js 获取文件信息及路径
|
2月前
|
JSON JavaScript 前端开发
Python之JavaScript逆向系列——接口JSON信息获取与操作
Python之JavaScript逆向系列——接口JSON信息获取与操作
50 0
|
3月前
|
移动开发 JavaScript 前端开发
纯JS写一个用苹果序列号查询生产信息的小工具
纯JS写一个用苹果序列号查询生产信息的小工具
15 0
|
8月前
|
JavaScript 定位技术 API
js使用高德地图进行地点标注
使用高德地图进行地点标注可以采用以下步骤:
103 0
|
3月前
|
JavaScript 安全 定位技术
|
4月前
|
JavaScript
适配针式打印机EPSON爱普生,在vue项目中用原生js搭配iframe完成唤起打印弹窗
适配针式打印机EPSON爱普生,在vue项目中用原生js搭配iframe完成唤起打印弹窗
|
9月前
|
JavaScript 前端开发 定位技术
js中引用高德地图
js中引用高德地图
65 0
|
4月前
|
JavaScript 前端开发
JavaScript中比较常见的几种弹窗
JavaScript中比较常见的几种弹窗
25 1
|
4月前
|
JSON JavaScript 前端开发
全面的.NET微信网页开发之JS-SDK使用步骤、配置信息和接口请求签名生成详解
全面的.NET微信网页开发之JS-SDK使用步骤、配置信息和接口请求签名生成详解