腾讯API展示地图


 首先,需要引入js文件:<script charset="utf-8" src="http://map.qq.com/api/js?v=2.exp"></script>

        var markersArray = [];
        $scope.latitude = 36.71;
       $scope.longitude = 119.14;
        var myLatlng = new qq.maps.LatLng($scope.latitude, $scope.longitude);
        var myOptions = {
            zoom: 15,
            center: myLatlng,
            panControl: false,
            zoomControl: false,
            //设置控件的地图类型和位置
            mapTypeControlOptions: {
                //设置控件的地图类型ID,ROADMAP显示普通街道地图,SATELLITE显示卫星图像,HYBRID显示卫星图像上的主要街道透明层
                mapTypeIds: [],
                //设置控件位置相对上方中间位置对齐
                position: qq.maps.ControlPosition.TOP_CENTER
            }
        }
        var myOptions1 = {
            zoom: 15,
            center: myLatlng,
            panControl: false,
            zoomControl: false,
            //设置控件的地图类型和位置
            mapTypeControlOptions: {
                //设置控件的地图类型ID,ROADMAP显示普通街道地图,SATELLITE显示卫星图像,HYBRID显示卫星图像上的主要街道透明层
                mapTypeIds: [],
                //设置控件位置相对上方中间位置对齐
                position: qq.maps.ControlPosition.TOP_CENTER
            }
        }
        var map = new qq.maps.Map(document.getElementById("container"), myOptions);

        var anchor = new qq.maps.Point(15, 33),
            size = new qq.maps.Size(139,  151),
            scaleSize = new qq.maps.Size(30 ,  33),
            origin = new qq.maps.Point(0, 0),
            icon = new qq.maps.MarkerImage(
                "./style/images/mydw.png",
                size,
                origin,
                anchor,
                scaleSize
            );
        var marker = new qq.maps.Marker({
            map: map,
            position: myLatlng,

        });
        marker.setIcon(icon);
        //删除覆盖物
        function clearOverlays(markersArray) {
            if (markersArray) {
                for (i in markersArray) {
                    markersArray[i].setMap(null);
                }
                markersArray.length = 0;
            }
        }

        var info = new qq.maps.InfoWindow({
            map: map
        });
        marker.setZIndex(30);
        // 调用定位信息
        geocoder = new qq.maps.Geocoder({
            complete: function (result) {
                map.setCenter(result.detail.location);
                // city.value = result.detail.address.substring(2);
                /*获取地址*/
                $scope.longitude = result.detail.location.lng == undefined ? "" : result.detail.location.lng;
                $scope.latitude = result.detail.location.lat == undefined ? "" : result.detail.location.lat;
                
                $scope.province = result.detail.addressComponents.province == undefined ? "" : result.detail.addressComponents.province;
                $scope.city = result.detail.addressComponents.city == undefined ? "" : result.detail.addressComponents.city;
                $scope.district = result.detail.addressComponents.district == undefined ? "" : result.detail.addressComponents.district;
                $scope.town = result.detail.addressComponents.town == undefined ? "" : result.detail.addressComponents.town;
                $scope.street = result.detail.addressComponents.street == undefined ? "" : result.detail.addressComponents.street;
                $scope.streetNumber = result.detail.addressComponents.streetNumber == undefined ? "" : result.detail.addressComponents.streetNumber;
                $scope.addressComponents = $scope.province + $scope.city + $scope.district + $scope.town + $scope.street + $scope.streetNumber;
            }
        });
        // 显示地址
        function geocoder_latlng() {
            //获取经纬度信息
            var lat = myLatlng.lat;
            var lng = myLatlng.lng;
            // //设置经纬度信息
            var latLng = new qq.maps.LatLng(lat, lng);
            //调用城市经纬度查询接口实现经纬查询
            geocoder.getAddress(latLng);
        }
        geocoder_latlng();
        
        $scope.searchKeyword = function() {
            clearOverlays(markersArray);
            //对指定地址进行解析
            geocoder.getLocation($scope.search);
        }

 

 这段代码既可以获取到该经纬度下的位置,还可以获取到该经纬度下的具体地址

 


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM