百度地图
程序员文章站
2022-06-10 16:29:12
...
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>高德地图学习</title>
<link rel="stylesheet" href="https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css"/>
<style type="text/css">
html, body, #content {
width: 100%;
height: 100%;
}
#left {
width: 10%;
height: 100%;
float: left;
}
#container {
width: 90%;
height: 100%;
float: right;
}
</style>
</head>
<body>
<div id="content" style="background: aqua">
<div id="left" style="background: blanchedalmond;">
<input type="button" value="添加实时路况" onclick="addTraffic()">
<input type="button" value="添加室内地图" onclick="addIndoorMap()">
<input type="button" value="添加和移除marker" onclick="addMarker()">
<input type="button" value="中英文切换" onclick="changeLanguage()">
</div>
<div id="container" style="background: coral;"></div>
<div class="input-card">
<h4>下属行政区查询</h4>
<div class="input-item">
<div class="input-item-prepend"><span class="input-item-text">省市区</span></div>
<select id='province' style="width:100px" onchange='search(this)'></select>
</div>
<div class="input-item">
<div class="input-item-prepend"><span class="input-item-text">地级市</span></div>
<select id='city' style="width:100px" onchange='search(this)'></select>
</div>
<div class="input-item">
<div class="input-item-prepend"><span class="input-item-text">区县</span></div>
<select id='district' style="width:100px" onchange='search(this)'></select>
</div>
<div class="input-item">
<div class="input-item-prepend"><span class="input-item-text">街道</span></div>
<select id='street' style="width:100px" onchange='setCenter(this)'></select>
</div>
</div>
</div>
<script type="text/javascript"
src="https://webapi.amap.com/maps?v=1.4.15&key=266d784fa2736ac4d21b425b565b2f57&plugin=AMap.DistrictSearch,AMap.ToolBar"></script>
<script type="text/javascript">
var map, marker, trafficLayer;
var isTraffic = false, isMarker = false;
var languageType = 0;
var languageArray = ["en","zh_en","zh_cn"];
map = new AMap.Map("container", {
resizeEnable: true,//是否监控地图容器尺寸变化
center: [121.602179, 31.206893],//中心点
layers:[new AMap.TileLayer.Satellite()],//设置图层，可以是多个：
viewMode: "3D",//使用3D、2D
zooms:[11,18],//设置地图级别范围
zoom: 18//级别
});
//显示实时路况
trafficLayer = new AMap.TileLayer.Traffic({
zIndex: 10
});
trafficLayer.hide();
trafficLayer.setMap(map);
function addTraffic() {
if (!isTraffic) {
trafficLayer.show();
isTraffic = true;
} else {
isTraffic = false;
trafficLayer.hide();
}
}
//显示实时路况
var indoorMap = new AMap.TileLayer.Traffic({
zIndex: 10
});
map.indoorMap.on('click',function(result){
alert("==1===")
alert(result.shop.id)
});
function addIndoorMap(){
alert("=====")
}
// trafficLayer.hide();
// trafficLayer.setMap(map);
//
// function addTraffic() {
// if (!isTraffic) {
// trafficLayer.show();
// isTraffic = true;
// } else {
// isTraffic = false;
// trafficLayer.hide();
// }
// }
//添加marker
marker = new AMap.Marker({
position: [121.602179, 31.206893]
});
function addMarker() {
if (!isMarker) {
isMarker = true;
map.add(marker)
} else {
isMarker = false;
map.remove(marker);
}
}
//中英文切换
function changeLanguage() {
languageType++;
languageType = languageType > 2 ? 0 : languageType;
map.setLang(languageArray[languageType]);
}
</script>
</body>
</html>