记 - 使用高德地图 JavaScript API

• 先要在高德地图开放平台注册账号 & 创建一个应用

• 这时候你得到一个key

<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.13&key=你的key"></script>

这是一个例子，创建地图设置中心点，创建了一个信息窗

var LANG = 'en';

 function initMap(id, point, initTitle, address) {

    var map = new AMap.Map(id, {

      resizeEnable: true,

      zoom: 14,

      center: point

    });

    // 构造点标记

    var marker = new AMap.Marker({

      icon: "https://webapi.amap.com/theme/v1.3/markers/n/mark_b.png",

      position: point

    });

    AMap.event.addListener(marker, 'click', function () {

      openInfo();

    });

    map.on('zoomend', function() {

      map.setCenter(point);

    });

    map.add(marker);

    map.setLang(LANG);



    function openInfo() {

      var title = initTitle,

      content = [];

      content.push(address);

      content.push("Mobile：010-64733333");

      infoWindow = new AMap.InfoWindow({

          isCustom: true,

          content: createInfoWindow(title, content.join("<br/>")),

          offset: new AMap.Pixel(16, -45)

      });

      // 打开信息窗体

      infoWindow.open(map, point);

    }

    //构建自定义信息窗体

    function createInfoWindow(title, content) {

      var info = document.createElement("div");

      info.className = "custom-info input-card content-window-card";



      //可以通过下面的方式修改自定义窗体的宽高

      //info.style.width = "400px";

      // 定义顶部标题

      var top = document.createElement("div");

      var titleD = document.createElement("div");

      var closeX = document.createElement("img");

      top.className = "info-top";

      titleD.innerHTML = title;

      closeX.src = "https://webapi.amap.com/images/close2.gif";

      closeX.onclick = closeInfoWindow;



      top.appendChild(titleD);

      top.appendChild(closeX);

      info.appendChild(top);



      // 定义中部内容

      var middle = document.createElement("div");

      middle.className = "info-middle";

      middle.style.backgroundColor = 'white';

      middle.innerHTML = content;

      info.appendChild(middle);



      // 定义底部内容

      var bottom = document.createElement("div");

      bottom.className = "info-bottom";

      bottom.style.position = 'relative';

      bottom.style.top = '0px';

      bottom.style.margin = '0 auto';

      var sharp = document.createElement("img");

      sharp.src = "https://webapi.amap.com/images/sharp.png";

      bottom.appendChild(sharp);

      info.appendChild(bottom);

      return info;

    }

    //关闭信息窗体

    function closeInfoWindow() {

      map.clearInfoWindow();

    }

    openInfo();

  }

  var mapData = [

    { id: 'map1', point: [121.524795,38.855111], title: 'title1', address: 'address1' },

    { id: 'map2', point: [-97.869468,41.039574], title: 'title2', address: 'address2' },

  ]

  for(var i = 0;i < mapData.length; i++) {

    var item = mapData[i];

    initMap(item.id, item.point, item.title, item.address);

  }

代码写着写着发现高德地图没有海外的数据，不能用，mmp