高德地图开放平台使用情况
最编程
2024-03-28 17:07:24
...
高德地图开放平台 https://lbs.amap.com/
第一步：首页下拉--开发文档--web端--地图 JS API(web js使用文档)--概述--点击左侧"准备"
注册登陆后点击选择右上角的--应用管理---创建新应用，获得key
<style>
#container {
width: 300px;
height: 180px;
background-color: pink
}
</style>
</head>
<body>
<div id="container"></div>
<script type="text/javascript">
window._AMapSecurityConfig = {
serviceHost: 'http://127.0.0.1:5500/lianxi.html',
// 例如 ：serviceHost:'http://1.1.1.1:80/_AMapService',
}
</script>
<script type="text/javascript"
src="https://webapi.amap.com/maps?v=1.4.15&key=bdf3b4749198308b900c5e3dd4451ea1"></script>
</body>
第二步：再回到“概述”页面--快速上手，选择需要的代码加上并修改您的代理服务器域名或地址 和key值。（https://lbs.amap.com/api/javascript-api/summary/）首页向下拉--开发文档--web端--地图 JS API(web js使用文档)，添加JS代码
获取某地经度纬度：开放平台菜单“开发支持”--坐标拾取器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<link rel="stylesheet" href="./index.css">
<title>Document</title>
<style>
#container {
width: 600px;
height: 360px;
background-color: pink
}
</style>
</head>
<body>
<div id="container"></div>
<script type="text/javascript">
window._AMapSecurityConfig = {
serviceHost: 'http://127.0.0.1:5500/lianxi.html',
// 例如 ：serviceHost:'http://1.1.1.1:80/_AMapService',
}
</script>
<script type="text/javascript"
src="https://webapi.amap.com/maps?v=1.4.15&key=bdf3b4749198308b900c5e3dd4451ea1"></script>
<script>
var map = new AMap.Map('container', {
zoom: 11,//级别
center: [115.582036, 37.550424],//中心点坐标
viewMode: '3D'//使用3D视图
});
var marker = new AMap.Marker({
position: [115.582036, 37.550424]//位置
})
map.add(marker);//添加到地图
var lineArr = [
[115.582036, 37.550424],
[115.589036, 37.554424],
[115.584036, 37.558424],
[115.580036, 37.551424]
];
var polyline = new AMap.Polyline({
path: lineArr, //设置线覆盖物路径
strokeColor: "#3366FF", //线颜色
strokeWeight: 5, //线宽
strokeStyle: "solid", //线样式
});
map.add(polyline);
var infoWindow = new AMap.InfoWindow({ //创建信息窗体
isCustom: true, //使用自定义窗体
content: '<div style="padding:10px;border:1px solid skyblue;font-size:12px;background-color:rgba(255,255,255,.4)">冀州，是汉籍《禹贡》所描述的汉地九州之一 [1] 。《尚书·禹贡》记载，大禹分天下为九州，其中即有冀州，位列九州之首，包括现在北京市、天津市、河北省、山西省、河南省北部、及辽宁省与内蒙部分地区。</div>', //信息窗体的内容可以是任意html片段
offset: new AMap.Pixel(16, -45)
});
var onMarkerClick = function (e) {
infoWindow.open(map, e.target.getPosition());//打开信息窗体
//e.target就是被点击的Marker
}
var marker = new AMap.Marker({
position: [115.582036, 37.550424]
})
map.add(marker);
marker.on('click', onMarkerClick);//绑定click事件
</script>
</body>
</html>