js怎么用地图数据实现百度地图效果

JavaScript022

js怎么用地图数据实现百度地图效果,第1张

如何在页面中调用百度地图,直接在你想要插入的页面上调用百度地图代码即可百度地图调用API地址:1.设置定位中心:直接搜索你要找的位置即可。调用百度地图代码2.设置地图:设置地图样式,如大小,显示,功能等。3.添加标注:添加你要标注的地方,自定义坐标位置4.获取代码:点击获取代码即可,在你要插入百度地图的地方出入百度地图代码只要插入部分的代码就行。

之前有提到由于项目需要进行LBS,从而对百度地图进行了一些研究。碰巧最近又接触了微信小程序,其中也涉及到有关地图方面的开发,腾讯地图这不就也来了。所以记录一下项目实践过程中的一些感悟。

首先,从官方文档来看(以下内容仅仅是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 }

    }

效果: