做项目时遇到这种需求,客户后台添加地点名称,前台高德地图定位到指定地点.
注意:申请高德地图API时申请"javascript API",每种API的用途和权限不一样.

代码:

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
    <title>高德搜索定位</title>
    <link rel="stylesheet" href="http://cache.amap.com/lbs/static/main.css?v=1.0"/>
    <style type="text/css">
        .amap-info-content,h3{
            font-family: Microsoft Yahei;
            font-size:12px;
            min-width: 200px;
            max-width: 250px;
        }
        .amap-info-content{
            padding-right: 10px;
        }
        h3{
            margin: 0;
            font-size:13px;
        }
    </style>
    <script type="text/javascript" src="http://webapi.amap.com/maps?v=1.3&key=你申请的KEY"></script>
</head>
<body>
<div id="mapContainer"></div>
<div id="list"></div>
<script type="text/javascript">
    var map = new AMap.Map("mapContainer", {
        resizeEnable: true
    });
    AMap.service(["AMap.PlaceSearch"], function() {
        var placeSearch = new AMap.PlaceSearch({ //构造地点查询类
            pageSize: 5,
            pageIndex: 1,
            city: "010", //城市
            map: map,
            panel: "list"
        });
        //关键字查询
        placeSearch.search('北京体育大学');
    });
</script>
</body>
</html>