第一次使用高德地图想记录一下,方便以后项目中会用到,以下就做一个简单的地图展示(纯属练手)
1.首先要在高德开放平台中申请账号(https://lbs.amap.com/),因为需要用到"key",有账号的直接登录,没账号的就发申请一个吧!
image.png
2.然后点击控制台
image.png
3.然后点击应用管理,到创建新应用,之后就是简单的创建,根据它的提示一步一步操作就创建好了(高德的新创建还是很简单的)
image.png
4.接下来就是代码展示
以下需要注意的是key值,换上自己当初创建的那个"key"就可以了
<script type="text/javascript" src="http://webapi.amap.com/maps?v=1.3&key=?&&plugin=AMap.Scale,AMap.OverView,AMap.ToolBar"></script>
image.png
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>地图展示</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1, user-scalable=no">
<link rel="stylesheet" href="http://cache.amap.com/lbs/static/main1119.css"/>
<style>
#myMap{
width: auto;
height: 400px;
font-family: 微软雅黑 sans-serif;
margin: 10px 10%;
border: 5px solid #ccc;
border-radius: 8px;
color: #333;
}
</style>
</head>
<body>
<!-- 放地图的容器 -->
<div id="myMap">
</div>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script src="http://cache.amap.com/lbs/static/es5.min.js"></script>
<script type="text/javascript" src="http://webapi.amap.com/maps?v=1.3&key=?&&plugin=AMap.Scale,AMap.OverView,AMap.ToolBar"></script>
<script>
$(function () {
var center= new AMap.LngLat(113.324691,23.1373);
//比例尺(左下，代表地图中的一厘米对应实际的距离)
var scale = new AMap.Scale(),
//工具条（左上，可以使用工具条进行上下左右和缩放）
toolBar = new AMap.ToolBar(),
//鹰眼 （相当于打游戏的小地图）
overView = new AMap.OverView({
鹰眼是默认不展开的，设置isOpen为true可以默认展开
isOpen:true
}),
map = new AMap.Map('myMap', {
zoom: 15,//缩放层级
center:center,//当前地图中心点
resizeEnable: true,//调整窗口大小
autoFitView : true
});
//往地图中添加这三个插件
map.addControl(scale);
map.addControl(toolBar);
map.addControl(overView);
//为自定义的图标,可调用
var icon = new AMap.Icon({
image : 'http://vdata.amap.com/icons/b18/1/2.png',//图片大小为24px*24px
//icon可缺省，缺省时为默认的蓝色水滴图标，
size : new AMap.Size(24,24)
});
marker = new AMap.Marker({
// icon: icon, //图标可以用简单的图片路径
position: center, //点标记在地图上显示的位置，默认为地图中心点
// offset: new AMap.Pixel(-10,-34),//位置偏移量，默认值为Pixel(-10，-34),(0,0)时marker左上角对准position的位置
title: "广州天河体育中心", //鼠标滑过标记时的文字提示，不设置则鼠标滑过时没有文字提示
map: map //要显示该Marker的地图对象
});
map.on('click',function(e){
//将当前点击的经纬度赋值到文本框
console.log(e.lnglat.getLng() +","+e.lnglat.getLat());
})
//开启热点点击
// function toggleIsHotspot(checkbox) {
// map.setStatus({isHotspot:checkbox.checked ? true : false});
// }
// //监听热点点击
// var hotSpotMarker;
// map.on("hotspotclick",function(e){
// if(hotSpotMarker){
// hotSpotMarker.setMap(null);
// }
// hotSpotMarker = new AMap.Marker({
// position:e.lnglat,
// map:map,
// content:'<div>'+ e.name +'</div>'
// });
// });
});
</script>
</body>
</html>
5.在浏览器中打开就是以下这个样子,我这边是以"广州天河体育中心",为目标,到时候你们可以改成自己想要的经纬度
image.png
粗劣简单地图展示,因为我也是刚学内容写的也不多,注释都在里面代码写了,有什么不明白的想了解更多的,大家可以上百度或去高德地图api详查(捂脸),嘻嘻嘻......(或者我有什么写错了的,可以留言评论,建议我修改!)
网友评论