13518219792
javascript 调用百度地图API
成都创新互联专注为客户提供全方位的互联网综合服务，包含不限于成都网站设计、成都网站建设、盐城网络推广、微信小程序、盐城网络营销、盐城企业策划、盐城品牌公关、搜索引擎seo、人物专访、企业宣传片、企业代运营等，从售前售中售后，我们都将竭诚为您服务，您的肯定，是我们最大的嘉奖；成都创新互联为所有大学生创业者提供盐城建站搭建服务，24小时服务热线：028-86922220，官方网址：www.cdcxhl.com
%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default3.aspx.cs" Inherits="Default3" %
!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ""
html xmlns=""
head runat="server"
title/title
script type="text/javascript" src=";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
这里，我用的是HTML5页面进行设计的。那么，首先创建一个HTML5文件，
如下图所示：
接着，设置下禁止浏览器窗口大小改变地图大小，并引入地图核心JS
meta name="viewport" content="initial-scale=1.0,user-scalable=no"
设置因浏览器大小改变地图大小，进行禁止；引入地图核心js前，记得到官网上申请密钥
如下图所示：
地图如何在页面上展示出来，这里就需要一个地图容器。于是，我在body/body中设置一个div，作为地图容器，
如下图所示：
接着，设置下body、div元素的样式，如宽度、高度、字体以及字体大小等。这里，必须要设置下宽度和高度，且使用百分比，这样让其自适应，
如下图所示：
然后，编写生成地图的核心JS，指定地图的经纬度，地图为2D的，放大级别zoom，
如下图所示：
最后，将地图初始化函数放到body中的onload事件中，让初始化页面就加载地图，
如下图所示：
7
但是，我发现这样写的话，地图始终不出来；于是，我仔细检查下，结果发现地图容器的ID和初始化函数地图ID不一致，还有没有设置html元素的样式，导致地图始终显示不了。修改完了之后，重新刷新浏览器，地图显示出来了
Javascrip要实现地图功能，可以调用地图API，比较权威的有百度地图API和谷歌地图API等，以下以百度地铁API为例。
百度地图JavaScript API是一套由JavaScript语言编写的应用程序接口，可帮助您在网站中构建功能丰富、交互性强的地图应用，支持PC端和移动端基于浏览器的地图应用开发，且支持HTML5特性的地图开发。
JavaScript API已经支持Https，如需此服务请移步合作咨询页面，在需求描述中写明申请Https使用权限。
该套API免费对外开放。自v1.5版本起，您需先申请密钥（ak）才可使用，接口（除发送短信功能外）无使用次数限制。
下面是官方示例：
!DOCTYPE html
html
head
meta http-equiv="Content-Type" content="text/html; charset=utf-8" /
meta name="viewport" content="initial-scale=1.0, user-scalable=no" /
style type="text/css"
body, html,#allmap {width: 100%;height: 100%;overflow: hidden;margin:0;font-family:"微软雅黑";}
/style
script type="text/javascript" src=";ak=您的密钥"/script
title地图展示/title
/head
body
div id="allmap"/div
/body
/html
script type="text/javascript"
// 百度地图API功能
var map = new BMap.Map("allmap"); // 创建Map实例
map.centerAndZoom(new BMap.Point(116.404, 39.915), 11); // 初始化地图,设置中心点坐标和地图级别
map.addControl(new BMap.MapTypeControl()); //添加地图类型控件
map.setCurrentCity("北京"); // 设置地图显示的城市 此项是必须设置的
map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放
/script
