javascript 调用百度地图API

最新推荐文章于 2025-09-13 09:06:35 发布

转载最新推荐文章于 2025-09-13 09:06:35 发布 · 63 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/zcttxs/archive/2012/11/05/2755301.html

文章标签：

#javascript #xhtml #c# #ViewUI

本文介绍了一个使用百度地图API的应用实例，通过简单的HTML页面展示了如何实现地图的基本操作，包括地图定位、滚动缩放、键盘控制等功能，并实现了地址搜索功能。

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default3.aspx.cs" Inherits="Default3" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
    <script type="text/javascript" src="http://api.map.baidu.com/api?&v=1.3">
    </script>
</head>
<body>
    <p>
        地址：<input id="txtSearch" type="text" />
        <input type="button" value="搜索" onclick="search()" /></p>
    <div style="width: 800px; height: 600px; border: 1px solid gray;" id="container">
    </div>
</body>
<script type="text/javascript">
    function $(id) {
        return document.getElementById(id); //定义$
    }
    var map = new BMap.Map("container"); //创建地图
    map.centerAndZoom(new BMap.Point(116.330599, 39.95536), 10); //初始化地图

    map.enableScrollWheelZoom(); // 开启鼠标滚轮缩放
    map.enableKeyboard();         // 开启键盘控制
    map.enableContinuousZoom();   // 开启连续缩放效果
    map.enableInertialDragging(); // 开启惯性拖拽效果

    map.addControl(new BMap.NavigationControl()); //添加标准地图控件(左上角的放大缩小左右拖拽控件)
    map.addControl(new BMap.ScaleControl());      //添加比例尺控件(左下角显示的比例尺控件)
    map.addControl(new BMap.OverviewMapControl()); // 缩略图控件
    map.addControl(new BMap.MapTypeControl());

var city = new BMap.LocalSearch(map, { renderOptions: { map: map, autoViewport: true} }); //地图显示到查询结果处

    function search() {
        var s = $("txtSearch").value;
        city.search(s); //查找城市
    }
</script>
</html>

转载于:https://www.cnblogs.com/zcttxs/archive/2012/11/05/2755301.html