百度地图

<!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>

 

已标记关键词 清除标记
©️2020 CSDN 皮肤主题: 点我我会动 设计师:上身试试 返回首页