準備頁面

1. 在頁面新增 JS API 的入口指令碼標籤，並將其中「您申請的key值」替換為您剛剛申請的 key；

<script type="text/javascript" class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="您申請的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%; 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="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>

高德地圖JSAPI學習（一）

準備頁面

相關文章