首先,从官方文档来看(以下内容仅仅是JavaScript API部分):百度地图和腾讯地图很类似。不仅仅体现在支持的绘画图层(标记点、信息窗口、覆盖物)和服务类(常用的路线规划、正/逆地址解析),甚至命名也很一致。因此,有其中一个的开发经验,另一个也可以很快上手。
使用方式也一致。申请key以后引入到项目中。
默认样式主题。个人认为腾讯比百度好看(个人看法!),但是都支持自定义主题样式,因此没什么区别。
文档查阅。个人认为百度优于腾讯。
每日调试次数对比:百度配额更高些
https://lbsyun.baidu.com/solutions/privilege
https://lbs.qq.com/service/webService/webServiceGuide/webServiceQuota
有个小区别在于经纬度标准,两者数据需要进行一个转换,否则会有些许偏差。
作为一个用户,在平时导航使用感受是:高德>百度>腾讯。由于现在还没在开发过程中使用过高德地图,只是粗略地去看了眼官方文档,其中有一个关于天气的服务支持,好像在另外两家没有看到。其他的也都大同小异。不过腾讯有个支持游戏的LBS服务的解决方案,特色~
思路:把ajax获取的数据,替换mapPoints
<script type="text/javascript">var mapPoints = []
var map = new BMap.Map("container")
$(function () {
$.ajax({
url: "/BaiduMap/GetPoints",
type: 'get',
success: function (data) {
mapPoints = data//替换数据
if (mapPoints != null)
{
InitMap()
for (var i=0 i < mapPoints.length i++) {
var points = new BMap.Point(mapPoints[i].y, mapPoints[i].x)//创建坐标点
var opts = {
width: 250,
height: 100,
title: mapPoints[i].title
}
var label = new BMap.Label(mapPoints[i].branch, {
offset: new BMap.Size(25, 5)
})
var infoWindows = new BMap.InfoWindow(mapPoints[i].con, opts)
markerFun(points, label, infoWindows)
}
}
}
})
})
function InitMap() {
var point = new BMap.Point(120.382029, 30.312903)
map.centerAndZoom(point, 9)
var marker = new BMap.Marker(point)
//var mapPoints = [//这里读到数据就是没显示定位,看了下,显示出来的是字符串,mapPoints 内加载的内容都是对象
//{ x: 30.312903, y: 120.382029, title: "A", con: "我是A", branch: "老大" },
//{ x: 30.215855, y: 120.024568, title: "B", con: "我是B", branch: "老二" },
//{ x: 30.18015, y: 120.174968, title: "C", con: "我是C", branch: "老三" },
//{ x: 30.324994, y: 120.164399, title: "D", con: "我是D", branch: "老四" },
//{ x: 30.24884, y: 120.305074, title: "E", con: "我是E", branch: "老五" }
//]
var i = 0
map.addOverlay(marker)
map.enableScrollWheelZoom(true)
}
// 函数 创建多个标注
function markerFun(points, label, infoWindows) {
var markers = new BMap.Marker(points)
map.addOverlay(markers)
markers.setLabel(label)
markers.addEventListener("click", function (event) {
console.log("0001")
map.openInfoWindow(infoWindows, points)//参数:窗口、点 根据点击的点出现对应的窗口
})
}
</script>
后台:
public JsonResult GetPoints(){
List<PointView> lstPoint = new List<PointView>{
new PointView{x=30.312903M,y=120.382029M,title="A",con="我是A",branch="老大"},
new PointView{x=30.215855M,y=120.024568M,title="B",con="我是B",branch="老二"},
new PointView{x=30.18015M,y=120.174968M,title="C",con="我是C",branch="老三"},
new PointView{x=30.324994M,y=120.164399M,title="D",con="我是D",branch="老四"},
new PointView{x=30.24884M,y=120.305074M,title="E",con="我是E",branch="老五"}
}
JsonResult jsonResult = new JsonResult()
jsonResult.Data = lstPoint
jsonResult.JsonRequestBehavior = JsonRequestBehavior.AllowGet
return jsonResult
}
public class PointView
{
public decimal x { get set }
public decimal y { get set }
public string title { get set }
public string con { get set }
public string branch { get set }
}
效果: