地图使用demo"/>
高德地图使用demo
官网api文档: 快速上手-入门-教程-地图 JS API | 高德地图API
<!document html><html>
<head>
<script>
window.onLoad = function(){var map = new AMap.Map('container', {center: [116.397428, 39.90923],layers: [//使用多个图层new AMap.TileLayer.Satellite(),new AMap.TileLayer.RoadNet()],zooms: [4,18],//设置地图级别范围zoom: 13});}var url = '=2.0&key=****&callback=onLoad';var jsapi = document.createElement('script');jsapi.charset = 'utf-8';jsapi.src = url;document.head.appendChild(jsapi);</script>
<style>
#container {width:1024px; height: 500px; }
</style>
</head><body><div id="container"></div>
</body></html>
H5的draggable属性,拖动元素
<!document html>
<html>
<head>
<style>
#container {width:1024px; height: 760px; }
#overContainer{width: 350px;
height: 60px;
position: absolute;
left: 10;
top: 10px;
background: gray; }
.myUl{
list-style-type:none;
margin-left: -30px;
}
.myInline{
display: inline-block;
}
.myUl li{
color:green;
display: inline-block;
border: 1px red solid;
}
.myUl li:hover{
cursor:pointer;
}
.inputStyle1{
width:80px;
border: none;
}
</style>
</head>
<body>
<div id="container"></div>
<div id="overContainer" draggable="true">
<ul class="myUl">
<li οnclick="getCircle()">圆形</li>
<li οnclick="getCircle()">矩形</li>
<li οnclick="getCircle()">多边形</li>
<li οnclick="getCircle()">清除</li>
<li οnclick="getCircle()" style="margin-left: 30px"><span style="color: black;">搜索: </span><input type="text" id="searchWhere" οninput="searchWhere(this)" placeholder="地名" class="inputStyle1"/></li>
</ul>
<div>
</body>
<script>
// let box = document.getElementById('overContainer');
// box.addEventListener('dragstart', (e) => {
// console.log('拖动开始');
// })
// box.addEventListener('drag', (e) => {
// console.log('拖动中');
// })
// box.addEventListener('dragend', (e) => {
// console.log('拖动结束');
// })
let box = document.querySelector('#overContainer');
// 用于保存鼠标在节点中的位置
let initX = null,
initY = null;
box.addEventListener('dragstart', (e) => {
// 在开始拖拽,保存鼠标在节点中的位置
initX = e.offsetX;
initY = e.offsetY;
})
box.addEventListener('drag', (e) => {
// 拖拽过程中,如果不减去鼠标在节点中的位置,会出现 div 的左上角与 鼠标位置重合
// 中间会有 "闪现" 的效果
let _left = e.clientX - initX
let _top = e.clientY - initYbox.style.left = _left + 'px';
box.style.top = _top + 'px';
// 这个过程结束后,e.clientX和e.clientY都会变成0
// 就会导致 left 和 top 的值变为负值
})
box.addEventListener('dragend', (e) => {
// 所以结束的时候也要设置位置,
// 不然盒子会闪现到左上角
let _left = e.clientX - initX
let _top = e.clientY - initYbox.style.left = _left + 'px';
box.style.top = _top + 'px';
})</script>
</html>
更多推荐
高德地图使用demo
发布评论