js中引用高德地图

简介: js中引用高德地图

引入秘钥:

<script type="text/javascript" src="https://webapi.amap.com/maps?v=2.0&key=您的秘钥">

初始化css样式:

<style type="text/css">
    * {
      padding: 0;
      margin: 0;
    }
    #container {
      width: 100%;
      height: 100vh;
    }
  </style>

html结构:

<div id="container"></div>

js:

<script type="text/javascript">
      var map = new AMap.Map('container');
      var map = new AMap.Map('container', {
        zoom: 18, //级别
        center: [113.978105, 35.286126], //中心点坐标
        viewMode: '3D' //使用3D视图
      });
      let data = [
        [113.978105, 35.286126],
        [113.9212, 35.294758],
        [113.890129, 35.315631]
      ]
      let data1 = [
        ['国家863新乡科技产业园'],
        ['新乡宝龙广场'],
        ['新乡市第二中学']
      ]
      for (let i = 0; i < data.length; i++) {
        var viaMarker = new AMap.Marker({
          position: new AMap.LngLat(data[i][0], data[i][1]),
          // 将一张图片的地址设置为 icon
          icon: 'img/定位.png',
          // 设置了 icon 以后,设置 icon 的偏移量,以 icon 的 [center bottom] 为原点
          offset: new AMap.Pixel(-22, -30)
        });
        map.add(viaMarker);
        viaMarker.on("click", function() {
          infoWindow = new AMap.InfoWindow({
            content: '<div style="color:blue">' + data1[i] + '</div>'
          });
          infoWindow.open(map, data[i]);
        })
      }
    </script>
相关文章
|
JavaScript 前端开发 Linux
|
6月前
|
JavaScript
js的三种引用方式
js的三种引用方式
43 2
|
6月前
|
JavaScript
为实例方法创建错误的引用(js的问题)
为实例方法创建错误的引用(js的问题)
30 0
|
6月前
|
JavaScript
为实例方法创建错误的引用(js的问题)
为实例方法创建错误的引用(js的问题)
25 0
|
JavaScript 定位技术 API
js使用高德地图进行地点标注
使用高德地图进行地点标注可以采用以下步骤:
154 0
|
6月前
|
JavaScript 前端开发 定位技术
|
6月前
|
缓存 JavaScript Java
thymeleaf引用JS加随机数防止缓存
thymeleaf引用JS加随机数防止缓存
55 0
|
6月前
|
JavaScript 安全 定位技术
|
JavaScript 定位技术 API
js获取高德地图自身定位
js获取高德地图自身定位
208 0