一、地图样式设置
1. 首先，注册开发者账号，成为高德开放平台开发者
2. 登陆之后，在进入「应用管理」 页面「创建新应用」
3. 为应用添加 Key，「服务平台」一项请选择「 Web 端 ( JSAPI ) 」
准备页面
1. 在页面添加 JS API 的入口脚本标签，并将其中「您申请的key值」替换为您刚刚申请的 key；
<script type="text/javascript" class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="https://webapi.amap.com/maps?v=1.4.15&key=您申请的key值"></script>
2. 添加div标签作为地图容器，同时为该div指定id属性；
<div id="container"></div>
3. 为地图容器指定高度、宽度；
#container {width:300px; height: 180px; }4. 进行移动端开发时，请在head内添加viewport设置，以达到最佳的绘制性能；
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
创建一个地图只需要一行代码，构造参数中的
container为准备阶段添加的地图容器的id；创建的同时可以给地图设置中心点、级别、显示模式、自定义样式等属性：var map = new AMap.Map('container', {
zoom:11,//级别
center: [116.397428, 39.90923],//中心点坐标
viewMode:'3D'//使用3D视图
});
（二）设置地图样式的方式有两种：
1、在地图初始化时添加
var map = new AMap.Map('container',{
mapStyle: 'amap://styles/whitesmoke', //设置地图的显示样式
});
2、地图创建之后使用Map对象的setMapStyle方法来修改
var map = new AMap.Map(
'container',{
zoom: 10, //设置地图的缩放级别}); map.setMapStyle('amap://styles/whitesmoke'
);
补充：在初始化参数中设置 如下参数，可禁止拖动和缩放地图
zoomEnable:false, dragEnable: false,
二、marker标记添加
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="../css/common.css" />
<style>
html,body{ height:100%; margin:0; }
#container{ width:100%; height:100%; position:absolute; left:0; right:0; }
.map-container{ width:100%; height:100%;/* background:url(../img/bg_map.png) 0 0/100% 100% no-repeat;*/ display:flex; align-items:center; justify-content:center; flex-direction:column; }
.video-wrap{ width:60%; height:50%; position:relative; transition:all 1s; }
.video-close{ position:absolute; right:20px; top:10px; cursor:pointer; padding:10px; border-radius:20px; z-index:10; }
.btn{ width:100px; padding:10px 0; box-sizing:border-box; text-align:center; background-color:#0079d1; border-radius:5px; color:#fff; cursor:pointer; margin-top:20px; font-size:18px; position:absolute; left:20px; top:20px; z-index:1; }
.bg_marker{ width:49px; height:70px; background:url(../img/poi-marker-1.png) 0 0 no-repeat; text-align:center; padding:10px 0 0; font-size:24px; }
</style>
</head>
<body>
<div id="container">
<div class="btn" id="back">返回</div>
</div>
<div class="map-container">
<div class="video-wrap" id="videoBox" style="display:none;">
<div class="video-close" id="closed">X</div>
<video class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="../img/source/banner.mpeg" width="100%" controls="controls">
您的浏览器不支持 video 标签。
</video>
</div>
</div>
<script type="text/javascript" class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="https://webapi.amap.com/maps?v=1.4.15&key=7ae17eb6ba804a59a7ee5f7c4fc5930e"></script>
<script>
var map = new AMap.Map('container', {
resizeEnable: true,
center: [119.487758, 25.935319],
zoom: 18,
zoomEnable:false,
dragEnable: false,
});
map.setMapStyle('965c1194c86a1687c9ab01bb6ae37b4f');
map.clearMap(); // 清除地图覆盖物
var markers = [{
position: [119.489126, 25.934101],
content: '<div class="bg_marker">1</div>',
}, {
position: [119.487769, 25.93576],
content: '<div class="bg_marker">2</div>',
}, {
position: [119.486412, 25.936441],
content: '<div class="bg_marker">3</div>',
},{
position: [119.488461, 25.93647],
content: '<div class="bg_marker">4</div>',
},{
position: [119.489491, 25.93727],
content: '<div class="bg_marker">5</div>',
},{
position: [119.484502, 25.934255],
content: '<div class="bg_marker">6</div>',
},{
position: [119.485199, 25.937241],
content: '<div class="bg_marker">7</div>',
},
];
// 添加一些分布不均的点到地图上,地图上添加三个点标记，作为参照
markers.forEach(function(marker) {
marker = new AMap.Marker({
map: map,
// icon: marker.icon,
content:marker.content,
position: [marker.position[0], marker.position[1]],
offset: new AMap.Pixel(-13, -30)
});
marker.on('click',function(e){
// console.log(e)
document.querySelector("#videoBox").style.display = "block";
})
});
map.on('click', function(e) {
console.log(e.lnglat.getLng() + ',' + e.lnglat.getLat())
});
</script>
<script>
let closeBtn = document.querySelector("#closed");
closeBtn.onclick = function(){
console.log(this)
this.parentNode.style.display = "none";
}
let backBtn = document.querySelector("#back");
backBtn.onclick = function(){
window.history.back(-1);
}
</script>
</body>
</html>
共同学习，写下你的评论
评论加载中...
作者其他优质文章
