首页 > 代码库 > 高德地图调用和添加标注

高德地图调用和添加标注

看过高德地图API的同学都知道,高德地图不同端调用是不一样的,作为一个前端菜鸟,前一阵分别在pc端和移动端分别调用了高德地图。情况是这个样子的,PC端呢我们可以用高德API的web端的javascript代码。调用没有问题,具体是这样的:

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

<div class="_map" id="container" tabindex="0"></div>  //放地图的盒子(自定义一定大小的)

<script type="text/javascript" src="http://webapi.amap.com/maps?v=1.3&key=你自己申请的KEY值"></script>

<script >

  

//调取高德地图,根据经纬度定位

var map = new AMap.Map(‘container‘,{  //初始化地图

    resizeEnable: true,

    zoom: 10,  //缩放比例

    center: [116.397428, 39.90923],  //你要打标注的点的位置

    mapStyle:‘amap://styles/d6bf8c1d69cea9f5c696185ad4ac4c86‘

});

map.plugin(["AMap.ToolBar"], function() { //地图工具栏,可滑动设置缩放比例

    map.addControl(new AMap.ToolBar());

});

//添加标注

function addMarker(j,w){

    marker = new AMap.Marker({

        icon:new AMap.Icon({

            image: "img/pcdt.png",  //自己做的一个标注图!!

            size: new AMap.Size(23, 29),  //图标大小

            imageSize: new AMap.Size(23,29)

        }),

        position:new AMap.LngLat(j,w) //标注位置(经纬度)

    });

    marker.setMap(map);  //在地图上添加点

    //鼠标点击marker弹出自定义的信息窗体

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

        infoWindow.open(map, marker.getPosition());

    });

}

 addMarker(116.397428, 39.90923);   //实例化

//!!!!!!以下是添加更多详尽信息。。(还有更多,请看高德API)

// // addMarker(116, 39);

// //添加窗体信息

// //实例化信息窗体

// var content = [];

// content.push("地址:北京市朝阳区阜通东大街6号院3号楼东北8.3公里");

// var infoWindow = new AMap.InfoWindow({

//     isCustom: true,  //使用自定义窗体

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

//     offset: new AMap.Pixel(110, -5)

// });

//

// //构建自定义信息窗体

// function createInfoWindow( content) {

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

//     info.className = "info";

//     // 定义中部内容

//     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;

// }

</script>

</body>

</html>

记得要自己申请key值才可以。

移动端呢,其实调用高德地图是十分有限制的,首先要确保用户手机安装了高德地图的软件(一般人都会安装地图,百度或高德,我想应该是可以获取手机信息判断有哪个地图软件再去调用!),如果没有调用也看不到啊,其次移动端的调用前端也只能实现到地图的展示打点了,因为高德地图API说的很清楚,后端的java或者oc给了接口,前端的小伙伴可谓是有心无力啦,希望不久的将来前端可以自由调用吧。

高德地图调用和添加标注