yizuwang
/
map.html

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>百度地图API接口测试</title>
</head>

<body>
  <input type="text" id="searchCityName" name="name" value="西安市小雁塔">
  <div id="sharePosition" style="width:500px;height:40px;">
  </div>
  <div id="optionsNarrative" style="width:600px;height:600px">
  </div>
</body>
<script src="jquery-3.1.0.js" charset="utf-8"></script>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=4ilCdjYrWLtqW5TjGnI3sTkCYOVSKtM3"></script>
<script type="text/javascript">
    var searchCityName = document.getElementById("searchCityName").value;
    var SAMPLE_ADVANCED_POST = 'http://api.map.baidu.com/geocoder/v2/?ak=4ilCdjYrWLtqW5TjGnI3sTkCYOVSKtM3&callback=renderOption&output=json';
    var advancedOptions = "";
    var address = "";
    function showOptionsURL(type) {
        advancedOptions = SAMPLE_ADVANCED_POST;
        address = document.getElementById('location').value;
        var cityname = document.getElementById('cityname').value;
        advancedOptions += "&address=" + address;
        advancedOptions += "&city+" + cityname;
        var safe = advancedOptions;
        document.getElementById('optionsSampleUrl').innerHTML = safe.replace(/</g, '&lt;').replace(/>/g, '&gt;');
    };
    function renderOption(response) {
        var share = '';
        if (response.status) {
            var text = "无正确的返回结果:\n";
            document.getElementById('optionsNarrative').innerHTML = text;
            return;
        }
        var location = response.result.location;
        var uri = 'http://api.map.baidu.com/marker?location=' + location.lat + ',' + location.lng + '&title=' + response.result.level + '&content=' + address + '&output=html';
        var staticimageUrl = "http://api.map.baidu.com/staticimage?center=" + location.lng + ',' + location.lat + "&markers=" + location.lng + ',' + location.lat;
        share += '<p> <a href="' + uri + '" target="_blank">分享该点:</a></p>'; //将该链接设置成可单击
        document.getElementById('sharePosition').innerHTML = share;
        return;
    }
    function doOptions() {
        var script = document.createElement('script');
        script.type = 'text/javascript';
        showOptionsURL('buttonClick');
        var newURL = advancedOptions.replace('您的密钥', '4ilCdjYrWLtqW5TjGnI3sTkCYOVSKtM3');
        script.src = newURL;
        document.body.appendChild(script);
    };
    function GetCode() {
    $.ajax({
        type: "post",
        url: "http://api.map.baidu.com/geocoder/v2/?address="+searchCityName+"&output=json&ak=4ilCdjYrWLtqW5TjGnI3sTkCYOVSKtM3&callback=showLocation",
        dataType: "JSONP",
        success: function(data) {
            renderOption(data);
            var map = new BMap.Map("optionsNarrative"); // 创建Map实例
            var point = new BMap.Point(data.result.location.lng, data.result.location.lat); // 创建点坐标
            map.centerAndZoom(point, 15); // 初始化地图,设置中心点坐标和地图级别。
            var marker = new BMap.Marker(point); // 创建标注
            map.addOverlay(marker); // 将标注添加到地图中
            marker.setAnimation(BMAP_ANIMATION_BOUNCE); //跳动的动画
            map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放
        },
        error: function(data) {
            renderOption(data);
        }
    });
}
GetCode();
</script>

</html>