javascript - 手机网页如何,插入地图 ;并设置多个标注点 ,还可路线查询
女神的闺蜜爱上我
女神的闺蜜爱上我 2017-06-10 09:48:44
0
4
796

女神的闺蜜爱上我
女神的闺蜜爱上我

全部回复(4)
某草草

去这些提供地图的网站上看他们提不提供接口,有的可以用iframe直接引过来。

代言

百度和高德都有相关的JS api,完全可以解决你的需求http://lbsyun.baidu.com/index...

某草草

这是我在前不久做的项目里给你找来的,实现的是把页面中的地址名称转换成经纬度坐标并在地图中标注出来,里面有你用的到的,要建多个地图的话,就多放几个<p id="allmap" class="baidumap"></p>,当然ID要变一下啦,JS里初始化也复制一份,map改成map1后面的方法传参改成新的ID,不复杂,你自己琢磨琢磨,还不懂的话欢迎加好友,QQ 269144551,一起学习探讨

上海市黄浦区北京西路130弄
<p id="allmap" class="baidumap"></p>

<script type="text/javascript" src="http://api.map.baidu.com/api?...这里写的你的key,没有的话去百度开发者创建一个,免费的**"></script>
<script type="text/javascript">

//百度地图api
//获取项目地址信息
var product_address = $('.product-address').text();

//初始化地图
var map = new BMap.Map("allmap");
map.centerAndZoom('上海市', 12);
map.setCurrentCity("上海市");

//添加缩放
var navigationControl = new BMap.NavigationControl({
    // 靠左上角位置
    anchor: BMAP_ANCHOR_TOP_RIGHT,
    // LARGE类型
    type: BMAP_NAVIGATION_CONTROL_LARGE,
    // 启用显示定位
    enableGeolocation: true
});
map.addControl(navigationControl);

// 添加定位控件
var geolocationControl = new BMap.GeolocationControl();
geolocationControl.addEventListener("locationSuccess");
geolocationControl.addEventListener("locationError", function (e) {
    //定位失败事件
    alert(e.message);
});
map.addControl(geolocationControl);

//获取地址经纬度
var geocoder = new BMap.Geocoder();
geocoder.getPoint(product_address, function (point) {
    if (point) {
        var lng = point.lng;
        var lat = point.lat;
        map.centerAndZoom(product_address, 20);
        var marker = new BMap.Marker(new BMap.Point(121.477904, 31.242809));
        map.addOverlay(marker);
    }
}, '上海市');

</script>

黄舟

百度地图 API 自己看文档去。

热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板