基于百度API:
1、
getViewport
:
根据提供的地理区域或坐标获得最佳的地图视野,返回的对象中包含center和zoom属性,分别表示地图的中心点和级别。此方法仅返回视野信息,不会将新的中心点和级别做用到当前地图上
2、
centerAndZoom
:
设初始化地图。 如果center类型为Point时,zoom必须赋值,范围3-19级,若调用高清底图(针对移动端开发)时,zoom可赋值范围为3-18级。如果center类型为字符串时,比如“北京”,zoom可以忽略,地图将自动根据center适配最佳zoom级别
<!DOCTYPE html>
<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,#mapContainer {
width: 100%;
height: 100%;
</style>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=申请的AK"></script>
<title>fitBounds</title>
</head>
<div id="mapContainer"></div>
</body>
</html>
<script type="text/javascript">
const pointList = [ [ 119.144220126, -22.772636356, 0.0 ], [ 119.119609823, -22.701267344, 0.0 ], [ 119.096194593, -22.706476568, 0.0 ], [ 118.983959285, -22.706789256, 0.0 ], [ 118.969747012, -22.713100862, 0.0 ], [ 118.965776174, -22.720474664, 0.0 ], [ 118.848105524, -22.928705224, 0.0 ], [ 118.886336774, -22.958404317, 0.0 ], [ 119.045742202, -22.93542713, 0.0 ], [ 119.144220126, -22.772636356, 0.0 ] ]
const resultPoints = pointList
.map((p) => {
return new BMap.Point(p[0], p[1])
const map = new BMap.Map("mapContainer")
map.enableScrollWheelZoom(true)
fitBounds(resultPoints)
* 自适应到容纳当前所有点位的合适的bounds和zoom
* @param {[type]} bPoints [description]
* @return {[type]} [description]
function fitBounds (bPoints) {
const { zoom, center } = map.getViewport(eval(bPoints))
map.centerAndZoom(center,zoom)
</script>
注:百度API
基于百度API:1、getViewport:根据提供的地理区域或坐标获得最佳的地图视野,返回的对象中包含center和zoom属性,分别表示地图的中心点和级别。此方法仅返回视野信息,不会将新的中心点和级别做用到当前地图上2、centerAndZoom:设初始化地图。 如果center类型为Point时,zoom必须赋值,范围3-19级,若调用高清底图(针对移动端开发)时,zoom可赋值范围...
使用python语句,通过百度地图API,对已知的地名抓取经纬度
使用百度地图API官网的html例程,修改数据部分,实现呈现效果
一、使用python语句,通过百度地图API,获取经纬度读取文件信息
import pandas as pd
data = pd.read_excel('test_baidu.xlsx')
图中可以看出,原始数据并没有经纬度。
2. 构建抓取经纬度函数
import json
from urllib.request import urlopen, quote
import requests
def getln
1,基础API:apiv1.3.min.js ,有注释可参考;
2,基础CSS: bmap.css ;
3,依赖文件:map,oppc,tile,control,marker;
4,瓦片图:maptile;
5,例子:demo.html;用火狐和chrome可直接打开,在IE下还有些问题。
多多交流,一起努力!
我先封装了一个方法 找到数据集中的东南角 西北角的经纬度
这里我用到了lodash这个库 (这个库我还是比较推荐用的 可以提升开发效率)
import { maxBy, minBy } from 'lodash'
* 获取坐标的边框
* @param {*} arr
* @returns
export function getBounds(arr, opt = { lat: "lat", lng: 'lng', isArr: false }) {
const { lat,
this.map = new mapboxgl.Map({
container: this.$refs.basicMapbox,
style: this.mapStyle,
center: [116.67014887634832, 34.63229347905002],
zoom: 12,
bearing: 0,
pitch: 45
// fitBound...
L.map(<String> id , options ?) //用地图div的id创建
L.map(<HTMLElement>el , options?) //用地图div的name创建
2、参数: