html与地图

html：<!DOCTYPE html><html>

<head>    <meta charset="UTF-8">    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>    <meta name="viewport" content="initial-scale=1.0, user-scalable=no"/>    <title>地图</title>    <link rel="stylesheet" href="personal.css"/>    <script type="text/javascript" src="js/jquery-2.2.2.min.js"></script>    <script type="text/javascript"            src="http://api.map.baidu.com/api?v=2.0&ak=fofkFVBIXPsmyqpaXrEnyGLbG2CQMTMG"></script>    <style type="text/css">        #l-map {            width: 590px;            height: 382px;            margin: 20px auto 0;            border: 1px solid #DCDCDC;        }

        #r-result {            width: 590px;            height: 382px;            margin: 0 auto;        }    </style></head>

<body><div id="l-map"></div><div id="r-result"></div><script type="text/javascript">    // 百度地图API功能    var map = new BMap.Map("l-map"); // 创建Map实例    map.centerAndZoom(new BMap.Point(117.27, 31.86), 11);    var myKeys = ["菜市场,农贸市场"];    var local = new BMap.LocalSearch(map, {        renderOptions: {            map: map,            panel: "r-result"        },        pageCapacity: 5    });    local.searchInBounds(myKeys, map.getBounds());</script></body>

</html>

result：
时间： 2024-11-05 11:12:20

html与地图的相关文章

百度地图API实现批量地址解析

1.前言 写这篇文章的原因是最近做一个GIS项目在网上爬取了一些数据,无奈只有地址的文字信息没有坐标信息,如何把信息显现在地图上呢?很纠结啊,查看了一下百度地图API惊奇的发现百度提供了地址解析的API,然后查看了他的Demo后豁然开朗,所以动手将自己的文字信息数据进行解析坐标信息.下面开始讲解. 2.方案 (1)自己数据库中的数据 (2)百度地图API Demo <!DOCTYPE html> <html> <head> <meta http-equiv=&qu

【API】高德地图API JS实现获取坐标和回显点标记

1.搜索+选择+获取经纬度和详细地址 2.回显数据并点标记 3.实现 第一步:引入资源文件 <!--引入高德地图JSAPI --><script src="//webapi.amap.com/maps?v=1.3&key=在官网申请一个key"></script><!--引入UI组件库(1.0版本) --><script src="//webapi.amap.com/ui/1.0/main.js">

js中实现高德地图坐标经纬度转百度地图坐标

1 function tobdMap(x, y) { 2 var x_pi = 3.14159265358979324 * 3000.0 / 180.0; 3 var z = Math.sqrt(x * x + y * y) + 0.00002 * Math.sin(y * x_pi); 4 var theta = Math.atan2(y, x) + 0.000003 * Math.cos(x * x_pi); 5 var bd_lon = z * Math.cos(theta) + 0.00

DEDE5.7如何制作网站地图？

DEDE用的人很多,可能大家在使用的过程中会碰到一些问 题,这很正常的,今天我们来讲讲DEDE5.7如何制作网站地图,其实网站地图分两种,一种做给网友看的,方便网友可以方便地找到自己想浏览的内容,另外 一种是做给搜索引擎蜘蛛看,方便蜘蛛在你网站上面抓取内容.    当然,我们这里讲的主要是针对蜘蛛的,因为DEDE默认的就有针对用户的网站地图,主要是以栏目的形式展现,这个可以在DEDE后台自行生成.其实大家印象当中的网站地图是XML格式的,一般命名成sitemap.xml,接下来进入正题.    

baidu地图：实现多点连线渲染

<script type="text/javascript"> var points = [ {"Lng":120.17787645967861,"Lat":30.251826748722667}, {"Lng":120.17786646842835,"Lat":30.251826580357911} ]; </script> <!DOCTYPE html> <ht

Vue2.0与 [百度地图] 结合使用———vue+webpack+axios+百度地图实现组件之间的通信

Vue2.0与 [百度地图] 结合使用: 1.vue init webpack-simple vue-baidu-map 2.下载axios cnpm install axios; 3.在main.js中引入axios,并使用 import axios from 'axios' /* 把axios对象挂到Vue实例上面,其他组件在使用axios的时候直接 this.$http就可以了 */ Vue.prototype.$http = axios; 4.引入百度地图的js秘钥--->最好在inde

谷歌地图下载拼接软件

选择多边形框选下载 特别BIGEMAP地图下载器提供了多种选择的下载方式,方便用户得到不同的应用当中: 1.矩形框选择区域下载 2.多边形选择区域下载 3.根据行政区(省市县区)域边界选择下载 4.导入外部边界文件下载(支持kml/kmz/shp格式) 5.标准分幅下载 6.指定矩形框经纬度范围下载 本文主要介绍应用多边形如何下载想要的区域 第一步:选在多边形工具 打开BIGEMAP软件,在软件的最上面工具栏选择[],单机左键选择. 第二步:通过单击[鼠标左键]在地图上任意位置开始绘制多边形,选

使用ros hector_mapping建地图

ros中建地图方式有两种: 首先1.首先下载hector_slam包到你工作空间的src下 命令: cd ~/catkin/src git clone https://github.com/tu-darmstadt-ros-pkg/hector_slam.git cd .. catkin_make 在~/catkin_ws/src/hector_slam/hector_slam_launch/launch/新建一个demo.launch <?xml version="1.0"?&

百度地图标注图标太小

1.1.1  现象 百度地图中,定位点的标注示意图标太小: 实际期望的图标是这样的: 1.1.2  原因 检查了很久,以为是打开地图时的设置问题,后来慢慢查找地图上的元素定位,终于发现原来这个图标大小是被CSS控制的,在地图元素的内部可以找到如下代码: 这个img元素就是用来显示定位图标的,可以修改这个元素的CSS属性来改变大小. 1.1.3  解决 如果要使用默认大小,则需要配置如下CSS: img {     max-width: inherit; } 原来图标变小,是因为其它CSS配置导致

Ios 高德地图 地图上添加多个大头针 怎么在复用队列中知道我单击的是哪一个大头针

//创建大头针对象     MAPointAnnotation *pointAnnotation = [[MAPointAnnotation alloc] init];     //插入大头针的位置     pointAnnotation.coordinate = CLLocationCoordinate2DMake(39.989631, 116.481018);     //大头针的标题     pointAnnotation.title = @"方恒国际";     //大头针的子