高德地图

作者: 他在发呆 | 来源:发表于2017-06-22 21:24 被阅读0次

6、android应用调用第三方地图
11.4 高德地图案列
iOS开发之地图搜索列表显示效果实现
地图打点
js实现当前位置定位(获取当前位置地理位置信息)
高的地图
高德地图之路线规划多点路线规划路线最短原则排序算法
高德地图导航使用指南
h5调用地图功能
地图营销、图片营销，为您解秘、实战，让您成为地图营销的能力

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>基本地图展示</title>
    <link rel="stylesheet" href="http://cache.amap.com/lbs/static/main1119.css"/>
    <script src="http://cache.amap.com/lbs/static/es5.min.js"></script>
    <script src="http://webapi.amap.com/maps?v=1.3&key=06fb75f531ce19fd2af711465487d07a&plugin=AMap.Scale,AMap.OverView,AMap.ToolBar,AMap.Autocomplete"></script>
    <style>
        #container{
            width: 800px;
            height: 600px;
            margin: auto;
        }
    </style>
</head>
<body>
        <div id="container"></div>
        <div id="myPageTop">
    <table>
        <tr>
            <td>
                <label>按关键字搜索：</label>
            </td>
            <td class="column2">
                <label>左击获取经纬度：</label>
            </td>
        </tr>
        <tr>
            <td>
                <input type="text" placeholder="请输入关键字进行搜索" id="tipinput">
            </td>
            <td class="column2">
                <input type="text" readonly="true" id="lnglat">
            </td>
        </tr>
    </table>
</div>
</body>
<script>
    var map = new AMap.Map("container", {
        resizeEnable: true,
        zoom:11,
        center: [116.397428, 39.90923]
    });
    console.log(map);

    //设置地图语言  英文：'en' 中英混合 'zh_en'  中文：'zh_cn'
    map.setLang("en");

    //创建控制控件
        // 比例尺
    var scale = new AMap.Scale({
            visible: true
        }),
        //工具条
        toolBar = new AMap.ToolBar({
            visible: true
        }),
        //鹰眼
        overView = new AMap.OverView({
            visible: true
        });
    map.addControl(scale);
    map.addControl(toolBar);
    map.addControl(overView);
    //工具条操作
    //方向盘显示隐藏
    toolBar.hideDirection();
    toolBar.showDirection();
    //工具条标尺显示隐藏
    toolBar.hideRuler();
    // toolBar.showRuler();
    //鹰眼操作
    //显示隐藏鹰眼按钮
    overView.show();
    overView.hide();
    //打开或者关闭鹰眼
    overView.open();
    overView.close();
    window.map = map;

    //使用setCity设置地图中心城市
    map.setCity("changchun");

    //设置中心和缩放
    map.setZoomAndCenter(14, [116.205467, 39.907761]);
    map.setZoom(12);
    map.setCenter([116.205467, 39.907761]);
    //平移像素
    map.panBy(200,200);
    //平移到某坐标
    map.panTo([116.397428, 39.90923]);

    //创建自动提示输入框
    var auto = new AMap.Autocomplete({
        input: "tipinput"
    });

    AMap.event.addListener(auto, "select", function(e){
        if (e.poi && e.poi.location) {
            map.setZoom(15);
            map.setCenter(e.poi.location);
            console.log(e);
            var maker = new AMap.Marker({
                map: map,
                position: e.poi.location,
                title: e.poi.name
            });
        }
    });

    //创建第一个maker
    var maker = new AMap.Marker({
        position: [116.397428, 39.90923],
        title: "ABC",
        map: map
    });
</script>
</html>

image.png