目录
一、地图官网
二、webjs的开发文档
三、正式集成
1、Index.html引入高德地图
2、在Map.vue页面使用
1）点标记 Marker
2）信息窗体
3）路线规划
四、案例
1、在全局html文件中添加高德JS API
2、在vue组件中使用
一、地图官网
定位-服务插件和工具-进阶教程-地图 JS API 2.0 | 高德地图API亲手试一试AMap.Geolocation定位插件可助您获取到用户当前位置、城市等信息，AMap.Geolocatio
https://lbs.amap.com/api/javascript-api-v2/guide/services/geolocation#t2
二、webjs的开发文档
点标记
信息窗体
流线规划
定位
三、正式集成
1、Index.html引入高德地图
2、在Map.vue页面使用
1）点标记 Marker
坐标获取器经纬度查询 - 坐标拾取系统
2）信息窗体
// 信息窗体的内容
var content = [
"<div><img src="\"" http:="" webapi.amap.com="" images="" autonavi.png="" \"=""> ",
"<div style="\"padding:0px" 0px="" 4px;\"=""><b>高德软件有限公司</b>",
"电话 : 010-84107000 邮编 : 100102",
"地址 : 北京市望京阜通东大街方恒国际中心A座16层</div></div>"
];
// 创建 infoWindow 实例
var infoWindow = new AMap.InfoWindow({
content: content.join("<br>") //传入 dom 对象，或者 html 字符串
});
// 打开信息窗体
infoWindow.open(map);3）路线规划
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
<title>位置经纬度 + 步行路线规划</title>
<style type="text/css">
html,
body,
#container {
width: 100%;
height: 100%;
}
#panel {
position: fixed;
background-color: white;
max-height: 90%;
overflow-y: auto;
top: 10px;
right: 10px;
width: 280px;
}
#panel .amap-call {
background-color: #009cf9;
border-top-left-radius: 4px;
border-top-right-radius: 4px;
}
#panel .amap-lib-walking {
border-bottom-left-radius: 4px;
border-bottom-right-radius: 4px;
overflow: hidden;
}
</style>
<link rel="stylesheet" href="https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css" />
<script type="text/javascript" src="https://webapi.amap.com/maps?v=2.0&key=您申请的key值&plugin=AMap.Walking"></script>
<script src="https://a.amap.com/jsapi_demos/static/demo-center/js/demoutils.js"></script>
<script type="text/javascript" src="https://cache.amap.com/lbs/static/addToolbar.js"></script>
</head>
<body>
<div id="container"></div>
<div id="panel"></div>
<script type="text/javascript">
var map = new AMap.Map("container", {
resizeEnable: true,
center: [116.397428, 39.90923],//地图中心点
zoom: 13 //地图显示的缩放级别
});
//步行导航
var walking = new AMap.Walking({
map: map,
panel: "panel"
});
//根据起终点坐标规划步行路线
walking.search([116.399028, 39.845042], [116.436281, 39.880719], function(status, result) {
// result即是对应的步行路线数据信息，相关数据结构文档请参考 https://lbs.amap.com/api/javascript-api/reference/route-search#m_WalkingResult
if (status === 'complete') {
log.success('绘制步行路线完成')
} else {
log.error('步行路线数据查询失败' + result)
}
});
</script>
</body>
</html>定位：定位-服务插件和工具-进阶教程-地图 JS API 2.0 | 高德地图API
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
<title>根据ip定位</title>
<link rel="stylesheet" href="https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css"/>
<style type="text/css">
html,body,#container{
height:100%;
}
</style>
</head>
<body>
<div id="container"></div>
<div class="info">
<p id='info'></p>
</div>
<script type="text/javascript" src="//webapi.amap.com/maps?v=2.0&key=您申请的key值&plugin=AMap.CitySearch"></script>
<script type="text/javascript">
var map = new AMap.Map("container", {
center: [116.397428, 39.90923],
zoom: 13
});
//获取用户所在城市信息
function showCityInfo() {
//实例化城市查询类
var citysearch = new AMap.CitySearch();
//自动获取用户IP，返回当前城市
citysearch.getLocalCity(function(status, result) {
if (status === 'complete' && result.info === 'OK') {
if (result && result.city && result.bounds) {
var cityinfo = result.city;
var citybounds = result.bounds;
document.getElementById('info').innerHTML = '您当前所在城市：'+cityinfo;
//地图显示当前城市
map.setBounds(citybounds);
}
} else {
document.getElementById('info').innerHTML = result.info;
}
});
}
showCityInfo();
</script>
</body>
</html>四、案例
本次完成功能：单一某省的地图，3D地图展示，3D模型在地图加载并展示，地图上绘制圆圈
<script language="javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=你申请的key&plugin=AMap.DistrictSearch,Map3D"></script>1、在全局html文件中添加高德JS API
<script type="text/javascript">
window._AMapSecurityConfig = {
securityJsCode:'您的密钥',
}
</script>
<script src="https://webapi.amap.com/maps?v=2.0&key=您申请的key值&plugin=所用到的插件"></script>2、在vue组件中使用
<template>
<div id="map-chart">
<div class="rose-chart-title">充电站分布</div>
<div id="map" class="map" style="width:100%;height:700px ;"></div>
</div>
</template>
<script>
export default {
data() {
return {
AMap: window.AMap,
}
},
mounted() {
this.initMap() // 初始化
},
methods: {
// 初始化地图
initMap() {
var opts = {
subdistrict: 0,
extensions: 'all',
level: 'province'
};
//利用行政区查询获取边界构建mask路径
//也可以直接通过经纬度构建mask路径
var district = new AMap.DistrictSearch(opts);
district.search('四川省', (status, result) => {
console.log(status, result)
var bounds = result.districtList[0].boundaries;
var mask = []
for (var i = 0; i < bounds.length; i += 1) {
mask.push([bounds[i]])
}
var map = new AMap.Map('map',{
viewMode:'3D',
center:[104.06675, 30.589955],
pitch:55,
rotateEnable: true,
pitchEnable: true,
skyColor: '#061740',
rotation: -15,
rotateEnable: true,
pitchEnable: true,
mask: mask,
mapStyle: "amap://styles/light",
zoom: 17,
zooms: [8, 17],
});
map.AmbientLight = new AMap.Lights.AmbientLight([1,1,1],1);
map.DirectionLight = new AMap.Lights.DirectionLight([1,0,-0.5],[1,1,1],1);
new AMap.Circle({
center:[104.06675, 30.589955],
map:map,
radius:700,
fillColor:'blue',
strokeWeight:1,
strokeColor:'white',
fillOpacity:0.05
})
new AMap.Circle({
center:[104.06675, 30.589955],
map:map,
radius:500,
fillColor:'blue',
strokeWeight:1,
strokeColor:'white',
fillOpacity:0.05
})
new AMap.Circle({
center:[104.06675, 30.589955],
map:map,
radius:300,
fillColor:'blue',
strokeWeight:1,
strokeColor:'white',
fillOpacity:0.05
})
//创建Object3DLayer图层
var object3Dlayer = new AMap.Object3DLayer({map:map,zIndex:9999});
map.add(object3Dlayer);
var druckMeshes
map.plugin(["AMap.GltfLoader"], function () {
var urlDuck = 'https://a.amap.com/jsapi_demos/static/gltf/Duck.gltf';
var paramDuck = {
position: new AMap.LngLat(104.06675, 30.589955), // 必须
scale: 500, // 非必须，默认1
height: -100, // 非必须，默认0
scene: 0, // 非必须，默认0
};
var gltfObj = new AMap.GltfLoader();
gltfObj.load(urlDuck, function (gltfDuck) {
druckMeshes = gltfDuck;
gltfDuck.setOption(paramDuck);
gltfDuck.rotateX(90);
gltfDuck.rotateZ(-230);
object3Dlayer.add(gltfDuck);
});
});
})
},
},
}
</script>
<style lang="less">
.amap-logo{
display: none !important;
}
</style>本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
