zoukankan      html  css  js  c++  java
  • 根据指定坐标在百度地图上定位展示

    <!DOCTYPE html>
    <html>
    <head>
        <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,#allmap { 100%;height: 100%;overflow: hidden;margin:0;font-family:"微软雅黑";}
        </style>
        <title>查看坐标</title>
    </head>
    <body>
    <div id="allmap"></div>
    </body>
    </html>
    <script type="text/javascript">
        //百度地图API功能
        function loadJScript() {
            var script = document.createElement("script");
            script.type = "text/javascript";
            script.src = "http://api.map.baidu.com/api?v=2.0&ak=&callback=init";//此处ak需到百度地图申请再将ak粘贴至此处作为参数
            document.body.appendChild(script);
        }
        function init() {
            var x = ${xzuobiao};                         // 后台返回的x坐标
            var y = ${yzuobiao};                         // 后台返回的y坐标
            var map = new BMap.Map("allmap");            // 创建Map实例
            var point = new BMap.Point(x, y);            // 创建点坐标
            map.centerAndZoom(point,15);                 // 初始化地图,设置中心点坐标和地图级别
            map.enableScrollWheelZoom(true);             // 启用滚轮放大缩小
            var marker = new BMap.Marker(point);         // 创建标注
            map.addOverlay(marker);                      // 将标注添加到地图中
            map.panTo(point);                            // 将地图中心移动到指定的经纬度坐标
        }
        window.onload = loadJScript;  //异步加载地图
    </script>
    

      

  • 相关阅读:
    ES6学习笔记(11)----Proxy
    ES6学习笔记(10)----Set和Map数据结构
    ES6学习笔记(9)----Symbol
    ES6学习笔记(8)----对象的扩展
    ES6学习笔记(6)----函数的扩展
    ES6学习笔记(5)----数值的扩展
    struts2学习之基础笔记1
    前端面试---常见的web安全及防护原理
    前端面试整理笔记一
    id选择器
  • 原文地址:https://www.cnblogs.com/joelan0927/p/11118635.html
Copyright © 2011-2022 走看看