自己网页调用百度地图API
来源:互联网 发布:软件停止运行怎么回事 编辑:程序博客网 时间:2024/05/17 09:07
<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="keywords" content="百度地图,百度地图API,百度地图自定义工具,百度地图所见即所得工具" /> <meta name="description" content="百度地图API自定义地图,帮助用户在可视化操作下生成百度地图" /> <title>百度地图API自定义地图</title> <!--引用百度地图API--> <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=xxxxxxxxxxxxxxxxxxxxxxxxxxxxxx"></script></head><body><!--百度地图容器--><div style="width:700px;height:550px;border:#ccc solid 1px;font-size:12px" id="map"></div><p style="color:red;font-weight:600">地图生成工具基于百度地图JS api v2.0版本开发,使用请申请密匙。 <a href="http://developer.baidu.com/map/index.php?title=jspopular/guide/introduction" style="color:#2f83c7" target="_blank">了解如何申请密匙</a> <a href="http://lbsyun.baidu.com/apiconsole/key?application=key" style="color:#2f83c7" target="_blank">申请密匙</a></p></body><script type="text/javascript"> //创建和初始化地图函数: function initMap(){ createMap();//创建地图 setMapEvent();//设置地图事件 addMapControl();//向地图添加控件 addMapOverlay();//向地图添加覆盖物 } function createMap(){ map = new BMap.Map("map"); map.centerAndZoom(new BMap.Point(126.647611,45.726452),16); } function setMapEvent(){ map.enableScrollWheelZoom(); map.enableKeyboard(); map.enableDragging(); map.enableDoubleClickZoom() } function addClickHandler(target,window){ target.addEventListener("click",function(){ target.openInfoWindow(window); }); } function addMapOverlay(){ var markers = [ {content:"我的备注",title:"我的标记",imageOffset: {width:0,height:3},position:{lat:45.725295,lng:126.64815}} ]; for(var index = 0; index < markers.length; index++ ){ var point = new BMap.Point(markers[index].position.lng,markers[index].position.lat); var marker = new BMap.Marker(point,{icon:new BMap.Icon("http://api.map.baidu.com/lbsapi/createmap/images/icon.png",new BMap.Size(20,25),{ imageOffset: new BMap.Size(markers[index].imageOffset.width,markers[index].imageOffset.height) })}); var label = new BMap.Label(markers[index].title,{offset: new BMap.Size(25,5)}); var opts = { width: 200, title: markers[index].title, enableMessage: false }; var infoWindow = new BMap.InfoWindow(markers[index].content,opts); marker.setLabel(label); addClickHandler(marker,infoWindow); map.addOverlay(marker); }; } //向地图添加控件 function addMapControl(){ var scaleControl = new BMap.ScaleControl({anchor:BMAP_ANCHOR_BOTTOM_LEFT}); scaleControl.setUnit(BMAP_UNIT_IMPERIAL); map.addControl(scaleControl); var navControl = new BMap.NavigationControl({anchor:BMAP_ANCHOR_TOP_LEFT,type:BMAP_NAVIGATION_CONTROL_LARGE}); map.addControl(navControl); var overviewControl = new BMap.OverviewMapControl({anchor:BMAP_ANCHOR_BOTTOM_RIGHT,isOpen:true}); map.addControl(overviewControl); } var map; initMap();</script></html>
1 0
- 自己网页调用百度地图API
- iOS-网页调用百度地图API
- 网页中调用百度地图API
- 百度地图api调用
- 如何在网页中调用百度地图API
- 如何在网页中调用百度地图API ?
- 如何在网页中调用百度地图api
- 如何在网页中调用百度地图api
- 如何在网页中调用百度地图API
- 调用百度地图API实例
- JS调用百度地图API
- 百度地图API调用实例
- javascript调用百度地图api
- 百度地图API的调用
- Android--调用百度地图API
- [API]百度地图的调用
- 百度地图api 异步调用
- js-调用百度地图api
- LightOJ 1361 Component Placement 最小割
- Android开发环境搭建的窍门以及难点解决
- Android listview加载不同布局与adapter用法
- 第四章 局域网
- patest L3-007 天梯地图
- 自己网页调用百度地图API
- 程序员接私活经验谈
- Android尺子
- 安卓学习摘要--适配器
- HTML5简介
- 手机开发实战117——蓝牙介绍1
- 从今天起,刷题看数据结构算法——leetcode题 two sum
- java 类的继承和多态 1
- 手机开发实战118——蓝牙介绍2