百度地图JSSDK使用小实例
代码示例
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
<script src="http://api.map.baidu.com/getscript?v=1.4&ak=&services=&t=20150522093217"></script>
<script src="http://ditu.google.cn/maps/api/js?key=AIzaSyDY0kkJiTPVd2U7aTOAwhc9ySH6oHxOIYM&sensor=false&_=20150522093217"></script>
<title>百度地图API使用示例</title>
<style>
#mapContainer{
height:600px;
width:600px;
border:1px solid #eee;
}
div.top{
margin-bottom:10px;
}
#btn{
border:0px;
background-color:66B3FF;
height:30px;
color:#FFF;
}
</style>
</head>
<body>
<div class="top">
<span>输入地点：</span><input type="text" id="keyword" />
<button onclick="searchAddress()" id="btn">搜索地址</button>
</div>
<div id="mapContainer">
</div>
</body>
<script>
var map;//百度地图实例
var local;
//创建经纬度方法
function createpoint(lon,lat){
return new BMap.Point(lon,lat);
};
function initMap(dom,point){
map = new BMap.Map(dom);
map.centerAndZoom(point,15);
map.enableScrollWheelZoom();
local = new BMap.LocalSearch(map,{renderOptions:{map: map}});
}
function searchAddress(){
var keyAddress = $("#keyword").val();
local.search(keyAddress);
}
$(function(){
var point = createpoint(116.404,39.915);
initMap("mapContainer",point); });
</script>
</html>
官方参考文档： http://lbsyun.baidu.com/index.php?title=jspopular
百度地图JSSDK使用小实例的更多相关文章
- 解决Vue引入百度地图JSSDK：BMap is undefined 问题
百度地图官网文档介绍使用JSSDK时,仅提供了2种引入方式: script引入 异步加载 解决跨域问题,实例调用百度地图 但vue项目中仅某一两个页面需要用到百度地图,所以不想在 index.html ...
- 百度地图Api进阶教程-实例高级操作8.html
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...
- 百度地图和echarts结合实例
1.由echart对象(bmapChart)获取百度地图对象(bdMap),echart对象(bmapChart)适用于所有的echart的操作和接口,百度地图对象(bdMap)适用于百度地图的所有接 ...
- 百度地图API 级别自动缩放
今天做一个基于百度地图API的小项目 查了很长时间apid都没有找到地图呈现出来的时候地图按坐标的多少自动缩放显示的等级比例,特此记录笔记!var points = [point1, point2,p ...
- 百度地图 JavaScript API
最近有点懒 项目结尾了 完了好长时间 没有去总结项目中的问题 想了下还是写写吧 这是一个关于百度地图的 网页展示 <!DOCTYPE html><html><head ...
- HTML5 调用百度地图API地理定位
<!DOCTYPE html> <html> <title>HTML5 HTML5 调用百度地图API地理定位实例</title> <head&g ...
- JavaScript动态加载script方式引用百度地图API，Uncaught ReferenceError: BMap is not defined
百度地图官网文档介绍使用JSSDK时,仅提供了2种引入方式: script引入 异步加载 实际工作场景中仅某一两个页面或者只是单纯有功能需要用到百度地图,所以没有必要在 index.html 中全局引 ...
- 百度地图 api 功能封装类 (ZMap.js) 本地搜索,范围查找实例 [源码下载]
相关说明 1. 界面查看: 吐槽贴:百度地图 api 封装 的实用功能 [源码下载] 2. 功能说明: 百度地图整合功能分享修正版[ZMap.js] 实例源码! ZMap.js 本类方法功能大多使用 ...
- 百度地图 api 功能封装类 (ZMap.js) 本地搜索,范围查找实例
百度地图 api 功能封装类 (ZMap.js) 本地搜索,范围查找实例 相关说明 1. 界面查看: 吐槽贴:百度地图 api 封装 的实用功能 [源码下载] 2. 功能说明: 百度地图整合功能分享修 ...
随机推荐
- hashmap相关面试题
- Shell 脚本格式注意事项
if 条件判断格式 if [ ! -f file.txt ];then cmd else cmd fi 注1:! 代表非.不存在文件就成功. 注2:再有参数 变量 需要 [] 阔起 1 运算书写写格式 ...
- esp32-micropython
本来之前买和另一贴子的esp8266一起买了一块esp32. 现在开发esp的大概有乐鑫的ide以及基于乐鑫定制的.arduino.nodemcu.还有就是现在要讲的micropython. 乐鑫的主 ...
- poj 3415 Common Substrings - 后缀数组 - 二分答案 - 单调栈
题目传送门 传送点I 传送点II 题目大意 给定串$A, B$,求$A$和$B$长度大于等于$k$的公共子串的数量. 根据常用套路,用一个奇怪的字符把$A$,$B$连接起来,然后二分答案,然后按mid ...
- BottomNavigationBar + BottomNavigationBarItem导航的另外一种用法
import 'package:flutter/material.dart'; import 'News.dart'; import 'Video.dart'; import 'Chat.dart'; ...
- 微信小程序实现图片裁剪上传（wepy）
参考https://github.com/we-plugin/we-cropper,在wepy中实现,参考的具体例子是we-cropper/example/cutInside/ 项目上传图片时2:3的 ...
- HDU 5405 Sometimes Naive（动态树）
题意 \(n\) 个节点的树,每个点有点权,\(m\) 次操作,操作分两种,修改一个节点的点权,对于一个 \((u,v)\) ,询问 \(\displaystyle\sum_{i=1}^n\sum_{ ...
- Lintcode105 Copy List with Random Pointer solution 题解
[题目描述] A linked list is given such that each node contains an additional random pointer which could ...
- Qt 中用QProcess调用cmd命令
项目做到一定阶段,常常须要在原来的project上调用外部程序. Qt为此提供了QProcess类,QProcess可用于完毕启动外部程序,并与之交互通信. 基本用法: QProcess p(0); ...
- 【Core Swagger】.NET Core中使用swagger
一.入门 https://www.nuget.org/packages/Swashbuckle.AspNetCore.SwaggerGen/ 1.添加核心NUGET包 Swashbuckle.AspN ...