资讯专栏INFORMATION COLUMN

使用百度地图API获取手动定位位置信息实例讲解

suosuopuo / 1579人阅读

摘要:需求后台新增编辑活动项目时,用户可以自己通过地图插件选择位置手动定位,选择后,系统能够获得当前位置的地址信息以及坐标信息,以方便后续程序的处理。技术上主要以百度地图为核心,弹出层和百度中结果配合,父子页面传值引导达成目标。

需求

后台新增/编辑活动项目时,用户可以自己通过地图插件选择位置(手动定位),选择后,系统能够获得当前位置的地址信息以及坐标信息,以方便后续程序的处理。

代码

不啰嗦,直接看代码:

表单页面(截选):


地图弹出层页面:



    
    
    
    
    单击获取点击的经纬度


PHP获取页面结果方法:

/**
     * 根据网址获取页面内容
     *
     * @param $link
     *
     * @return string
     */
    public function getPageContent($link)
    {
        $link = trim($link);
        $content = file_get_contents($link);
        return $content;
    }
总结

流程上可以分为:点击按钮弹出子窗口页面 -> 手动鼠标选择页面位置 -> 父页面地址和坐标分别获取到值 -> 子页面关闭。

技术上主要以百度地图API为核心,layer弹出层和PHP百度api中结果配合,js父子页面传值引导达成目标。

因为很简单,其他的也不多说了,有兴趣的可以申请个ak码试试,百度官方也有很多示例。

地址
JavaScript API 类参考:[http://developer.baidu.com/map/reference/index.php][1]

JavaScript API demo演示:[http://developer.baidu.com/map/jsdemo.htm#a1_2][2]

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/22007.html

相关文章

  • vue项目中使用百度地图(vue-baidu-map)

    摘要:当属性为合法地名字符串时例外,因为百度地图会根据地名自动调整的值由于百度地图只有一种加载方式,因此组件及其所有子组件的渲染只能是异步的。 在使用vue做项目的时候,有用到百度地图,使用了vue-baidu-map插件,包括拾取位置坐标,搜索位置等 1.引入方式 showImg(https://segmentfault.com/img/bVbv0hs?w=835&h=531); 可在ap...

    番茄西红柿 评论0 收藏0

发表评论

0条评论

suosuopuo

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<